CSS clamp() Generator (Fluid Typography)

Generate a fluid CSS clamp() value that scales font sizes or spacing smoothly between two screen widths.

How does CSS clamp() work for font sizes?

clamp(MIN, PREFERRED, MAX) returns the preferred value but never less than MIN or more than MAX. For fluid type the preferred value is a rem + vw mix, so the size grows in a straight line from the minimum at a small screen width to the maximum at a large one.

The formula

slope = (max size − min size) ÷ (max viewport − min viewport). The preferred value is (min size − slope × min viewport) + slope × 100vw, converted to rem with your root font size.

Example

16 px at 320 px wide growing to 24 px at 1280 px gives clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). The table in the result shows the exact size at phone, tablet and desktop widths.

Works for any length property — padding, gap, margin — not just font size.

Frequently asked questions

Why mix rem and vw?

A pure vw value ignores the user’s browser zoom and font settings; adding rem keeps text accessible (WCAG 1.4.4).

Is clamp() supported?

Yes, in all browsers released since 2020.

Can the size shrink on larger screens?

Yes — enter a larger minimum than maximum and the slope becomes negative.