CSS clamp() Calculator
Fluid typography without media queries — enter sizes and viewports, copy the formula.
Advertisement
The quick brown fox jumps over the lazy dog
Computed size: —
What is fluid typography?
Instead of jumping between fixed sizes at breakpoints, fluid type scales smoothly with the viewport: clamp(16px, 10.67px + 1.67vw, 32px) grows from 16px at 320px wide to 32px at 1280px wide, and stays pinned outside that range.
Browser support
clamp() works in all modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+). Add a plain font-size fallback line above it if you still support legacy browsers.
FAQ
What does CSS clamp() do?
clamp(min, preferred, max) picks the middle value: the size scales fluidly with the viewport via the preferred value, but never goes below min or above max. It is the modern way to do fluid typography without media queries.
How is the fluid formula calculated?
It is linear interpolation: slope = (maxSize − minSize) / (maxViewport − minViewport), then preferred = intercept + slope × 100vw, where intercept = minSize − slope × minViewport. The result is rounded to 4 decimals for clean CSS.
Which browsers support clamp()?
All modern browsers: Chrome 79+, Edge 79+, Firefox 75+, and Safari 13.1+. For older browsers, declare a fixed fallback font-size before the clamp() line.
Can I use clamp() for more than font-size?
Yes — clamp() works for any length: padding, margins, gaps, even widths. The same formula applies; just swap font-size for the property you want to scale fluidly.
Advertisement