Search code examples
htmlcssfontsfont-facewebfonts

Why does "font-weight: bolder" skip boldness steps?

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.

Solution

  • 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. <!-- ... -->