Fluid Typography clamp() Calculator
Set a minimum and maximum font size and the viewport widths between which it should scale — get a copy-ready CSS clamp() value instantly.
clamp() Calculator
All sizes in pixels — output converts to rem.
Size stops shrinking below this width.
Size stops growing above this width.
Browser default is 16px.
Works for spacing too, e.g. padding.
Your clamp() value
Live preview
Size across viewports
Flat below the min viewport, linear between, flat above the max. The dot follows the slider.
Fluid Type Scale
A full set of clamp() sizes from one base and two ratios, using the viewports above.
| Step | Min | Max | clamp() | Preview |
|---|
CSS custom properties
How clamp() Works
The maths behind the calculator, and tips for using fluid sizes well.
The Syntax
clamp(MIN, PREFERRED, MAX)The browser uses the preferred value, but never goes below MIN or above MAX. Supported in every modern browser.
The Slope
(maxSize − minSize) / (maxVw − minVw)How many pixels the font grows per pixel of viewport. Multiply by 100 to get the vw coefficient.
The Intercept
minSize − slope × minVwThe rem part of the preferred value, so the line passes exactly through your min size at the min viewport.
Why rem + vw
1rem + 0.75vwPure vw ignores the user's browser font setting and zoom. Mixing in rem keeps text responsive to both.
Zoom & WCAG 1.4.4
max ≤ 2.5 × minText must reach 200% when zoomed. Keep the max size within about 2.5× the min, or zoom may not scale it enough.
Type Scales
base × ratiostepUse a smaller ratio on mobile (e.g. 1.2) and a larger one on desktop (e.g. 1.25) so headings grow faster than body text.
Not Just Fonts
padding · gap · marginChange the CSS property to generate fluid spacing that scales with the same viewport range.
Shrinking Values
min > max is fineIf the size at the min viewport is larger, the value shrinks as the screen widens. The calculator orders the bounds for you.
Why FluidType?
FluidType is a fast, lightweight calculator for web designers and front-end developers who want type that scales smoothly between phone and desktop — without a stack of media queries.
All processing happens entirely in your browser. Nothing leaves your device.