Responsive design typography

Typography doesn’t live in a fixed frame. What feels balanced on a wide desktop can overwhelm or shrink on mobile. Responsive text scaling makes sure the hierarchy holds across every screen size, headings stay dominant, body text stays legible, and rhythm remains consistent.

Good scaling is not about shrinking everything evenly, it’s about preserving proportions defined by your typographic scale, while optimizing for legibility in different contexts.

Key techniques to make typography scale smoothly across devices while staying accessible.

Maintain a consistent scale

Preserve the SubUX modular scale across breakpoints. For headings we use 1.333, and for body text 1.25. Sizes adjust, but proportions remain stable.

References:

• Modular Scale – Tim Brown
• Typography – Google Material Design

Use relative units

Define text in rem or em, not fixed px. This ensures scaling works across devices and user preferences. Pair with CSS clamp() for fluid typography.

References:

• Fluid typography with clamp() – CSS Tricks
• Fluid responsive typography – Smashing Magazine

Responsive scaling across devices

On tablets, reduce headings by ~10–15%; on mobile by ~20–25%. Body text should never go below 16px / 1rem to comply with WCAG 1.4.4.

References:

• WCAG 1.4.4: Resize text
• A guide to responsive typography – UX Collective

Increase line height on smaller screens

Tighter layouts require more breathing room. For mobile, raise line height from 1.4 → 1.5. This improves scanability in narrow viewports.

References:

• WCAG 1.4.8: Visual presentation
• Flexible web design – Zoe Mickley Gillenwater

Test at real breakpoints

Check typography at 320px, 375px, 768px, and 1024px. What looks balanced in Figma might feel oversized on a real device.

References:

• Typography – Apple Human Interface Guidelines
• Simple solutions to responsive typography – Kevin Powell
• Responsive typography – Jason Pamental

Frequent pitfalls that break readability and hierarchy when scaling text.

Shrinking all text equally

Scaling everything down by the same percentage often makes body text too small. Always keep <p> ≥ 16px / 1rem.

Oversized headings on mobile

Leaving desktop <h1> at 64px / 4rem on a 375px screen consumes the viewport. Resize proportionally.

Ignoring line height adjustments

Too tight on mobile makes text blocks unreadable. Always loosen spacing in narrow layouts.

Using px units only

Fixed pixels break user zoom preferences and accessibility resizing.

Testing in design tools only

Testing only in static mockups misses real-world device rendering and font rendering differences.

Responsive typography scaling is not about shrinking text, it’s about preserving hierarchy, rhythm, and accessibility across every device.

A consistent system ensures content remains readable, scannable, and accessible everywhere.

Scenario: Typography scale across breakpoints

Use when defining a type scale that maintains hierarchy and readability across mobile, tablet, and desktop, without arbitrary size jumps between breakpoints.

You are a UX-focused design agent. Design a responsive typography system for [product: content-heavy app / marketing site / mobile-first product].

Rules:
- Base: 16px (1rem) for body text on all screen sizes — never below 16px on mobile
- Use rem for all type sizes — never fixed px for scalable text
- Type scale (Major Third, 1.25 ratio):
  xs: 0.8rem — labels, captions
  sm: 0.875rem — secondary body, annotations
  base: 1rem — body text
  md: 1.25rem — H4, card titles
  lg: 1.563rem — H3
  xl: 1.953rem — H2
  2xl: 2.441rem — H1 desktop

- Responsive headings — scale down on mobile (not just body text):
  Fluid typography with clamp():
  H1: font-size: clamp(1.75rem, 4vw, 2.441rem)
  H2: font-size: clamp(1.563rem, 3vw, 1.953rem)
  H3: font-size: clamp(1.25rem, 2.5vw, 1.563rem)
  Body: stays at 1rem on all breakpoints

- Line height:
  Body: 1.5–1.6 (unitless — never px)
  Headings: 1.1–1.3
  Never below 1.4 for readable paragraphs

- Font weight: maximum 3 variations — 400 (regular), 500 (medium), 600–700 (bold)
- Test at 200% browser zoom: content must reflow, no horizontal scrolling

Accessibility:
- Use rem/em — never px for body text (respects user browser font size settings)
- Respect prefers-reduced-motion for any animated typography
- All text: minimum 4.5:1 contrast ratio

Constraints:
- Never use fixed px for scalable text
- Never shrink all text uniformly at mobile — scale headings more than body
- Never let body text go below 16px on any screen size