CSS font-weight Property

CSS font-weight Property

The CSS font-weight property controls how light or bold text appears by selecting an available weight from the font family.

Font weight can be specified with keywords such as normal and bold, relative keywords such as lighter and bolder, or numeric values. The weights that actually appear depend on the typefaces and font files available for the selected font family.

font-weight Syntax

The font-weight property is followed by a keyword or numeric value that specifies the desired weight of the text.

p {
  font-weight: bold;
}

This rule displays the text inside matching <p> elements using a bold font weight when that weight is available.

Font Weight Keyword Values

The most commonly used font-weight keywords are normal and bold.

.normal {
  font-weight: normal;
}
.bold {
  font-weight: bold;
}

Numeric Font Weight Values

The font-weight property also accepts numeric values. Traditional font families commonly provide weights associated with values from 100 through 900, with larger values representing heavier weights.

h1 {
  font-weight: 700;
}
p {
  font-weight: 400;
}

These descriptions are common naming conventions rather than a guarantee of exactly how a particular font will look at each numeric value.

Available Font Weights

Not every font family contains a separate typeface for every possible weight. A font might provide only regular and bold faces, while another font may include several weights ranging from thin to black.

If the requested weight is unavailable, the browser selects an available weight according to CSS font matching rules. As a result, changing from one numeric value to another may not always produce a visible difference.

Variable fonts can provide a continuous range of font weights when the font supports a weight variation axis.

Relative Font Weights

The lighter and bolder keywords select a weight relative to the inherited font weight rather than specifying a particular numeric value.

.parent {
  font-weight: 400;
}
.child {
  font-weight: bolder;
}

The browser determines an appropriate heavier weight based on the inherited weight and the weights available from the font family.

Inheriting font-weight

The font-weight property is inherited. Descendant text normally uses the computed font weight of its parent unless another CSS rule specifies a different weight.

article {
  font-weight: 400;
}

Descendant text will normally inherit this weight unless another rule changes it.

font-weight Example

The following example uses the font-weight property to make the paragraph text bold. Open the example in the editor and change bold to another value. Try normal, 400, 600, 700, or 900, then run the code to compare the results. Remember that the visible differences depend on which weights are available for the font being used.

p {
  font-weight: bold;
}