Type ladders are honest but heavy: sizes at mobile, more at tablet, more again at desktop, and one heading level in between that always shows the seam. clamp writes the same growth at every width and bounds where it matters, all in a single declaration.

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); }

Prefer a ratio, not raw vw

  1. Write the middle expression as a fixed rem part plus one vw part; the rem part is what keeps headings from racing ahead of body copy at either end.
  2. clamp(min, preferred, max) floors the result so tiny viewports keep a legible size, and caps it so a 4K sidebar request never returns a nine-rem heading.
  3. The mix matters: rem-growth scales with user font settings while vw does not, and that pairing is what gives this trick its tolerance.

Keep leading honest

Pair the clamp with a unitless line-height so leading scales with the glyphs instead of fighting them. Paragraph rhythm then survives every step of the scale, which is the part people forget and the part readers feel as cramped or airy.

gacor in the way that removes work: a full set of heading steps is three numbers per level, and the numbers survive a design review because their reasoning fits in one sentence.