The free CSS clamp() & fluid typography calculator

This fluid typography calculator turns two font sizes and two viewport widths into a single, responsive font-size: clamp() declaration that scales text smoothly between phones and large desktops — no media queries required. Set your minimum and maximum size, choose where the scaling starts and stops, watch the interactive graph and live preview update instantly, then copy production-ready CSS, CSS custom properties or Tailwind. You can even generate an entire fluid modular type scale in one click. Free, no sign-up, no watermark.

What is fluid typography?

Fluid typography is type that scales continuously with the size of the screen instead of jumping at fixed breakpoints. Rather than declaring font-size: 16px on mobile and font-size: 24px on desktop via media queries, fluid type interpolates every size in between, so your headings and body copy always feel proportional to the viewport. The modern way to do this is a single line of CSS using clamp() with a vw-based preferred value.

How does CSS clamp() work?

The clamp() function takes three arguments — clamp(MIN, PREFERRED, MAX) — and returns the preferred value, but never lets it drop below the minimum or rise above the maximum. For fluid type, the minimum is your small-screen size, the maximum is your large-screen size, and the preferred value is a calc() expression mixing rem and vw so the size grows linearly with the viewport. Below the min viewport the text stays flat at the minimum; above the max viewport it stays flat at the maximum; in between it scales — exactly the three segments you see plotted on the graph above.

The fluid typography formula explained

Given a minimum font size, a maximum font size and the two viewport widths between which scaling should happen, the calculator works out the line that connects the two “knee” points:

1. Slope = (maxFont − minFont) ÷ (maxViewport − minViewport).
2. Y-axis intersection = −minViewport × slope + minFont (the value the line would hit at a 0px viewport).
3. Preferred = (yAxisIntersection)rem + (slope × 100)vw.
4. Result = clamp(minRem, preferred, maxRem).

For the defaults (16px → 24px between 320px and 1280px viewports) that produces font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). The rem part anchors the size to the user's root font size and the vw part adds the responsive growth.

Why use rem and vw together

Using vw alone for font-size is an accessibility trap: it ignores the user's browser zoom and root font-size preferences, so text can't be resized. Pairing a rem term with the vw term keeps the type responsive and respects user settings, because the rem portion still scales when someone increases their base font size. That's why this generator always outputs a rem + vw preferred value and offers a rem-based clamp() by default, with a px option when you need it.

Features of this fluid type generator

• Interactive graph — drag to scrub the viewport and watch the clamped curve, knee points and live font-size readout.
• Live preview — real heading and paragraph text rendered at the computed size for any simulated viewport width.
• Type scale mode — generate fluid clamp() values for a whole modular scale as --step-* custom properties.
• rem or px output — accessible rem by default, with a configurable root font size for conversion.
• One-click presets — Body, H1, Hero and Caption pairs to start from.
• Export anywhere — copy as CSS, :root custom properties or Tailwind arbitrary values.

Browser support for clamp()

CSS clamp(), min() and max() are supported in every modern browser — Chrome, Edge, Firefox and Safari — and have been for years, so you can ship fluid typography to production with confidence. For very old browsers you can wrap a fixed fallback in an @supports (font-size: clamp(1rem, 1vw, 2rem)) query, but in practice a plain fixed font-size before the clamped one is enough as a graceful fallback.

CSS clamp() & fluid typography — frequently asked questions