ClampCalc
Build a clamp

One font-size, no breakpoint jumps

Generate a responsive font-size declaration

Turn mobile and desktop font sizes into one bounded linear declaration. The calculator shows the exact slope and the copied formula's endpoint deltas.

Worked CSS formula

How this responsive font-size clamp is calculated

font-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

For 16px at 320px and 20px at 1200px, the slope is (20 − 16) ÷ (1200 − 320) = 0.004545px per viewport pixel. Multiply by 100 for 0.454545vw; the intercept is 16 − (0.004545 × 320) = 14.545455px, or 0.909091rem at a 16px root.

Endpoint check: 14.545455px + 0.454545vw equals 16px at 320px and 20px at 1200px before serialization rounding.

clamp(minimum, preferred, maximum) holds the value at 1rem below the small endpoint and 1.25rem above the large endpoint. Review the generated rounding deltas, text zoom, content and layout before using it.

Local CSS calculation

Viewport and value endpoints

Values stay on this device
Viewport widths
px
px
Desired values at those widths
px
px
px
Output units

Ascending linear scales only. Use the copied token only after reviewing real content, zoom, root settings and layout.

Rounded CSS evidence

Generated clamp

rem · 6
Raw clamp valueclamp(1rem, 0.909091rem + 0.454545vw, 1.25rem)
Font-size declarationfont-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);
Custom property--fluid-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

Preview the copied coefficients

17.999998px

Fluid design should stay readable at every width.

Formula evidence

Exact slope
0.0045454545 px/px
Exact intercept
14.54545455px
Copied CSS at small endpoint
16px · Δ 0px
Copied CSS at large endpoint
19.999996px · Δ -0.000004px

Endpoint deltas compare your requested px values with the rounded serialized formula. ClampCalc does not choose suitable design values or prove accessibility.