How to Bold Text with CSS

Dan Gold

Written by Dan

The font-weight CSS property is what controls the level of boldness that you can set on any given element.


Here is some bold text.

  .font-bold {
    font-weight: bold;

<p>Here is some <span class="font-bold">bold</span> text.</p>

In the example above, the bold value is set on the font-weight property.

Additional usage

You may want to use different weights of boldness within your styles. In terms of numeric font-weight values, bold font weights are considered anything above font-weight: 400.

Reference this list of available bold font weights:

font-weight: bold; // equals 700
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Last updated

July 13th, 2023