References

Beginner-friendly references for web development, with live, editable examples.

The CSS font-weight property

Property CSS All modern browsers Updated
Quick answer

The CSS font-weight property sets how bold text is. Use bold or normal, or a number from 100 to 900 in steps of 100 — 400 is normal and 700 is bold. A weight only appears if the chosen font actually ships with it, though variable fonts support the whole range.

Overview

font-weight controls the thickness of letterforms — the difference between regular body text and a heavy headline. The two keywords cover most needs: normal and bold, which map to the numbers 400 and 700.

The numeric scale runs from 100 (thin) to 900 (black) in hundreds, giving you finer control when a typeface offers it. That last part is the catch: a weight only renders if the font includes it. Ask for 200 from a font that ships only regular and bold and the browser substitutes the nearest available weight — so test with the actual font you are loading.

Modern variable fonts change the picture: a single file can supply every weight from 1 to 1000, so you can use font-weight: 550 and get exactly that. It is also worth remembering that semantic emphasis belongs in HTML — <strong> and <b> carry meaning, while font-weight is the visual control you layer on top.

Syntax

selector {
  font-weight: value;
}

/* a heavy heading */
h1 {
  font-weight: 800;
}

Values

The font-weight property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
normal The standard weight, equivalent to 400. The default.
bold Bold text, equivalent to 700.
100 to 900 Numeric weights in steps of 100, from thin to black.
lighter One step lighter than the inherited weight.
bolder One step heavier than the inherited weight.

Example

Live example 
<style>
  p { margin: 0 0 6px; font-family: system-ui, sans-serif; font-size: 18px; }
  .w300 { font-weight: 300; }
  .w400 { font-weight: 400; }
  .w700 { font-weight: 700; }
  .w900 { font-weight: 900; }
</style>
<p class="w300">300 — light</p>
<p class="w400">400 — normal</p>
<p class="w700">700 — bold</p>
<p class="w900">900 — black</p>

Best practices

  • Use the numbers (e.g. 600, 800) when you need weights between normal and bold — but only if the font ships with them.
  • Make sure every weight you use is actually loaded; an unavailable weight is faked or rounded, which can look off.
  • Use <strong> for meaningful emphasis and reserve font-weight for purely visual styling.
  • Variable fonts let you pick any weight from one file — handy for a precise type scale without multiple downloads.

Frequently asked questions

How do I make text bold in CSS?
Set font-weight: bold (or 700). For semantic emphasis in the markup, wrap the text in <strong>, which is bold by default.
What do the numbers in font-weight mean?
They are weights from 100 (thinnest) to 900 (heaviest) in steps of 100. 400 is normal and 700 is bold. Finer numbers only work if the font includes them.
Why is my font-weight not changing?
The font probably does not include the weight you asked for. Many fonts ship only regular and bold, so a value like 300 falls back to the nearest one. Load the weight you need, or use a variable font.
What is the difference between font-weight: bold and the b tag?
font-weight: bold is purely visual. The <b> and <strong> elements carry meaning in the markup — use those when the boldness is meant to convey importance.
font-size gap