How Are Relative Font Weights Determined in CSS?

When using relative font-weight values in CSS (i.e. lighter or bolder), only the following four font weights are considered for relative weight calculation:

  1. 100 — thin;
  2. 400 — regular or normal;
  3. 700 — bold;
  4. 900 — heavy;

If a font-family has more weights than the four mentioned above, they're ignored when calculating relative font weights.

The browser looks for the closest bolder or lighter font weight to the parent element, and computes the element's font-weight accordingly. According to the W3 spec, the following absolute font weights are applied to the element when you use relative font weights:

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

For example:

#parent { font-weight: 500; }

#parent > .bolder { font-weight: bolder; } /* equivalent to 700 */
#parent > .lighter { font-weight: lighter; } /* equivalent to 100 */

If you wish to have finer control over the exact weight values used for a given element you should avoid using relative font weights and use numeric values instead.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.