Fluid Typography / Responsive Type

Fluid typography is an approach where font sizes scale smoothly with viewport width, rather than jumping between fixed sizes at breakpoints. Instead of font-size: 16px on mobile and font-size: 24px on desktop, fluid type uses CSS calculations to interpolate between sizes as the viewport changes.

The modern approach uses CSS clamp():

font-size: clamp(16px, 2vw, 28px);

This sets a minimum (16px), a preferred size (2% of viewport width), and a maximum (28px). The browser picks the middle value unless it violates the bounds. As the viewport grows from 320px to 1440px, the type size grows smoothly — no jarring jumps, no missing breakpoints.

Why fluid type matters for Design Systems: it reduces the number of variants you need to maintain. Instead of defining a heading at 5 breakpoints (320px, 640px, 1024px, 1440px, 1920px), you define it once with a scale. Responsive maintenance burden drops significantly.

The discipline: don't over-use fluid type for everything. Body text benefits hugely (readability improves at larger sizes without intervention). Display text might benefit. But interactive elements like buttons can become too large on big screens if you're not careful. Use fluid typography for typography; use breakpoints and media queries for layout.

Some teams combine fluid type with a type ramp, storing both the fluid calculation and the ramp level as design tokens.

Browser support is excellent (all modern browsers). The only gotcha: it doesn't work well for text that must be a fixed size for legal or accessibility reasons.

Related: Type ramp · Typography scale · Breakpoints · Responsive design · Foundations