Single Value

Min size

Max size

Min viewport

Max viewport

Property

Generated value

clamp(1rem, ...vw + ...rem, 2rem)

Output in

rem output assumes 1rem = 16px base. Use px if you prefer absolute values.

Type Scale

Scale ratio

Base size (min)

Base size (max)

Step	Min→Max	clamp()

Common Clamps

Simulated viewport width 800px

The quick brown fox

jumps over the lazy dog

font-size: 24px

Size vs viewport

CSS Clamp Generator — Fluid Typography

The CSS clamp(min, preferred, max) function creates values that scale smoothly between two viewport sizes. For fluid font sizes, the preferred value uses a combination of a viewport unit (vw) and a rem offset so the font grows linearly from your minimum viewport to your maximum. The formula is: slope = (maxSize - minSize) / (maxVp - minVp), then intercept = minSize - slope × minVp. Clamp works on any CSS length property — padding, margin, gap, border-radius — not just font sizes.