CSS Clamp Generator
Note: Browser zoom scales vw perfectly well — it scales the CSS pixel itself. What a pure vw value ignores is the reader's font-size setting, since the viewport has not changed. The rem component is the part that responds to it.
The middle value is where the work is. It is a linear equation in disguise — a rem base plus a vw multiplier — derived from the two size and two viewport pairs you want to hit. Solve it and the type is exactly your minimum at the small width, exactly your maximum at the large one, and interpolates between. The generator does that arithmetic, which is the entire reason to use a tool for this rather than guessing at 2vw.
The part almost every clamp generator gets wrong is the accessibility one, and it is worth being precise about which failure it is. Browser zoom is fine — zooming scales the CSS pixel itself, so a vw value grows with it. What a pure vw value ignores is the reader's font-size preference: someone who has set their browser to 24px because 16 is uncomfortable gets no change at all from text sized in vw, because the viewport has not changed. Including a rem component is what lets that setting through, and the larger the rem share, the more of it survives. The generator reports how much your value actually grows when the root size is raised, so the trade is visible rather than assumed.
One practical note: clamp works for anything taking a length, not just font-size. Fluid section padding and fluid gaps are often more valuable than fluid type, because they are what actually collapses awkwardly on a narrow screen.
Frequently Asked Questions
Why does my clamp value include a rem part?
Because a preferred value made only of vw ignores the reader's font-size setting entirely — the viewport has not changed, so neither has the text. The rem component is the part that responds to it. Browser zoom is a separate mechanism and works either way, which is why this is often missed.
What viewport widths should I use?
Around 320px to 1280px covers the range where scaling actually matters. Starting below 320 wastes half the curve on widths nobody uses; ending above about 1600 means the type keeps growing on a monitor where it was already large enough.
Can I use clamp for things other than font size?
Yes — anything that takes a length. Fluid section padding and fluid grid gaps are often more useful than fluid type, since those are what collapse most awkwardly on a narrow screen. Width, margin and border-radius all work too.
Do I still need media queries?
For sizes, rarely. For layout changes, yes — clamp interpolates a number and cannot turn a three-column grid into one column. The two solve different problems and work well together.
Why is my text not hitting the maximum?
Usually because the maximum viewport width in your calculation is larger than the container the text actually sits in. vw measures the viewport, not the parent, so text inside a 800px content column inside a 1600px window scales against the 1600.
