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).
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 |