CSS Clamp() Generator

Generate fluid clamp() values for responsive typography in seconds. Set your minimum and maximum sizes, watch the live preview scale, and copy CSS that resizes smoothly across every screen, with no media queries required. Everything runs in your browser.

What is CSS clamp()?

clamp() is a CSS function that takes three values: a minimum, a preferred, and a maximum. The browser uses the preferred value, but never lets it go below the minimum or above the maximum.

font-size: clamp( 1rem, 1.5vw + 0.75rem, 2rem );

That single line replaces a stack of media queries. The font scales smoothly with the viewport width, but it’s locked between 1rem on small screens and 2rem on large ones. No breakpoints. No jumps. Just fluid scaling.

Before clamp(), responsive typography meant writing media query after media query, manually stepping the font size at each breakpoint. clamp() makes that obsolete for most cases.

How the fluid value works

The magic is in the middle value, the preferred size. It’s a linear equation:

preferred = slope * 100vw + intercept

The vw unit is 1% of the viewport width. By calculating the right slope and intercept, you get a value that equals your minimum size at your minimum viewport, and your maximum size at your maximum viewport, scaling linearly in between.

You don’t need to do this math by hand, that’s what the generator above is for. But understanding it helps you tune the result. A steeper slope means faster scaling. Wider viewport bounds mean gentler scaling across a larger range.

How to use the generator

1. Set your min font size, the smallest the text should ever be (on mobile).
2. Set your max font size, the largest it should ever be (on wide screens).
3. Set your min and max viewport, the screen widths where those sizes apply. 320px to 1280px covers most cases.
4. Watch the live preview scale as you drag the viewport slider.
5. Copy the CSS property and paste it straight into your stylesheet.

Use the preset buttons to quickly build a full type scale, Body and H1 through H4, each with sensible fluid ranges.

Fluid typography best practices

Don’t scale too aggressively

A common mistake is setting a huge gap between min and max, like 16px to 80px. On mid-range screens the text can look awkward. Keep your ratios reasonable. A max that’s 1.5x to 2x your min is usually plenty for body text; headings can go higher.

Always set sensible bounds

The whole point of clamp() is the min and max. Without them you’d just use vw and the text would become unreadably small on phones or comically large on 4K monitors. The bounds are your safety net, respect them.

Use rem, not px, for accessibility

The generator outputs rem-based values for a reason. When your clamp() min and max are in rem, they respect the user’s browser font size setting. A user who has increased their default font size for readability still gets a scaled-up experience. Px values ignore that preference entirely. This is an accessibility win that costs you nothing.

Pair it with a modular scale

For a cohesive design, don’t pick font sizes at random. Use a consistent ratio between your heading levels; 1.25 (major third) and 1.333 (perfect fourth) are popular. The preset buttons in the generator follow a sensible scale you can use as a starting point.

Browser support

clamp() is supported in every modern browser. Chrome, Firefox, Safari, and Edge have all supported it since 2020. Unless you need to support Internet Explorer (you almost certainly don’t in 2026), you can use clamp() freely in production.

For the rare case where you need a fallback, declare a static font-size before the clamp() line. Browsers that don’t understand clamp() use the static value; browsers that do override it.

font-size: 1.25rem; /* fallback */
font-size: clamp( 1rem, 1.5vw + 0.75rem, 2rem );

Beyond font size

clamp() isn’t just for typography. Any CSS property that takes a length works: padding, margin, width, gap, border-radius. Fluid spacing that scales with the viewport is a powerful layout technique.

.section {
    padding-block: clamp( 2rem, 5vw, 6rem );
}

The generator’s output works for any of these, just swap font-size for whatever property you need. Need to convert your px values to rem first? The CSS REM Calculator handles that.