How to Use This Tool
clamp() takes three values: a floor, a preferred value, and a ceiling. Give it a size for
your smallest viewport and a size for your largest, and it scales smoothly between them — replacing a
stack of media queries with one line that never jumps.
The arithmetic
The preferred value is the straight line through your two points. The slope is
(maxSize − minSize) ÷ (maxViewport − minViewport), expressed in
vw by multiplying by 100. The intercept is what is left over at the minimum viewport, expressed
in rem. For 18px at 320px growing to 32px at 1280px, the slope is 14 ÷ 960 = 1.4583vw
and the intercept works out at 0.8333rem.
The accessibility problem almost every generator has
It is tempting to write the preferred value as pure vw, because the numbers are tidier. Do
not. Viewport units do not respond to browser zoom or to a user's default font size. A
heading sized entirely in vw stays exactly the same physical size when someone zooms to 200%,
which is a failure of WCAG success criterion 1.4.4 (Resize Text).
The fix is the rem term in the preferred value. Because rem is relative to the
root font size, the whole expression scales when the user changes their settings, while the
vw part still does the fluid work. Keep the zoom-safe box ticked and the calculator
always produces both terms. Untick it and you get the tidier version, plus a warning, because sometimes you
genuinely do want a decorative element pinned to the viewport.
Reading the chart
The chart plots the computed size at every viewport width. It is flat below your minimum, a straight diagonal through the middle, and flat again above your maximum. If the diagonal looks too steep, your two sizes are too far apart for the viewport range — text will change noticeably as someone resizes a window, which reads as instability rather than responsiveness.
It is not only for type
The same expression works for padding, gaps, border radii and container widths. Fluid spacing is arguably a bigger win than fluid type, because the alternative is redefining every gap at three breakpoints. Switch the values to your spacing scale and the output is identical in form.
Two practical cautions
Do not clamp everything. A page where every size is fluid has no rhythm, because nothing lines up with anything else at intermediate widths. Pick a few roles — body, one or two heading levels, section spacing — and leave the rest on a fixed scale.
And check the minimum against real content. A 320px viewport with a long unbroken word will still overflow no matter how small the clamp floor is; that is a wrapping problem, not a sizing one.
