CSS clamp() Fluid Typography

CSS clamp() and fluid typography

The CSS function clamp(min, preferred, max) picks the preferred value when it falls inside the range and clamps it to the bounds otherwise. Its most celebrated use is fluid typography: font-size: clamp(1rem, 2.5vw, 2rem) scales smoothly from 1rem on small viewports to 2rem on large screens, with no breakpoints in between. The same idea works for spacing, gaps, padding, border-radius and even gradient stops.

The technique started in 2016, when Mike Riethmuller showed how to linearly interpolate between two viewport sizes using calc(). Modern clamp() collapses those expressions into a single, readable line.

The math behind the preferred value

Linear interpolation between two viewport widths can be written as:

calc(
  min + (max - min)
  * (100vw - viewportMin)
  / (viewportMax - viewportMin)
)

Which simplifies to calc(slope * 100vw + intercept). Wrapped inside clamp(), the function guarantees the result never falls below min nor climbs above max — so the type never becomes unreadable on phones nor enormous on 4K screens.

Tools and methodologies

• utopia.fyi — Trys Mudford's calculator, the de facto standard for fluid type and space scales;
• fluid-type-scale.com — a focused generator for typographic ramps;
• modern-fluid-typography.vercel.app — quick visual playground;
• Modular scales: 1.125 (minor second), 1.250 (major third), 1.618 (golden ratio).

Browser support and siblings

clamp() ships in Chrome 79+, Firefox 75+ and Safari 13.1+ — universal among modern browsers. Its siblings min() and max() have the same support and are useful when you only need one bound.

Pitfalls and accessibility

Never clamp without a viewport-relative unit in the preferred slot (use vw or %) — otherwise the value never moves. Avoid em in the min/max bounds because it leads to compounding when nested. Most importantly, use rem for the bounds: WCAG 1.4.4 requires text resize up to 200%, and rem respects the user's root font-size override, while px does not.

FAQ

Does clamp() replace media queries for typography? For type scales, yes — one declaration covers the full viewport range. Media queries remain useful for radical layout swaps that go beyond resizing a single property.

Should min and max use relative units? Yes. Use rem so users with custom root font sizes still get readable text. px bounds break the browser zoom controls assistive technology relies on.

How do I pick the slope between 320px and 1280px? Compute the difference between max and min, divide by the viewport range, and multiply by 100 to convert to vw. Tools like utopia.fyi do this automatically and let you preview the curve.

Can I combine container queries with clamp()? Yes — and that is the next step for component-level fluidity. Replace vw with cqi inside a container context and the type scales with the parent, not the page.