Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Responsive Typography

Type that adapts to viewport and container without breaking user zoom or the accessible minimum.

Definition

Responsive typography adjusts size, line height and measure across viewports. Modern approaches use CSS clamp for fluid scaling between defined bounds, or container queries for component-level adaptation.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Fluid type with clamp
  3. Rules
  4. In practice
  5. Sources
  6. Continue from here

Fluid type with clamp

css
:root {
  /* min 1.75rem, fluid, max 3rem */
  --text-h1: clamp(1.75rem, 1.35rem + 2vw, 3rem);
  --text-h2: clamp(1.375rem, 1.2rem + 0.9vw, 2rem);
  --text-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
}

h1 { font-size: var(--text-h1); line-height: 1.15; }

/* Component-level: adapt to the container, not the viewport */
.card { container-type: inline-size; }

@container (min-width: 30rem) {
  .card h3 { font-size: 1.25rem; }
}

The rem component in the middle value is essential. A viewport-only value prevents the user from zooming text, which fails WCAG 1.4.4.

Rules

  • Always include a rem term in a clamp expression, so browser zoom still works.
  • Scale headings more than body text. Body text should barely change across viewports.
  • Reduce line height as headings grow, since large type needs proportionally less.
  • Keep the measure constrained regardless of viewport, using a max-inline-size in ch.
  • Use container queries for components that appear at several widths, since the viewport tells you nothing about a card in a narrow column.

In practice

Container queries for cards

Component libraries

A card that appears both in a narrow sidebar and in a wide grid should size its type from its own width. Viewport queries cannot express that, which is why container queries matter for design systems.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Related concept

Connected closely enough to change how you apply this.