CSS Clamp Calculator Online

Start by choosing the font size that fits your narrow layout and the size that fits the wide layout. The example grows from 16 pixels at a 320-pixel viewport to 32 pixels at 1280 pixels. Select Calculate and paste the result into a font-size property. Sizes below the first viewport stay at the minimum; sizes above the second stay at the maximum.

The calculator divides the size difference by the viewport-width difference to obtain a slope, then finds the intercept that reaches the first endpoint. The middle expression combines that intercept with a vw term. CSS clamp chooses the preferred value while enforcing the lower and upper bounds. The generated numbers are rounded to six decimal places, so tiny rounding differences are possible at exact endpoints.

All inputs are in pixels. For rem output, the calculator converts the bounds and intercept using the supplied root font size, which defaults to 16 pixels. The vw coefficient is unchanged. If the actual page root size differs, the resulting sizes and transition points will differ from the original pixel example. Keep the root-size assumption visible in your design notes and test the page’s real styles.

A fluid formula is only one part of readable typography. Check browser zoom, long headings, translated content and user font settings on the finished component. Combining rem and vw does not by itself prove accessibility. This calculator supports increasing or constant sizes from 1 to 200 pixels; the maximum viewport must exceed the minimum. It does not generate a whole type scale or media-query fallback.