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:
100
— thin;400
— regular or normal;700
— bold;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.