Fluid Clamp Calculator

Turns a min size, a max size, and the two viewport widths they belong to into a CSS clamp() expression that scales smoothly between them. It shows the slope and intercept the expression is built from, previews the rendered size at 320, 375, 768, 1024, 1440, and 1920 pixels wide, and flags whether the result survives browser text zoom. A batch mode multiplies the base size by a ratio to emit a whole type scale as custom properties, with separate ratios for the small and large viewport so headings can grow faster than body copy.

Set the four numbers, either in the option fields or as a single quick entry line like 16px 24px 320px 1280px. Pick rem or px output, then copy the clamp() value, the custom property, or the whole font-size declaration. Switch the mode to the full type scale when you want a set of sizes rather than one, and change the two ratios to control how quickly the scale grows at each end.

Most clamp calculators hand back one expression and stop. This one shows the arithmetic, previews the rendered size at real device widths so you can see where the value bottoms out, and checks the rem term against WCAG 1.4.4 so a size that ignores browser text zoom does not slip through. It runs entirely in the page, so your files and inputs never leave your device.

Why does my clamp() ignore browser zoom?

A preferred value built only from vw units tracks the viewport and nothing else, so raising the browser text size changes nothing. WCAG 1.4.4 asks that text stay usable at a 200 percent resize, which means the preferred value needs a rem term with a positive coefficient. This tool always writes the intercept as a rem length by default and tells you when that term has come out zero or negative, which happens when the size range is steep relative to the viewport range.

What min and max viewport should I use?

320px is the narrowest phone still worth designing for, and somewhere between 1280px and 1440px is where most layouts stop growing. Using your own container max width as the upper bound is usually better than the viewport, because past that point the text column stops widening and larger type stops helping. Whatever you pick, remember the size is frozen outside that range: the preview table marks those rows as clamped.

How is the type scale mode different from a modular scale generator?

A modular scale gives you one number per step. This gives you two, one for each end of the viewport range, and joins them with clamp(), so every step is fluid rather than fixed. Setting a larger ratio at the max viewport than at the min is the usual choice: it keeps headings close to body size on a phone, where a 1.618 scale would overflow, and lets them open up on a desktop.