CODEWITHSUNDEEP
htmlcssfonts
frosty
frosty

Reputation: 2669

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>

Upvotes: 19

Views: 24142

Answers (4)

jandersen
jandersen

Reputation: 3561

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

Upvotes: 20

Amy
Amy

Reputation: 1098

Well you've used 599, you can only use numbers 100, 200, 300 etc.. so font-weight: 600 would work

Upvotes: 1

supertext
supertext

Reputation: 232

font-weight works from 100 to 900 in increments of 100. Normal weight is 400. Bold is 700.

599 is not a recognized weight since it isn't an increment of 100. Anything over 900 is not recognized either.

So you should be using font-weight: 600 for semi bold or font-weight:700 for bold.

This link helps explain https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Upvotes: 1

yts
yts

Reputation: 1890

Default font weight is 400, and fonts work in multiples of 100. 300 is light (if your font supports it), 400 is regular, 600 is semibold and 700 is bold. You can't use the numbers in between.

Upvotes: 15

Related Questions