Generate a fluid, responsive CSS clamp() value that scales smoothly between a minimum and maximum size across any viewport range.
clamp() takes a minimum, preferred, and maximum value, letting a property (like font-size) scale fluidly with the viewport while never going below the minimum or above the maximum.
clamp() scales smoothly and continuously with viewport width, avoiding the abrupt jumps that occur at media query breakpoints, and requires far less CSS code.
Yes, clamp() has excellent support in all modern browsers (Chrome, Firefox, Safari, Edge) released since 2020.
Yes, the same clamp() value works for any CSS length property — padding, margin, gap, and width all benefit from fluid scaling too.
No, the calculation runs entirely in your browser using JavaScript. Your chosen values never leave your device.
Combining rem (which respects the user's base font size setting, important for accessibility) with vw (which responds to viewport width) gives fluid scaling that's both responsive and accessible — pure px or pure vw values lose one of these two benefits.
Below the minimum viewport, the size stays fixed at your minimum value. Above the maximum viewport, it stays fixed at your maximum value — the fluid scaling only happens between those two viewport widths.
This tool calculates a CSS clamp() value that smoothly scales a font size (or any length property) between a minimum and maximum, based on the viewport width — creating fluid, responsive typography without needing multiple media query breakpoints.
The clamp() function takes three values: a minimum, a preferred value (usually involving a viewport-relative unit like vw), and a maximum. The browser evaluates the preferred value and clamps it — capping it at the minimum if it would go lower, or the maximum if it would go higher. The preferred value is calculated using linear interpolation between your two size/viewport pairs, meaning the value changes smoothly and proportionally as the viewport resizes, rather than jumping between fixed sizes at breakpoints.
This tool calculates the linear equation connecting your minimum size at your minimum viewport, and maximum size at your maximum viewport, then expresses that equation using rem and vw units — the standard, accessible approach for fluid typography that respects user font-size preferences (since rem scales with the user's base font size) while still responding to viewport width.
Before clamp() had wide browser support, fluid-feeling typography required defining a font size at each of several media query breakpoints, with the size jumping abruptly from one fixed value to another whenever the viewport crossed a breakpoint. This works, but produces a noticeably stepped effect if you resize a browser window slowly, and requires maintaining several separate CSS rules for a single property. A single clamp() declaration replaces all of those breakpoint rules with one line of CSS that scales continuously, removing both the abrupt jumps and the extra code to maintain.
For body text, a reasonable minimum is typically around 16px (below this, text starts becoming hard to read comfortably on small screens), with a maximum in the 18-20px range for most content-focused designs. Headings can use a much wider range, since large display text has more room to scale dramatically between a small mobile size and a large desktop size without becoming illegible at either end. Testing the live preview at different simulated viewport widths — or simply resizing your actual browser window — is the most reliable way to confirm your chosen range looks appropriate across the full range of device sizes.
All calculations happen directly in your browser — nothing you enter is sent to a server, logged, or stored anywhere.
While fluid typography is the most common use case, clamp() works identically for any CSS property that accepts a length value — padding, margin, gap, width, and border-radius all benefit from the same fluid scaling approach. A card component's padding that scales smoothly from a compact mobile size to a more generous desktop size, for instance, uses exactly the same clamp() formula as a heading's font size, just applied to a different property. Once you're comfortable generating one clamp() value, applying the same technique across multiple properties in a design system becomes a quick, repeatable pattern.
For a full design system rather than a single font size, many teams generate a series of clamp() values at once — one for each heading level and body text size — using a consistent minimum and maximum viewport range across all of them, while varying only the min and max size per text level. This keeps the entire typographic scale feeling proportionally consistent as the viewport resizes, since every text size scales using the same underlying viewport range, rather than each size having its own independently tuned scaling behavior that could drift out of visual harmony with the others as the page is resized.