Design

Font Size Clamp Generator

Free clamp() generator for fluid typography. Enter minimum and maximum font sizes plus a viewport range and get copy-ready CSS that scales text smoothly between breakpoints.

YOUR WORKSPACEFree to use. No sign-up.

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

Root size (px)

—

Set min/max sizes and viewport range, then press Generate clamp().

Preview viewport width (px)

Aa — fluid type preview

Deep dive guides

A LITTLE CONTEXT · 4 MIN READFluid Typography: How clamp() Scales Type Smoothly

All 2 related guides

CSS Transitions Explained: Timing, Easing and Delay — How the transition shorthand works: properties, duration, timing functions from ease to steps, and why transitions need a state change to fire.
Fluid Typography: How clamp() Scales Type Smoothly — The algebra behind font-size: clamp() — slope, intercept, why rem + vw beats pixels, and how to choose viewport anchors.

How font size clamp generator works

clamp() lets a CSS value move inside a bounded range as the viewport grows. For fluid typography you write font-size: clamp(1rem, 0.571rem + 1.905vw, 2rem); and the browser solves a tiny piece of algebra every frame: below 360px wide the size is pinned at the minimum, above 1200px it is pinned at the maximum, and in between it interpolates linearly. One declaration replaces the media-query ladder people used to write for every breakpoint.

The generator does that algebra for you. Give it the smallest size you want (with the viewport width where it should apply), the largest size (and its viewport), and your root font size — usually 16px. It fits a straight line through those two points and rewrites the slope in viewport units (vw) and the intercept in rem, producing the clamp() expression directly. The result scales with the user's browser zoom too, because everything is expressed in rem and vw rather than fixed pixels.

The output includes a sample table showing the computed size at common viewport widths, marking where the clamp is pinned versus interpolating, plus a live preview you can resize to watch the type scale. The classic starting recipe — 16px at 360px growing to 32px at 1200px — is the default; adjust the numbers and the CSS updates instantly.

Frequently asked questions

What does clamp(min, preferred, max) mean?

The browser evaluates the preferred value and clamps it between the minimum and maximum. clamp(1rem, 0.571rem + 1.905vw, 2rem) resolves to 1rem on narrow screens, grows linearly in between, and never exceeds 2rem — mathematically the same as max(min, min(max, preferred)).

Why express the formula in rem and vw instead of pixels?

Accessibility and zoom. The rem part respects the user's default font size, and the vw part scales with the window, so the whole expression grows when users zoom the page. A pixel-only formula ignores user preferences, which is an accessibility failure.

What viewport range should I use?

Use the range over which you want the scaling to happen — commonly 360px (small phones) to 1200px or 1440px (large desktop). Below the low end the size pins at the minimum; above the high end it pins at the maximum, so the endpoints you choose are where growth stops.

Does clamp() work for other properties?

Yes — clamp() is a general function: spacing (padding, gaps), line lengths (max-width in ch units) and grid tracks all accept it. This generator focuses on font-size, the most common use, but the same formula transfers to any fluid value.

Why is my heading not exactly the minimum size on a small phone?

Check the root font size: the formula is computed in rem, so if the user's root size is not 16px the pixel result differs. The generator lets you set the root size; the sample table shows the actual pixel outcome at each viewport for your chosen root.

Font Size Clamp Generator

Deep dive guides

How font size clamp generator works

Frequently asked questions

Related tools

CSS Transition Generator

CSS Filter Generator

CSS Clip Path Generator