Skip to content
UX Atlas
Plate FND·038 · UI foundationGrid D2 · Rev. 2026-08-14

Responsive Typography

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Fluid type with clamp
  3. 3Rules
  4. 4Scaling type across viewports
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Building responsive layouts.
  • Designing components used at multiple widths.
  • Auditing zoom behaviour.

Common mistakes

  • Pure vw font sizing.
  • Body text that scales as aggressively as headings.
  • Measure left unconstrained on wide screens.
  • Testing fluid type only by resizing the window, and never by zooming to 200 percent.

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.

Scaling type across viewports

Do

  • Use clamp with a rem-based minimum, so zoom and user settings still work.
  • Scale headings more than body text. Body barely needs to change.
  • Reduce line height slightly as type gets larger.
  • Use container queries for components that appear at several widths.

Do not

  • Size text in viewport units alone, which breaks browser zoom.
  • Set body text below 16 pixels on mobile, which triggers zoom on focus in some browsers.
  • Change the type scale at every breakpoint, which makes the system unpredictable.

In practice

  1. i.

    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.

  2. ii.

    Fluid type that defeated zoom

    The accessibility trap

    Type sized purely in viewport units did not respond to browser zoom, because the viewport does not change when the reader zooms. A rem component inside clamp is what preserves the reader's control.

Local chart

FND·038 · Region II · Grid D2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Text ResizeA11Y·014 · RELATED CONCEPTBreakpointsFND·045 · RELATED CONCEPTContainersFND·041 · RELATED CONCEPTLine HeightFND·034 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTResponsive LayoutFND·043 · RELATED CONCEPTScaleFND·012 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPTVariable FontsFND·037 · RELATED CONCEPT

Sources

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

  1. [1]

    clamp()

    MDN Web Docs

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.