Generate a Fluid Font Size with CSS clamp()

Most body text wants a small range — readable at 16px on a phone, a touch larger on desktop. A 16→18 range over 320→1440 gives a slope of just 0.179vw, so the size never feels like it is leaping around.

Inputs: Min 16px · Max 18px · Min vw 320 · Max vw 1440

Output:
font-size: clamp(1.000rem, 0.964rem + 0.179vw, 1.125rem);

Apply:
p { font-size: clamp(1.000rem, 0.964rem + 0.179vw, 1.125rem); }

A mid-range heading (24px → 36px) over the default viewport range scales noticeably without being dramatic — a good fit for h2 / section titles.

Inputs: Min 24px · Max 36px · Min vw 320 · Max vw 1440

Output:
font-size: clamp(1.500rem, 1.286rem + 1.071vw, 2.250rem);

Apply:
h2 { font-size: clamp(1.500rem, 1.286rem + 1.071vw, 2.250rem); }

Brand-impact headlines push the range hard: 40px on a small phone, 96px on a wide desktop. The 5.000vw slope means the text grows fast — clamp() pins it at 6.000rem so it does not keep ballooning past 1440px.

Inputs: Min 40px · Max 96px · Min vw 320 · Max vw 1440

Output:
font-size: clamp(2.500rem, 1.500rem + 5.000vw, 6.000rem);

Apply:
h1 { font-size: clamp(2.500rem, 1.500rem + 5.000vw, 6.000rem); }

The output block includes a :root custom property, so you do not need a separate variable tool for a single size. Reference --font-size-fluid wherever you need the same fluid value.

/* From the generator output, verbatim */
:root {
  --font-size-fluid: clamp(1.000rem, 0.857rem + 0.714vw, 1.500rem);
}

.lead, .intro {
  font-size: var(--font-size-fluid);
}

If your app's max useful width is 1280, not 1440, set Max vw to 1280. The size hits its ceiling sooner and the slope is steeper to compensate over the shorter range.

Inputs: Min 16px · Max 24px · Min vw 320 · Max vw 1280

Output:
font-size: clamp(1.000rem, 0.833rem + 0.833vw, 1.500rem);

Note the slope rose from 0.714vw (1440 range) to 0.833vw (1280 range)
because the same 8px climb now happens over fewer pixels of width.

If Max vw is less than or equal to Min vw, buildClampScale throws Max viewport must be greater than min viewport. and the result panel shows it in red. This is the only validation in the tool — every other combination produces output. The step on Min vw is 10 and on Max vw is 40, and their ranges overlap (200–1000 vs 800–2400), so it is possible to type a Max vw at or below the Min vw and trigger this.

The tool does not stop you setting Max px below Min px. With Min 24, Max 16 it emits clamp(1.500rem, 1.643rem - 0.714vw, 1.000rem) — a valid expression with a negative vw slope, meaning the text shrinks as the viewport grows. That is almost never what you want for typography, but it is mathematically correct for the numbers given. Check that Max px is larger than Min px before using the output.

Set both sizes to 18 and you get clamp(1.125rem, 1.125rem + 0.000vw, 1.125rem). The slope is zero, so the font never changes size. It is a verbose way to write font-size: 1.125rem, but harmless — clamp() with identical bounds just returns that value at every viewport.

There is no field to change the root size — buildClampScale always calls buildClampExpression(..., 16). So Min px is divided by 16 to get the rem floor regardless of what your page's actual root size is. If your html element runs at 18px or 20px, the rem values still assume 16, and the visual sizes will differ from the px you typed. The generator is computing CSS rem values, not absolute pixels for your specific root.

Every number passes through .toFixed(3), so you always see exactly three decimals: 1.000rem, 0.714vw. This keeps the string short and avoids floating-point tails like 0.7142857142857143. The tiny rounding (sub-thousandth of a rem or vw) is invisible at any real screen size.

clamp() interpolates only between the two viewport widths. At a 280px viewport (below a 320 Min vw) the preferred term would compute below the floor, so the browser uses the Min rem value. At a 1920px viewport (above a 1440 Max vw) it uses the Max rem value. This is the intended behaviour and why the bounds exist — the slope never runs away at extreme widths.

Max px goes up to 120 and Min vw can be as low as 200. A 16→120px range over 200→800 yields a very steep vw slope. The expression is valid and clamp() still pins it at the ceiling past 800px, but on intermediate widths the text grows fast. Preview at a few in-between widths (480, 600) before shipping aggressive ranges.

This tool has needsFile: false and shows no upload zone. It cannot measure a font's metrics or scale relative to a specific typeface — it only does the clamp() arithmetic from the four numbers you enter. If you need sizes derived from a font's actual x-height or cap-height, analyse the file first with the font-metrics-analyzer, then bring the numbers here.

The result panel shows the CSS text and three metric chips, not a resizing preview of the font at different viewports. To eyeball the interpolation, paste the output into your own page or a browser devtools sandbox and drag the window. The tool's job is to compute the correct expression, not to render it.