Skip to main content

CSS font-weight

This property is used for setting the thickness and boldness of the font. It is used to define the weight of the text. The available weight depends on the font-family, which is used by the browser.

Syntax​

font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset;

where:

-normal: It is the default font-weight whose numeric value is 400.

  • lighter: It considers the existing font-weight of the font-family and makes the font-weight lighter compare to the parent element.
  • bolder: It considers the existing font-weight of the font-family and makes the font-weight heavier compare to the parent element.
  • bold: As its name implies, it is used to define the bold font-weight, and its numeric value is 700.
  • number: It is used to set the font-weight based on the specified number. Its range can be between 1 to 1000.
  • initial: It is used to set the font-weight to its default value.

Example:

body    {   font-family: sans-serif;    }
p.one   {   font-weight: normal;        }
p.two   {   font-weight: lighter;       }
p.three {   font-weight: bolder;        }
p.four  {   font-weight: bold;          }
p.five  {   font-weight: 1000;          }
p.six   {   font-weight: initial;       }
p.seven {   font-weight: inherit;       }
p.eight {   font-weight: unset;         }

Table of Contents