What Is Meant by "Relative Font Weight" 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.


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.