font-weight

font-weight chooses a font’s weight. The requested value and the actual available face are different: a font with only regular and bold may render several requested numeric values using the same face.

Compare regular and bold

Normal is 400 and bold is 700. The intermediate 500 request may resemble regular if this system font does not supply a separate medium face.

<p class="regular">Regular: 400</p>
<p class="medium">Medium request: 500</p>
<p class="bold">Bold: 700</p>

p {
  font-family: system-ui, sans-serif;
}
.regular {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.bold {
  font-weight: 700;
}

Use weight alongside meaningful structure

The heading provides document structure; strong provides importance. A labeled field uses a moderate weight without replacing its actual label association.

<section>
  <h2>Workshop registration</h2>
  <p><strong>Required:</strong> enter your name before continuing.</p>
  <label for="name">Name</label
  ><input id="name" name="name" autocomplete="name" required />
</section>

h2 {
  font-weight: 700;
}
label {
  font-weight: 600;
  display: block;
}
input {
  font: inherit;
  padding: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
}
p {
  line-height: 1.5;
}

Values and inheritance

The initial value is normal and font-weight is inherited. Normal equals 400; bold equals 700. Numeric weights can range from 1 through 1000, not just multiples of 100. Variable fonts can expose a continuous range through the weight axis; static fonts use a face-matching fallback algorithm.

Lighter and bolder resolve relative to the inherited weight using defined ranges. They do not simply subtract or add 100. The computed numeric weight can remain requested even when the rendered face falls back, so computed styles alone do not prove a particular face exists.

Common mistakes

Bold styling does not create importance semantics. Use strong when importance is intended and b only for its distinct attention-drawing meaning. Avoid thin, low-contrast text for essential content.

Loading more distinct static font files can cost bytes; a system font comparison has no such download dependency. Learn font-family, font, and font-display.

Sources and browser support

MDN: font-weight describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.