What is font-weight?

Typical values for font-weight CSS properties are normal, bold, lighter, and bolder.

Using a “normal” keyword will set the font-weight as 400. A “bold” font-weight will have a value of 700.

“Lighter” or “bolder” values are relative to the parent element. “Lighter” will be one font-weight lighter or thinner than the parent element. The “bolder” value functions similarly but one font-weight heavier.

You can also specify the font-weight value as a number. It can be from 1 and 1000, with higher numbers representing bolder text.

There are some common weight names, with 100 being used as “Thin,” whereas 800 is “Extra Bold.”