For years we've been setting font sizes at fixed breakpoints. Small screens get 16px, tablets get 18px, desktops get 20px. It works, but it creates jarring jumps between those sizes and ignores every viewport width in between.

The problem with breakpoints

A breakpoint-based approach assumes the web comes in three or four sizes. It doesn't. People browse on phones held in portrait and landscape, on tablets of every dimension, on ultra-wide monitors, and on everything in between. A design that only considers three widths leaves most of the spectrum unoptimized.

Enter CSS clamp()

The clamp() function accepts three values: a minimum, a preferred value, and a maximum.

font-size: clamp(1rem, 0.9rem + 0.5vi, 1.25rem);

The preferred value uses viewport-inline units (vi), so it scales with the viewport width. But it never goes below the minimum or above the maximum. The result is a font size that transitions smoothly — no jumps, no breakpoints.

Building a type scale

Rather than setting individual sizes, you define a modular scale that's fluid from end to end. Each step relates to the next by a consistent ratio, and every step uses clamp(). The entire type system breathes with the viewport.

The best interfaces feel inevitable. Fluid type scales help get us there by removing arbitrary decisions about which sizes appear at which widths.

This approach pairs well with fluid spacing, where margins and padding follow the same logic. Together, they create layouts that feel considered at every size — not just the three you tested.