font-size

font-size sets the font’s em size, not the exact visible height of every glyph. The same size can look different in different families because their letter shapes and metrics differ.

Compare em compounding with rem

The root is 16px for this measured exercise. The 1.25em span becomes 20px, and its nested span becomes 25px. Both rem spans remain 20px because they refer to the root.

<p>
  <span class="em">Outer em <span class="em">inner em</span></span>
</p>
<p>
  <span class="rem">Outer rem <span class="rem">inner rem</span></span>
</p>

html {
  font-size: 16px;
}
.em {
  font-size: 1.25em;
}
.rem {
  font-size: 1.25rem;
}

A bounded fluid heading

Clamp combines a relative minimum, a fluid preferred size, and a relative maximum. The heading grows with width but remains bounded; test browser zoom and reader font preferences as well.

<h1>Learn through examples</h1>
<p>Keep the surrounding text readable as the viewport changes.</p>

html {
  font-size: 100%;
}
h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.2;
}
p {
  font-size: 1rem;
  line-height: 1.6;
}

Values and defaults

The initial value is medium and font-size is inherited. Absolute-size keywords run from xx-small through xxx-large; they are keywords based on the reader’s default size, not physical units. Larger and smaller are relative keywords.

Percentages and em in font-size refer to the parent’s font size. Rem refers to the root. Pixels are CSS reference pixels, not necessarily device pixels or glyph heights. Font-relative units such as ch measure particular font metrics; viewport units follow the viewport, which is the isolated iframe in these examples.

Common mistakes

Viewport-only sizing can become too small or respond poorly to text enlargement. Prefer a relative base and test zoom rather than assuming one unit automatically guarantees accessibility. Nested em sizes compound; use rem when that multiplication is unwanted.

The previous absolute-size comparison leaked styles into the article; these demonstrations are isolated. Learn line-height, font-family, and responsive layouts.

Sources and browser support

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