Fluid type without the guesswork

· 1 min read ·Mira Lund

design css

Warm amber gradient

Breakpoint typography optimises for five screen sizes and ignores the thousands in between. Fluid typography optimises for the range.

The pattern

:root {
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.72vw, 1.95rem);
}

Each step is minimum, preferred, maximum. The preferred value mixes a rem base with a viewport unit, so text scales but never becomes unreadable when someone zooms.

Three rules that matter more than the scale

  • Cap your measure. Around 60–70 characters. max-width: 34rem on paragraphs does more for readability than any font choice.
  • Let headings be tight. Negative tracking at large sizes: letter-spacing: -0.03em.
  • Use text-wrap: balance on headings and pretty on body copy. Two lines of CSS, no orphans.

[!NOTE]

Never use a viewport unit alone in font-size. It breaks browser zoom, which is an accessibility failure, not a style choice.

Testing it

Drag the window slowly from 320 px to 1600 px and watch a single paragraph. If the line count jumps by more than one at any point, the curve is too steep.