CSS clamp Fluid Typography: Headings That Scale Smoothly on Every Screen

Traditionally, responsive font sizes jump at breakpoints: 28px on phones, 40px on tablets, 48px on desktop. CSS clamp fluid typography makes text scale smoothly between a minimum and maximum, with no media queries needed.

How clamp() works

h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem); }

clamp(MIN, PREFERRED, MAX): - Never smaller than 1.75rem (28px) - Ideally 4vw + 0.5rem (grows with screen width) - Never larger than 3rem (48px)

Why include rem in the preferred value?

Using only vw ignores the user's browser font-size setting and can fail zoom accessibility. Mixing rem with vw keeps text responsive to user preferences.

A simple type scale

:root {
  --fs-h1: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
body { font-size: var(--fs-body); }

See CSS variables tutorial.

Calculating the middle value

To scale from size A at screen width W1 to size B at W2: - slope = (B − A) / (W2 − W1) - vw value = slope × 100 - intercept = A − slope × W1

Example: 28px at 360px wide → 48px at 1280px wide: - slope = 20 / 920 ≈ 0.0217 → about 2.17vw - intercept ≈ 28 − 0.0217 × 360 ≈ 20.2px ≈ 1.26rem - Result: clamp(1.75rem, 1.26rem + 2.17vw, 3rem)

Online clamp calculators can do this math for you.

Beyond font sizes

clamp() works for spacing too:

section { padding-block: clamp(40px, 6vw, 96px); }
.container { padding-inline: clamp(16px, 4vw, 32px); }

Tips

• Keep body text close to 16–18px; fluid scaling matters most for headings
• Test at 320px, 360px, 768px, 1280px and 1920px widths
• Test with browser zoom at 200%
• Combine with good line-height and line length. See white space in design

FAQs

Is clamp() supported everywhere?

Yes, in all modern browsers.

Do I still need media queries?

For layout changes, yes. clamp() reduces the need for font-size breakpoints.

Joboo Web uses fluid typography so every site reads well on phones and big screens. Get in touch.