Fluid Typography Calculator
NewGenerate a CSS clamp() font-size that scales linearly between a minimum and maximum size across a viewport width range.
Resize your browser to see this text scale fluidly.
Uses the standard linear-interpolation formula for fluid type: slope = (maxSize − minSize) ÷ (maxViewport − minViewport), then the preferred value is expressed as yIntercept + slope × 100vw, wrapped in clamp(min, preferred, max) so the size never goes below your minimum or above your maximum regardless of viewport width. This is the same math behind popular fluid-type tools like Utopia.
Frequently Asked Questions
How does clamp() achieve "fluid" scaling instead of jumping between fixed sizes at breakpoints?
clamp(min, preferred, max) picks the preferred value as long as it falls between min and max, and clamps to the boundary otherwise. By making the preferred value a linear function of the viewport width (using vw units), the font size changes continuously and smoothly as the viewport resizes, instead of jumping abruptly at specific breakpoint widths the way traditional media queries do.
What's the formula behind the generated preferred value?
It's standard linear interpolation: slope = (maxSize − minSize) ÷ (maxViewport − minViewport), then yIntercept = minSize − slope × minViewport. The preferred CSS value becomes yIntercept (in rem) plus slope×100 expressed in vw units — this is the same linear-interpolation math used by well-known fluid-type generators like Utopia.
Why does the preview text's size not change when I resize a narrow tool panel?
The vw unit in the generated clamp() is relative to the full browser viewport width, not the width of the tool's preview box — so to see the live effect, resize your actual browser window rather than just the panel, or copy the CSS into your own page and resize that.
Will the font size ever go below my minimum or above my maximum?
No — that's the entire purpose of wrapping the interpolated value in clamp(min, ..., max): outside the min/max viewport range, the size is hard-clamped to the boundary value, so extremely small or extremely large viewports never produce an unreadably tiny or absurdly huge font.
Can I use this same approach for spacing or other properties besides font-size?
Yes — the exact same clamp()-based linear interpolation technique works for any numeric CSS property (padding, margin, gap, border-radius); just apply the generated clamp() value to whichever property you want to scale fluidly.