Responsive Typografie

Responsive typography is the practice of designing type systems that adapt appropriately to different viewport sizes — not just scaling font sizes proportionally, but reconsidering spacing, line length, hierarchy, and reading experience for different contexts.

The simplest form is font size breakpoints. The sophisticated form uses fluid scaling with constraints.

Basic responsive typography with breakpoints:

:root {
  font-size: 16px;
}

h1 {
  font-size: 2rem;       /* 32px on mobile */
}

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }  /* 40px on tablet */
}

@media (min-width: 1200px) {
  h1 { font-size: 3.5rem; }  /* 56px on desktop */
}

Fluid typography with clamp() (preferred modern approach):

h1 {
  /* min: 2rem, max: 3.5rem, scaling between 375px and 1200px */
  font-size: clamp(2rem, 1.5rem + 2.667vw, 3.5rem);
}

p {
  font-size: clamp(1rem, 0.875rem + 0.667vw, 1.25rem);
}

The clamp() function eliminates breakpoints for type, creating smooth scaling. The middle value — the fluid part — is a vw (viewport width) calculation that controls how quickly the size grows.

Responsive line length:

Beyond font size, line length is the most important typographic variable for responsive design. Ideal line length is 60-75 characters. On mobile, constrained viewport width naturally limits this; on wide desktop viewports, you must actively constrain it:

.content {
  max-width: 68ch; /* ch units track character width of the current font */
  margin-inline: auto;
}

Responsive line-height:

Larger text needs less relative line-height; smaller text needs more:

h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.1; /* Tight for large display text */
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6; /* Generous for body text */
}

Container queries for typography:

With container queries, typography can respond to the container's width rather than the viewport — enabling components that adapt when used in sidebars versus full-width layouts:

.card { container-type: inline-size; }

.card h2 { font-size: 1.25rem; }

@container (min-width: 400px) {
  .card h2 { font-size: 1.75rem; }
}

Google Fonts + Utopia.fyi is a productive pairing: Utopia generates responsive fluid type scales you can paste directly into your CSS, using fonts like Literata or Epilogue.