🔡 CSS clamp() Fluid Typography Generator
Set a min and max font size and the viewport range they map to, and get a copy-ready CSS clamp() that scales type smoothly between them — with a live preview at any screen width.
font-size: clamp(1rem, 1.6667vw + 0.6667rem, 2rem);The quick brown fox
Renders at 23.5px
clamp(min, preferred, max) grows the font smoothly with the viewport, then locks at the limits. The preferred value uses vw so it scales, plus a rem offset so it still respects the user's zoom. 🔒 Runs in your browser.
How the css clamp() fluid typography generator works
clamp(MIN, PREFERRED, MAX) returns the preferred value but never below MIN or above MAX. For fluid type, the preferred value is a straight line between your two (viewport, font-size) points, written as a vw term plus a rem offset. The tool solves that line — slope and intercept — from your inputs and formats the result, so the font grows with the screen and then locks at each end.
Including a rem in the preferred value (not just vw) matters for accessibility: a pure-vw font ignores the user's browser zoom, while the rem part keeps it responsive to their text-size setting. The maths is exact linear interpolation, so the output is deterministic. Pair this with the px-to-rem, type-scale and line-height tools for a complete CSS typography setup.
Frequently asked questions
What does CSS clamp() do for font size?
It sets a fluid size that scales with the viewport between a minimum and maximum. Below your min viewport it stays at the min size; above your max viewport it stays at the max; in between it interpolates smoothly — no media queries needed.
Why does the clamp value include both vw and rem?
The vw part makes the font scale with screen width; the rem part is an offset that also keeps the size responsive to the user's zoom / default text size. A vw-only value would break that accessibility behaviour.
How is the middle (preferred) value calculated?
It's the equation of the line through your two points (min viewport, min size) and (max viewport, max size). The slope becomes the vw coefficient and the intercept becomes the rem offset.
Do I still need media queries?
Usually not for the font size itself — clamp() handles the smooth scaling. You might still use queries for layout changes, but the type resizes on its own.