Responsive Typography with CSS clamp() — Fluid Font Sizing

Fluid Typography with clamp()

CSS clamp() lets you define font sizes that scale fluidly with the viewport, eliminating the need for multiple media query breakpoints.

The clamp() Syntax

font-size: clamp(minimum, preferred, maximum);

• minimum: The smallest the font will ever be
• preferred: A fluid value (usually using vw units)
• maximum: The largest the font will ever be

A Complete Fluid Type Scale

:root {
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
}

Applying to Font Pairings

Use larger clamp ranges for heading fonts (where size variation matters most) and smaller ranges for body text (where consistency aids readability):

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

body {
  font-family: 'Lato', system-ui, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

The Formula

To calculate the preferred value: preferred = minimum + (maximum - minimum) * (100vw - minViewport) / (maxViewport - minViewport). Tools like Utopia can generate these values automatically.

Browser Support

clamp() is supported in all modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). No polyfill needed for current production use.