Responsive Typography With CSS clamp(): The Only Technique You Need

Forget media query breakpoints for font sizes. Learn how CSS clamp() creates fluid typography that scales smoothly from mobile to desktop with a single line of CSS.

For years, responsive typography meant a handful of media query breakpoints where font sizes jumped from 14px to 16px to 18px. clamp() makes that entire approach obsolete.

clamp(min, ideal, max) takes three values:

• min — the smallest the value will ever be
• ideal — the preferred value (usually a viewport-relative unit)
• max — the largest the value will ever be

h1 {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
}

On a small phone (320px wide): 4vw = 12.8px — below 1.8rem, so clamped to 1.8rem.
On a wide monitor (1440px): 4vw = 57.6px — above 3.5rem, so clamped to 3.5rem.
In between, it scales fluidly.

:root {
  --text-xs:   clamp(0.7rem,  0.8vw + 0.4rem,  0.85rem);
  --text-sm:   clamp(0.85rem, 0.9vw + 0.5rem,  1rem);
  --text-base: clamp(1rem,    1vw   + 0.6rem,  1.125rem);
  --text-lg:   clamp(1.1rem,  1.5vw + 0.5rem,  1.35rem);
  --text-xl:   clamp(1.25rem, 2vw   + 0.5rem,  1.75rem);
  --text-2xl:  clamp(1.5rem,  3vw   + 0.5rem,  2.5rem);
  --text-3xl:  clamp(1.8rem,  4vw   + 0.5rem,  3.5rem);
  --text-4xl:  clamp(2.2rem,  5vw   + 0.5rem,  5rem);
}

/* Usage */
body { font-size: var(--text-base); }
h1   { font-size: var(--text-4xl);  }
h2   { font-size: var(--text-3xl);  }

The same technique works for spacing, line-height, and padding:

.section {
  padding-block: clamp(3rem, 8vw, 8rem);
}

.prose {
  line-height: clamp(1.4, 1.2 + 0.4vw, 1.7);
  max-width: clamp(50ch, 60%, 70ch);
}