How to Use CSS clamp() for Responsive Typography
CSS clamp() lets you set a value that scales fluidly between a minimum and maximum. Instead of jumping between fixed sizes at breakpoints, elements transition smoothly as the viewport changes. It's most commonly used for typography but works for any CSS property that accepts length values.
- Build fluid typography with CSS clamp().
- Covers clamp() syntax.
- Covers fluid typography.
- How to Calculate clamp() Values.
- Covers beyond typography.
clamp() Syntax
clamp() takes three values: a minimum, a preferred (fluid), and a maximum:
font-size: clamp(1rem, 2.5vw, 2rem);
This means: never smaller than 1rem (16px), scale with the viewport at 2.5vw, but never larger than 2rem (32px). The browser uses the preferred value as long as it falls between the min and max — otherwise it clamps to the nearest boundary.
Fluid Typography
The most common use is responsive font sizes without media queries:
gap instead of margin hacks for flexbox spacing. It keeps layout code cleaner and is supported in all modern browsers.h1 { font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.25rem, 3vw + 0.5rem, 2.5rem); }
p { font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); }
The preferred value combines vw (viewport width) with a fixed rem offset. The rem part prevents text from becoming too small on narrow screens. This replaces 3-4 media queries with a single line per element.
How to Calculate clamp() Values
To create a clamp value that scales from 20px at 320px viewport to 48px at 1200px viewport: slope = (48 - 20) / (1200 - 320) = 0.0318. The preferred value is 0.0318 * 100vw + a y-intercept. The CSS Clamp Calculator does this math for you — enter your min size, max size, min viewport, and max viewport, and it generates the exact clamp() expression.
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.Beyond Typography
clamp() works for any length property: padding, margin, gap, width, max-width. Fluid spacing: padding: clamp(16px, 4vw, 64px) gives tight padding on mobile and generous padding on desktop. Fluid containers: max-width: clamp(320px, 90vw, 1200px) creates a container that's 90% of the viewport but bounded at both ends. Fluid gaps: gap: clamp(8px, 2vw, 24px) keeps grid gaps proportional to the viewport.