font-weight

Published Jun 30, 2021Updated Mar 2, 2024
Contribute to Docs

To set the text to be thicker or thinner.

Syntax

font-weight: font-weight-value;

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;
}

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

A paragraph of text styled 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;
}

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

A paragraph of text styled with a font-weight of 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.

All contributors

Looking to contribute?

Learn CSS on Codecademy