What Is Meant by "Relative Font Weight" in CSS?

Learn what "lighter" and "bolder" font-weights mean in CSS

The font-weight values lighter and bolder are relative font weights. This means that, when you use either of these values, the resulting font weights are calculated relative to the computed font weight of the parent element.

For example:

#parent { font-weight: 200; }

#parent > .bolder { font-weight: bolder; }
#parent > .lighter { font-weight: lighter; }

Please note that when determining relative font weights, only four font weights are considered (i.e. 100, 400, 700, and 900) for relative weight calculation. All other values are ignored.

Child elements do not inherit the "bolder" and "lighter" values, instead they inherit the computed font weights.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.