Size across viewport width
The quick brown fox
How fluid clamp() works
clamp(MIN, PREFERRED, MAX) picks the preferred value but never lets it go
below MIN or above MAX. For fluid sizing the preferred value is a straight line that depends on
the viewport width, so the size grows smoothly between your two breakpoints and then holds flat
outside them. This tool solves that line for you: it finds the slope and intercept that pass
through your min size at the min viewport and your max size at the max viewport.
Why the rem term matters
The preferred value is written as Nrem + Mvw, not pure vw. That is
deliberate. A value like clamp(1rem, 5vw, 2rem) with no rem part stops
responding when a user bumps their browser's default font size, which can fail
WCAG 1.4.4 (Resize text). Keeping a rem component means the text
still scales with the user's preference. That is why the output defaults to rem;
use px only when you have a specific reason.
Not just for type
The same value works for any length: padding, gap,
margin, section spacing, even border-radius. Generate it once and paste
it wherever you want a value that scales with the viewport.