font-weight

Back to the index.

Subtle compatibility problem: exactly where in the 100-900 range does lighter start to generate bold text?

font-weight is meant for setting the weight (boldness) of the font. normal is the default.

The problem here is that the font itself must have one or more weights. If it has none you cannot make it bold at all.

If you want a completely safe weight, just use font-weight: bold and accept anything the browser gives you.

If you’re the adventurous sort, you can use the 100-900 values. They’re supposed to give nine different weights, from very light to very bold. Few fonts support all nine weights, although some support four or five.

font-weight: 400 is supposed to be equal to normal, while 700 is equal to bold.

Finally there are the relative values bolder and lighter that make a bit of text one step bolder or lighter than the default weight (which in turn depends on the absolute font-weight value you defined).

Test case

For the test case I use Segoe UI for Windows and Helvetica Neue for Mac. Segoe UI has four weights, and Helvetica Neue five. If you see only two weights, your browser does not handle font-weight properly.

font-weight: normal bolder lighter
font-weight: bold bolder lighter
font-weight: 100 bolder lighter
font-weight: 200 bolder lighter
font-weight: 300 bolder lighter
font-weight: 400 bolder lighter
font-weight: 500 bolder lighter
font-weight: 600 bolder lighter
font-weight: 700 bolder lighter
font-weight: 800 bolder lighter
font-weight: 900 bolder lighter