Why use clamp() instead of media queries?

Linear scaling between two breakpoints — no jumps, no per-breakpoint values to maintain. Fewer lines of CSS for the same effect.

Why rem instead of px?

Users can set a base font-size preference in their browser (e.g. accessibility). rem respects that; px ignores it.

What's the slope in the middle?

It's how much the value grows per `1vw` of viewport increase. Combined with the intercept, it's a linear function that crosses (minVw, minVal) and (maxVw, maxVal).

`clamp()` works in every browser since 2020 — Safari 13.1, Chrome 79, Firefox 75. Safe everywhere in 2026.

CSS clamp() Calculator (Fluid Typography)

Color

Fluid typography uses `clamp(min, preferred, max)` to scale a value linearly between two viewport widths — no breakpoints needed. This calculator takes your min/max sizes and viewport range and produces the exact `clamp(min, intercept + slope*100vw, max)` expression with no rounding noise. Output is in `rem` (with configurable root size) or `px`. A live preview block renders the result so you can see it scale.

—

Presets

Min value (px)Max value (px)Min viewport (px)Max viewport (px)UnitRoot font-size (px)

Result

font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);

Resize your window to watch the preview scale linearly.

Preview

The quick brown fox jumps over the lazy dog.

How to use

Pick a preset (Body, H1, etc.) or set min/max value and viewport range.
Choose rem or px (rem is recommended — respects user font preferences).
Copy the one-liner clamp expression into your CSS.

Frequently asked questions

Why use clamp() instead of media queries?: Linear scaling between two breakpoints — no jumps, no per-breakpoint values to maintain. Fewer lines of CSS for the same effect.
Why rem instead of px?: Users can set a base font-size preference in their browser (e.g. accessibility). rem respects that; px ignores it.
What's the slope in the middle?: It's how much the value grows per `1vw` of viewport increase. Combined with the intercept, it's a linear function that crosses (minVw, minVal) and (maxVw, maxVal).
Browser support?: `clamp()` works in every browser since 2020 — Safari 13.1, Chrome 79, Firefox 75. Safe everywhere in 2026.