frosty frosty -4 years ago 98
CSS Question

CSS font-weight numbers: how do they work?

I'm trying to use font-weight to adjust how bold the font is. From what I understand, value 500 is the normal font weight, and value 700 is the default font weight for bold.

However, when I put 599, it did not change the font-weight at all. But when I put 600, it jump to the default font weight of bold. Same results from value 600-900. Then when you go over 900, the font weight reverts back to the normal font weight. Why is this happening?

#fontStyle {
border: 1px solid black;
font-weight: 599;

<div id="fontStyle"> fontStyle </div>

Answer Source

The details of how numeric values are mapped to font weights are covered in the spec which states:

The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

'599' is not a valid value for the font-weight property

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download