The old ritual: 32px headlines on mobile, a media query at 768px, 48px on desktop. Between those breakpoints, nothing happens—then everything jumps at once. Typography that should feel continuous behaves like a slideshow.

Fluid type replaces the staircase with a slope. One declaration, no media queries, and the size glides smoothly across every device that exists—including the ones that have not shipped yet.

The clamp() pattern

h1 {
  /* min: 36px — preferred: scales with viewport — max: 64px */
  font-size: clamp(2.25rem, 1.5rem + 3.3vw, 4rem);
}

The middle value is the working part: a rem base plus a viewport-relative slope. The rem component matters for accessibility—a pure vw value ignores the user’s zoom preference, which is a WCAG failure. Always mix a rem term in.

“Breakpoints are where designs admit they were only tested at three widths.”

Scaling the scale

The refinement that separates good fluid systems: the ratio itself should be fluid. On a phone, a 1.2 ratio between text steps is plenty—screens are small, hierarchy comes from weight and spacing. On desktop, 1.333 gives headlines room to be dramatic. Tools like Utopia generate the full set of custom properties for a min and max ratio, and interpolate everything in between.

Set body text around clamp(1.06rem, 1rem + 0.3vw, 1.19rem), build five or six steps on the fluid ratio, and you have an entire typographic system in a dozen lines—one that never snaps, never overflows, and never needs a breakpoint audit again.