Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Compute a fluid clamp() value for responsive font sizing between two breakpoints.
font-size: clamp(1.0000rem, 0.6667rem + 1.6667vw, 2.0000rem);CSS's clamp(min, preferred, max) function lets a value (commonly font-size) scale smoothly between a minimum and maximum as the viewport resizes, instead of jumping abruptly at fixed media-query breakpoints. Computing the "preferred" middle value by hand requires linear-interpolation math -- this tool does that math for you.
Enter your minimum and maximum font sizes (in px) and the viewport width range they should apply across. The generated clamp() CSS value appears instantly.
The tool computes a linear function between the two (viewport-width, font-size) points, expressing it as clamp(minRem, calculatedRem + calculatedVw, maxRem) -- below the min viewport, the size stays at the minimum; above the max viewport, it stays at the maximum; in between, it scales smoothly and proportionally.
For converting between CSS units generally, see the CSS Units Converter.
The tool takes a minimum size, a maximum size, a minimum viewport width and a maximum viewport width, all in pixels. It first computes the slope of the line through the two points, then the intercept, and writes the result in rem units assuming a 16 pixel root size.
slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - minViewport x slope
result = clamp(minSize / 16 rem, intercept / 16 rem + slope x 100 vw, maxSize / 16 rem)
Values are shown with four decimal places.
With the starting values of 16 to 32 pixels across viewports of 320 to 1280 pixels, the slope is 16 / 960 = 0.016667 pixels per pixel of viewport. That is 1.6667 vw. The intercept is 16 - 320 x 0.016667 = 10.6667 pixels, which is 0.6667 rem. The tool therefore gives clamp(1.0000rem, 0.6667rem + 1.6667vw, 2.0000rem). Test it at an 800 pixel viewport: 1.6667vw is 13.33 pixels, plus 10.67 pixels gives 24 pixels, exactly halfway between 16 and 32, which is what you would expect at the midpoint of the range.
The conversion divides by 16, so the output is correct when your root font size is the browser default of 16 pixels. If your stylesheet changes the html font size, for example to 62.5 percent, the rem values will render differently than the pixel numbers you entered. In that case, adjust the calculation by hand or convert your pixel targets accordingly.
Because the middle term combines rem and vw, text still responds to a user's font-size preference, but the vw part does not. Users who zoom the page in the browser will still see the text grow, though the behavior across zoom levels can be less predictable than with a plain rem. Test with browser zoom, especially for main body text, and consider keeping body text conservative while using stronger fluid scaling for headings.
If the min and max viewport widths are equal, the slope divides by zero and the result is not usable, so keep the maximum larger than the minimum. If your max size is smaller than your min size, the slope is negative, which is valid CSS but unusual. It produces text that shrinks as the screen grows, and in clamp the min and max arguments may then behave in a way you did not intend, so it is normally best to keep min below max.
rem respects the user's browser font-size preference (accessibility), and vw makes the value scale continuously with viewport width -- combining both in clamp() gives fluid, accessible scaling that plain fixed px values can't.
Yes -- clamp() works for any CSS length property (padding, margin, width, gap, etc.), though font-size is the most common use case for this fluid-scaling technique.
The value stays fixed at the minimum size -- clamp() never goes below its first argument, regardless of how narrow the viewport gets.
16 pixels is the default root font size in browsers. If your site sets a different root size, adjust the output to match.
Yes. Enter the smallest and largest spacing in pixels and the viewport range, then paste the clamp expression into any length property.
Convert your range to pixels first. Viewport widths are read as pixels, and the size values are also pixels.
That is the purpose of the last clamp argument. Once the calculated value reaches the maximum, it stays fixed no matter how wide the viewport becomes.
Reference: MDN Web Docs