CSS font-weight

To set the text to be thicker or thinner.

Syntax

font-weight: font-weight-value;

Copy to clipboard
Copy to clipboard

The font-style-value can be the following:

• normal
• bolder
• bold
• initial
• inherit
• lighter

or can be in the form of numerical values from 100 to 900. The default value is normal while the default numerical value is 400.

Example

Set the p tag to bold:

p {
  font-weight: bold;
}

Copy to clipboard
Copy to clipboard

The image below shows what text looks like with a bold font-weight:

Set the p tag to 600:

p {
  /* This code snippet gives the text a semi-bold style */
  font-weight: 600;
}

Copy to clipboard
Copy to clipboard

The image below shows what text looks like when the font-weight is set to 600:

Note: The way font-weight renders can differ from browser to browser. For certain languages, it is not advised to use font-weight. This includes languages with complex scripts such as Chinese and Japanese.