Color tools

CSS Clamp Generator (Fluid Typography)

Type-scale that grows with the viewport. Pick min and max font sizes, pick min and max screen widths — get a copy-paste clamp() rule with a live preview slider.

Output unit

rem px

Root font (px)

Min font (px)

Max font (px)

Min viewport (px)

Max viewport (px)

Output

Preview viewport: 800px → Computed font: 18.0px

The quick brown fox jumps over the lazy dog

Batch type-scale (comma-separated px sizes)

Batch type-scale (CSS custom properties)

What is fluid typography?

Fluid typography is a CSS technique where text scales smoothly between a minimum and maximum size as the viewport width changes — instead of jumping at media-query breakpoints. Modern browsers support this natively through clamp(MIN, FORMULA, MAX), which evaluates the formula and clamps the result between the floor and ceiling. The formula is typically a mix of a fixed offset and a viewport-relative term (vw), so the value follows the screen width within the defined range.

How to use this generator

Pick the min and max font size you want for the smallest and largest screen widths. Then pick the viewport range — typically a phone-width minimum (320–375 px) and a desktop-width maximum (1200–1440 px). The output box shows the exact clamp() declaration you can paste into your CSS. Drag the preview slider to see what the rule produces at any width without resizing your browser. For a full type scale (h1, h2, h3, body, small), drop comma-separated px values into the batch box and get a set of CSS custom properties at once.

The math behind clamp()

Given (minVw, minFont) and (maxVw, maxFont) as two points, the linear function passing through both is font = slope · vw + intercept where slope = (maxFont − minFont) / (maxVw − minVw) and intercept = minFont − slope · minVw. Translating slope into vw units multiplies it by 100, and the intercept is converted to rem by dividing by your root font size (so accessibility zoom still works). The middle term of the clamp() is then {intercept}rem + {slope*100}vw.

Frequently asked questions

Why use rem instead of px in the output?

Browsers scale rem values when the user changes their default font size in browser settings, but they don't scale absolute px values. Using rem in the floor, ceiling, and intercept of clamp() preserves user accessibility preferences and respects WCAG 1.4.4 Resize Text. The vw term doesn't need converting — it's already viewport-relative.

What viewport range should I use?

A common choice is 320 px (small phone) to 1280 px (typical laptop). If you support ultra-wide displays, raise the upper end to 1920 px so text doesn't keep growing past your design intent. If your minimum supported device is a tablet, raise the lower end to 600 px. The narrower the range, the steeper the slope, so the font grows faster within it.

Does clamp() work everywhere?

Yes — clamp(), min(), and max() have been supported in every major browser since early 2020 (Chrome 79, Safari 13.4, Firefox 75). For pre-2020 browsers, you'd fall back to a regular font-size declaration outside the rule, which gets overridden everywhere modern.

Can I use clamp() for things other than font-size?

Absolutely. Padding, gap, margin, width, border-radius — anything that takes a length value works the same way. Fluid spacing is one of the highest-leverage uses: a hero section padded with clamp(2rem, 5vw, 6rem) feels appropriate from phone to ultrawide without a single media query.

How do I build a full type scale?

Define a base size (16 px) and a ratio (1.25 minor third, 1.333 perfect fourth, 1.618 golden) — multiply repeatedly to get a sequence (16 → 20 → 25 → 31 → 39 → 49 → 61). Paste those into the batch box and the tool emits one fluid clamp() per step as a CSS custom property, ready to drop into :root.

What is the slope-intercept warning some tools show?

Some generators warn when the vw coefficient exceeds a threshold like 5 vw, because at that slope a tiny zoom or a wide screen makes text leap unexpectedly. This generator doesn't enforce a limit — but if your output looks like clamp(1rem, 0.5rem + 8vw, 5rem), consider widening the viewport range so the slope drops below 4–5 vw.

CSS Clamp Generator (Fluid Typography)