CSS Clamp Calculator guide
Generate a CSS clamp() value that scales smoothly between a minimum and maximum size across a viewport range. Output in rem to respect user font settings, or px, with a preview of the computed size at common screen widths.
What clamp() does
clamp(MIN, PREFERRED, MAX) returns the preferred value, but never less than MIN and never more than MAX. For fluid typography, the preferred value combines a fixed part and a viewport-relative part, like 0.2174rem + 3.4783vw. As the viewport widens, the vw part grows, so the font size grows smoothly instead of jumping at breakpoints, and the bounds keep it from getting absurdly small on phones or huge on wide monitors.
One line replaces a stack of media queries. It has worked in every major browser since 2020, including Safari 13.1 and later, so no fallback is needed for current browsers.
The math behind the generated value
You want the size to be MIN at the minimum viewport and MAX at the maximum viewport, following a straight line between them. The slope is (max size − min size) ÷ (max viewport − min viewport). The intercept, the size the line would give at a zero-width viewport, is min size − slope × min viewport. The preferred value is intercept + slope × 100vw, because 1vw is 1 percent of the viewport width.
Worked example: 16px at a 360px viewport, 48px at 1,280px. Slope = 32 ÷ 920 = 0.034783, or 3.4783vw. Intercept = 16 − 0.034783 × 360 = 3.478px, which is 0.2174rem at a 16px root. Result: clamp(1rem, 0.2174rem + 3.4783vw, 3rem). At 375px wide that computes to 16.5px, at 768px to about 30.2px, at 1,024px to about 39.1px, and at 1,440px it hits the 48px cap.
Why rem beats px here
Browsers let users set a default font size, and people with low vision often raise it from 16px to 20px or more. Values in rem scale with that setting; values in px ignore it. A clamp written entirely in px locks text at your chosen sizes no matter what the user asked for, which works against WCAG success criterion 1.4.4 (Resize Text).
There is a subtler issue with vw too: text sized purely in vw does not grow when the user zooms, because zooming shrinks the viewport's width in CSS pixels, which cancels the zoom out for anything measured in vw. Keeping a rem component in the preferred value, as this calculator does, preserves at least part of the zoom response. Test your final type scale at 200 percent zoom.
Building a fluid type scale
Pick one viewport range for the whole site, typically 360px to 1,280px or 1,440px, and generate a clamp for each step: body text from 16 to 18px, h3 from 20 to 28px, h2 from 24 to 36px, h1 from 32 to 56px. Headings should scale more than body text, because a phone can't fit a 56px headline but a desktop needs the drama.
Store the values as custom properties, such as --step-0 through --step-4, and reuse them. The same approach works for spacing: fluid padding and gaps keep layouts proportional without breakpoint tweaks. Change 'font-size' in the output to 'padding', 'gap', or 'margin' as needed.
Common mistakes
Min and max viewports that are equal or reversed make the slope divide by zero or flip; the calculator stops and asks for a larger max viewport. Setting the maximum size smaller than the minimum produces text that shrinks as screens grow. That is occasionally intentional, and clamp() still needs its first argument to be the smaller value, so the calculator orders the bounds for you.
Another trap is a root font size other than 16px. If your CSS sets html { font-size: 62.5% } so that 1rem equals 10px, enter 10 as the root size or the rem values will be wrong. Finally, remember line-height: fluid font sizes pair best with unitless line-heights such as 1.2 for headings and 1.5 for body text, which scale automatically.
Using the calculator
Enter min and max sizes in pixels and the viewport range, choose rem or px output, and copy the line. The preview row shows the computed size at 375, 768, 1,024, and 1,440 pixels wide, so you can sanity-check before pasting. Everything is computed in your browser.
How we calculate: sources
Frequently asked questions
How does CSS clamp() work?
clamp(MIN, PREFERRED, MAX) returns the preferred value but never lets it drop below MIN or rise above MAX. For fluid type, the preferred value is a rem offset plus a vw slope, so size grows with the viewport.
How is the clamp formula calculated?
Slope = (max size − min size) ÷ (max viewport − min viewport). Intercept = min size − slope × min viewport. The preferred value is intercept + slope × 100vw. From 16px at 360px to 48px at 1280px, that is 0.2174rem + 3.4783vw.
Should I use rem or px in clamp()?
Use rem for the min, max, and intercept. Browser zoom scales both, but a user's default font size setting only affects rem values. A px-only clamp ignores that setting, which works against WCAG 1.4.4 (Resize Text).
Is clamp() supported in all browsers?
Yes. Chrome, Edge, Firefox, and Safari have supported clamp() since 2020 (Safari 13.1), so it is safe for production without a fallback for current browsers.
Can I use clamp() for padding, margins, and gaps?
Yes. clamp() works in any property that accepts a length, including padding, margin, gap, width, and border-radius. Change the property name in the generated line.
What if my minimum size is larger than the maximum?
That creates text that shrinks as the screen grows. The calculator orders the clamp bounds correctly, since clamp() requires the first value to be smaller than the last.
Is anything uploaded?
Everything runs in your browser. Nothing you enter is uploaded to a server or stored by us.
What is the difference between clamp(), min(), and max()?
min() returns the smallest of its values and max() the largest. clamp(a, b, c) is shorthand for max(a, min(b, c)): a preferred value with a floor and a ceiling.