Responsive Typography

A heading sized comfortably for a desktop screen often looks oversized on a phone, and a size tuned for mobile looks small on a desktop. Responsive typography is about text that scales smoothly between the two, instead of needing a separate media query for every breakpoint.

The Old Way — a Media Query Per Breakpoint

h1 { font-size: 24px; }
@media (min-width: 768px) {
  h1 { font-size: 32px; }
}
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
}

This works, but jumps in visible steps rather than scaling smoothly, and needs a new rule for every new breakpoint.

Viewport Units

vw (viewport width) scales continuously with screen size, but with no minimum or maximum — text can become unreadably small or huge at extreme sizes.

h1 {
  font-size: 5vw;
}

The Fluid Approach — clamp()

Combining a viewport unit with clamp() (from the earlier CSS Functions lesson) scales smoothly, with a safe floor and ceiling.

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

Why rem, Not px, for the Min and Max

Using rem for the fixed ends of a clamp() respects a user's browser font-size setting, unlike a fixed px value — a real accessibility difference for anyone who's increased their default text size.

The fast path to a good value

This site's Clamp tool generates a value like the one above from a simple min-size/max-size/viewport-range form — worth using directly rather than tuning the numbers by hand.