clamp()

Type on rails, not on stops

CaveatThe middle term is where fluid type quietly fails an audit: a preferred value written purely in viewport units does not respond when someone raises their browser’s text size, because vw tracks the window, not the reader’s setting — and text that cannot reach 200% is a WCAG failure, not a taste issue. Mix a rem term into the middle — clamp(1.4rem, 1rem + 2.5vw, 2.6rem) — and zoom moves the whole expression again. Two smaller teeth: if the floor ends up larger than the ceiling, the floor wins, which is how a refactored token turns every headline huge; and inside the calculation a bare 0 needs a unit, because clamp(0, …) is not a length and the declaration dies whole.

FallbackUniversal since 2020, so the fallback story is short: declare a plain font-size on the line above for anything older, and it simply reads at one size. The demo above runs the middle term in cqi so it can be dragged; on a page you will usually want the viewport flavour — same rails, same zoom rule, one unit swapped.

h1 {
  font-size: 28px;
  /* the rem term keeps browser
     zoom working: pure vw type
     fails the 200% test */
  font-size: clamp(
    1.4rem, 1rem + 2.5vw, 2.6rem);
}

Published 12 Sep 2026