Font Weight

CSS Font Weight

The CSS font-weight property controls the thickness, or weight, of text characters. It can be used to display text with normal, bold, lighter, or heavier weights when those variations are available in the selected font family.

The font-weight Property

The CSS font-weight property specifies how thick or thin text characters should appear. The result depends on the weights available in the font being used.

p {
  font-weight: bold;
}

This rule displays paragraph text using a bold weight when the selected font provides an appropriate bold face.

Normal and Bold

The two most familiar font-weight values are normal and bold.

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

The normal value corresponds to a numeric weight of 400, while bold corresponds to 700.

Numeric Font Weights

The font-weight property can also use numeric values. Common font families may provide several weights ranging from thin or light text to heavy or black text.

h1 {
  font-weight: 700;
}

p {
  font-weight: 400;
}

The descriptive names in the table are common typography labels, but the exact appearance of each weight depends on the font family.

Lighter and Bolder

The relative values lighter and bolder select a weight that is lighter or heavier than the inherited font weight.

.lighter {
  font-weight: lighter;
}

.bolder {
  font-weight: bolder;
}

These values are relative to the weight of the parent element rather than being fixed weights such as 400 or 700.

Available Font Weights

Not every font family contains a separate design for every possible weight. A font may provide only normal and bold faces, while another font may include several light, medium, bold, and heavy variations.

If the requested weight is unavailable, the browser chooses an available face according to CSS font matching rules. As a result, two different numeric values may sometimes appear the same when the font does not provide distinct faces for those weights.

Try Different Font Weights

Edit the font-weight values in the example to compare normal, bold, and numeric font weights.

Font Weight and Inheritance

The font-weight property is inherited. An element generally uses the computed font weight of its parent unless another CSS rule specifies a different weight.

section {
  font-weight: bold;
}

section p {
  font-weight: normal;
}

Text inside the section inherits the bold weight, but paragraphs use a normal weight because they have their own font-weight declaration.

Font Weight and HTML Elements

Browsers normally display headings and the <strong> element with a bold font weight in their default styles. CSS can change their visual weight when the design requires it.

h2 {
  font-weight: 500;
}

Remember that HTML and CSS have different responsibilities. An element such as <strong> adds semantic importance to content, while font-weight controls only its visual appearance.

When to Use Font Weight

Font weight can help create visual hierarchy and distinguish headings, labels, navigation, or other important text from surrounding content. Heavier text naturally attracts attention, so it should be used deliberately rather than making large amounts of text unnecessarily bold.

When choosing numeric weights, make sure the selected font actually provides the variations needed by the design.

Summary

The CSS font-weight property controls the thickness of text. Common values include normal, bold, numeric weights, and the relative values lighter and bolder. The visible result depends on the weights available in the selected font family.

The next tutorial covers Font Style and how CSS can display normal, italic, or oblique text.