CSS clamp() Calculator

Generate a clamp() value that scales type between two viewports.

What you provide

Browsers default to 16px. Change this only if you have overridden the root size.

Result

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem)

Two details make this accessible rather than merely clever. The preferred value keeps a rem term, so text still responds when someone sets a larger default font size, and a value of pure vw would break that. And both ends are bounded, so the text has a floor on a phone and a ceiling on a wide monitor. The same technique works for padding, margins and gaps, not just type.

CSS
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
Diagnostic telemetry
MinimumBelow 320px viewport
16px (1rem)
MaximumAbove 1280px viewport
24px (1.5rem)
Growth rate
0.83vw
Scale ratio
1.5×
At 768px viewport
19.7px

What this cannot tell you

  • Produces a CSS value from your numbers, in your browser. It does not inspect your site or your stylesheet.
  • The interpolation is linear between the two viewport widths you give. Type scales that need a curve, or that change at a specific breakpoint, need a different approach.

Take this with you

CSS clamp() Calculator on RunTheTests — free browser-based frontend tools, no sign-up.