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
700 is equal to
Finally there are the relative values
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