Can I use font-weight: 1000 ?

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!


Going Bolder than font-weight: 1000
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!


References

Leave a Reply