Fluid Typography Generator

What CSS clamp() does for typography

clamp() takes three values — a minimum, a preferred value, and a maximum — and lets the browser pick whichever is appropriate: the preferred value if it falls between the minimum and maximum, or whichever bound it would otherwise cross. Applied to font-size, that means a single CSS declaration can shrink text down to a comfortable minimum on small screens, scale it up smoothly as the viewport grows, and cap it at a maximum so a headline doesn't become absurdly large on an ultrawide monitor — all without writing a single media query.

The 'smoothly' part is what separates this from a handful of fixed breakpoints. A traditional responsive approach jumps the font size from 18px to 24px the instant the viewport crosses 768px, which can look like a visible snap if you're resizing a window slowly. A fluid clamp() value interpolates continuously between the minimum and maximum viewport widths you set, so the text grows in tiny, imperceptible increments the whole way through.

How the math behind this generator works

The 'preferred value' in a clamp() rule needs to be a linear function of the viewport width — something like 1rem + 2.5vw — and this generator derives that function from the four numbers you provide. It calculates the slope between your minimum and maximum font size across your minimum and maximum viewport width, then works out the y-intercept so the resulting line passes through both target points exactly. The output splits that line into a fixed rem portion and a scaling vw portion, which is the standard technique behind every fluid-type generator, including the well-known Utopia calculator that popularized this approach for CSS.

Below the minimum viewport width, the font size holds steady at your minimum; above the maximum, it holds steady at your maximum. In between, it follows that calculated line exactly — which is why the two target sizes you enter are guaranteed to be hit precisely at those two viewport widths, not just approximated.

Why the constant part is expressed in rem, not vw

A pure vw-based font size — something like font-size: 4vw — has a real accessibility problem: it ignores the user's browser font-size setting and zoom level, since vw is defined purely relative to viewport width. Someone who has increased their default text size for readability would see no benefit at all from that setting on a vw-only element. Mixing in a rem component, as this generator does, keeps the value partly anchored to the user's actual font preferences — increasing the browser's base font size shifts the whole clamp() range up proportionally, rather than being silently ignored. This is a small implementation detail that matters a lot in practice, and it's easy to get wrong by hand.

Common use cases

Designers and developers building a marketing site or landing page use fluid clamp() values for hero headlines and large display type, where a fixed size looks cramped on mobile and disproportionate on desktop. Design systems use it to define a type scale that adapts continuously across a product's breakpoints instead of maintaining a separate font-size override for every named breakpoint. It's also useful beyond typography — the same clamp() technique applies to spacing, padding, and element widths, anywhere a value should scale smoothly with the viewport rather than jump at fixed points.

Reading the live preview

The preview slider represents a simulated viewport width and recomputes the exact same clamp math this tool uses to generate the CSS rule, so what you see is a direct, accurate reflection of how the text will render at that width — not an approximation. It's the fastest way to sanity-check that your chosen minimum and maximum sizes actually feel right before committing to them, since numbers on their own (like '16px at 320px, 24px at 1240px') can be hard to judge without seeing the text itself. Keep in mind the slider simulates a viewport width for preview purposes only; to see the rule respond to your actual browser window, drop the generated clamp() value into your CSS and resize the real window.