CSS clamp() Calculator

font-size: clamp(1rem, 0.9rem + 1vw, 1.25rem);

Fluid sizing without breakpoints

clamp(min, preferred, max) scales a value with the viewport while keeping it from getting too small or too large — so you don't need a stack of media queries just to step font sizes.

font-size: clamp(1rem, 0.9rem + 1vw, 1.25rem);

What the three values do

• min: the smallest readable size on mobile; the value never drops below it.
• preferred: a formula like 0.9rem + 1vw — a fixed base plus a viewport ratio, so it grows with the screen.
• max: the cap on large screens.

Common mistakes

• Using vw alone: font-size: 4vw gets tiny on small screens and huge on large ones. Wrapping it in clamp() is exactly what fixes that.
• px instead of rem: ignores the user's font-size setting. Prefer rem for accessibility.
• Keep a fixed rem in the preferred formula so small screens stay legible.

It works for padding, gap, and width too, not just type. Enter your min, preferred factor, and max — the tool prints the full expression.