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.