CSS clamp() calculator

Generate a clamp() that scales text smoothly from small screens to large.

What clamp() does

clamp(min, preferred, max) uses the preferred value but never lets it leave the min–max range. With a preferred value of rem + vw, text grows linearly with viewport width and stops at both ends. One line replaces a stack of media queries.

The formula

A straight line through (min viewport, min size) and (max viewport, max size). Slope = (max size − min size) ÷ (max viewport − min viewport). Slope × 100 is the vw coefficient; the y-intercept is the fixed part.

Why rem instead of px

rem scales when users raise their browser's base font size. Fixing it in px ignores that setting — an accessibility failure. Use rem unless you have a specific reason not to.

Frequently asked

Why not just use vw?

Pure vw gets too small on narrow screens and too large on wide ones. clamp locks the extremes.

Does this work for spacing?

Yes — the same math applies to padding, gap and margin.

Browser support?

All major browsers since 2020. Not IE, which is no longer a target.