The font-weight property is used to set the boldness (weight) of the font. The amount of boldness you get depends on the font (font-family) being used. Is it possible to surpass the standard font-weight property values and it be font-weight: 1000 ?
Quick answer: Depends on your browser!
According to the Css Fonts Module Level 4 specification, font-weight can have any value between 1 and 1000 (inclusive). All other values are considered invalid. This specification came into effect from Sept 2018.
If you have updated your browser anytime since then, you can be sure that your browser supports the CSS Fonts Level 4 thereby supporting font-weight: 1000;.
Before Sept 2018, setting font-weight: 1000; had no effect and would fail silently. Sometimes, even after setting font-weight: 1000; the desired boldness may not be visible. How can you then make it more bolder given that we cannot exceed 1000 ??? In a short moment, we will check out how… Before that, here’s a quick reminder of font-weight’s syntax.
Font-weight Syntax
/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 1 font-weight: 100; font-weight: 100.6; font-weight: 123; font-weight: 200; font-weight: 300; font-weight: 321; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; font-weight: 1000; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
Working Example
Common Weight Names
According to the OpenType specification, the numerical values 100 to 900 roughly correspond to the following common weight names:
| Value | Common weight name |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
Going Bolder than font-weight:1000
A neat trick to make your font look even more bolder than setting font-weight:1000; is to use shadows. Rather than immediately explaining exactly how it exactly works, here’s an example to demonstrate the effect.
Note that in the example, the font-weight has already been set to 1000 to achieve maximum boldness. Clicking on the “Toggle Shadow” button will render the font more bolder by using shadows.
As seen, with shadows, you can make your font look even more bolder than what font-weight:1000; can !!!
The key style used is text-shadow: 1px 0 #000; which gives a bolder look. You can further increase the boldness by using the text-shadow property in conjunction with letter-spacing property. You can try it by updating the JS Fiddle with the following code to see the result.
/* Using text-shadow in conjunction with letter-spacing to give bolder effect */ color: #fff letter-spacing: 2px; text-shadow: 2px 0 #fff;
Hope that helps!
thank you for your review. I just tested on Chrome (Version 89.0.4389.82 (Official Build) (x86_64)) as well as Safari(Version 14.0 (15610.1.28.1.9, 15610)) on Mac OS Catalina and it works as expected on both. Can you give me more details about your Chrome version ?
yes, as you have discovered, you can go bolder than `font:1000` by using shadows (but as you also said, it works only for until a certain extent after which you begin to start noticing the repetition of the characters!)