Why does “font-weight: bolder” skip boldness steps?

5
votes

According to the MDN page on font-weight and other sources, font-weight: bolder makes text content "one font weight darker than the parent element (among the available weights of the font)."

I have a test page with the "Open Sans" font included from Google Fonts, with the weights 300, 400 (aka "normal"), 600, 700 (aka "bold"), and 800. Setting the numeric font weights manually works as expected, but using bolder seems to skip the font weight 600.

Firefox and Chrome agree on this, so I'm probably misunderstanding what "one step" means in this context.

Here's a JSFiddle for testing, and a screenshot of the results I'm getting.

enter image description here

The first section has manual numeric font-weight settings. The second has nested div blocks styled with font-weight: lighter (works as expected), the third has nested div blocks with font-weight: bolder; this one shows the effect I'm trying to understand.

2
htmlcssfontsfont-facewebfonts

2 Answers

6
votes

From the font-weight section of the CSS2.1 specification:

Values of 'bolder' and 'lighter' indicate values relative to the weight of the parent element. Based on the inherited weight value, the weight used is calculated using the chart below. Child elements inherit the calculated weight, not a value of 'bolder' or 'lighter'.

Inherited val   bolder  lighter
100             400     100
200             400     100
300             400     100
400             700     100
500             700     100
600             900     400
700             900     400
800             900     700
900             900     700

This means that anything bolder than a font-weight of 400 is given a weight of 700, and anything bolder than a font-weight of 700 is given a weight of 900.

This is exactly what is happening in your JSFiddle demo.

Bolder

This is some text with weight 400.        <!-- 400 -->
This text is one step bolder than above.  <!-- bolder than 400 = 700 -->
This text is one step bolder than above.  <!-- bolder than 700 = 900 -->
This text is one step bolder than above.  <!-- bolder than 900 = 900 -->
This text is one step bolder than above.  <!-- ... -->

Lighter

This is some text with weight 400.        <!-- 400 -->
This text is one step lighter than above. <!-- lighter than 400 = 100 -->
This text is one step lighter than above. <!-- lighter than 100 = 100 -->
This text is one step lighter than above. <!-- ... -->
3
votes

Speaking from pure logic, you're correct. But according to the W3C recommendation, that is not so. Quoting the document:

Values of 'bolder' and 'lighter' indicate values relative to the weight of the parent element. Based on the inherited weight value, the weight used is calculated using the chart below. Child elements inherit the calculated weight, not a value of 'bolder' or 'lighter'.

[Inherited value]   [bolder]    [lighter]
100                 400         100
200                 400         100
300                 400         100
400                 700         100
500                 700         100
600                 900         400
700                 900         400
800                 900         700
900                 900         700