CSS font-weight thicker than 900?

Question

I have a panel which can be expanded or minimised through a vertically centred link with a < or > symbol as the link text. At font-weight: 900 this does not stand out much, even with a large grey background around it. I do not want to use an image and, at the current font size, both symbols currently take up the maximum width of the panel.

Is there any way to thicken the line on the symbols beyond 900? Or is there another alternative I could use?

Thanks in advance.

Richard

Gogutz · Answer 1 · 2014-05-19T07:48:39.237

56

In CSS 3 there's another way to make the font size bolder:

color:#888888;    
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;

EDIT:

For some sort of weird reason this doesn't look as pretty as it did over an year ago. It only works with text-shadow of 1px (on most common fonts, other thicker fonts might still work with 2px). And with text-shadow of only 1px, there's no need for such a large letter-spacing.

color:#888888;    
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;

edited May 19 '14 at 07:48

answered Jan 28 '13 at 11:49

Gogutz

2,005
17
19

1

Perfect solution! Thanks! – Egor Jun 21 '17 at 08:02
1

That is a neat way to make fonts fatter – MaxZoom Sep 11 '18 at 12:08

score 20 · Answer 2 · answered Nov 19 '16 at 16:32

20

To add to Gogutz answer, you can go even bolder by stacking up the text-shadows in a grid. Comma separate each on the line:

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}

answered Nov 19 '16 at 16:32

Andy Ballard

421
5
4

1

you can also try this: `text-shadow: -1px 1px, 1px 1px, 1px 1px;` – agni10 Jan 17 '18 at 07:41
This is a great solution, so my thanks to @andy-ballard for the post. I made a small variation for high-res phones/displays with `text-shadow: 0 0.01em, 0.01em 0, 0.01em 0.01em;` and recommend trying the leftmost (without stacking) `text-shadow: 0 0.01em;` for a subtle bolder effect, then stacking on from left-to-right as needed. – gdibble Apr 26 '22 at 19:56

score 10 · Answer 3 · answered Dec 04 '18 at 12:35

10

You can use text-shadow instead of font-weight

text-shadow: 0px 1px, 1px 0px, 1px 0px;

answered Dec 04 '18 at 12:35

Smita Kagwade

281
1
4
12

score 6 · Accepted Answer · answered Oct 16 '10 at 14:11

6

Unfortunately there's no font-weight thicker than 900, and specifying font-weight by number varies across browsers. Your best bet would be to use a thicker font - you haven't specified what you're using, but Impact is relatively thick and tall for its width while being web-safe. Otherwise you could use @font-face to load in a different font.

answered Oct 16 '10 at 14:11

Chris Cox

620
3
17

I am using `font-family: Verdana, Arial, Helvetica, sans-serif`. I could just add a class for those links which sets the font to impact... that would work. It shouldnt make it look too much different in style either - only in weight. Thanks for the tip. – ClarkeyBoy Oct 16 '10 at 14:58

score 5 · Answer 5 · answered Apr 22 '20 at 19:57

5

Adding to Gogutz answer. You can use the currentcolor keyword to use the color of the text and avoid hardcoding it.

Like this:

text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;

answered Apr 22 '20 at 19:57

Tagman

176
2
11

score 0 · Answer 6 · answered May 07 '14 at 14:42

0

This is quite thick. But works only with webkit.

font-size: -webkit-xxx-large;
font-weight: 900;

enter image description here

answered May 07 '14 at 14:42

Durin

2,070
5
23
37

CSS font-weight thicker than 900?

6 Answers6