Responsive Typography
Scaling font sizes fluidly or in steps across different screen sizes.
Plain English
A 60px hero headline looks dramatic on a 1440px desktop but breaks to three cramped lines on a 375px phone. Responsive typography solves this by either stepping down font sizes at breakpoints (simple, step-based) or fluidly scaling them between a minimum and maximum (smooth, using clamp()). The goal: text that is always readable and proportionate, never too big for mobile or too small for large screens.
Technical
Two approaches: (1) Media query steps — redefine font-size at breakpoints (h1 { font-size: 48px } @media (max-width: 768px) { h1 { font-size: 32px }}). (2) Fluid scaling with clamp() — font-size: clamp(2rem, 5vw, 4rem) sets a minimum, preferred (viewport-relative), and maximum. Clamp() requires no media queries and scales smoothly between bounds. The drawback is it can cause sizes to be too small at intermediate widths if min is set too low.
Live Demo
Responsive type scale (simulated)
320px
Design Playbook
text-xl — 20px
480px
Design Playbook
text-2xl — 24px
100%
Design Playbook
text-4xl — 36px
Type scales up with viewport — headings lead the size increase.
Usage
✓ Good usage
Use clamp(2rem, 4vw + 1rem, 3.5rem) for the hero headline to create smooth scaling from 32px on mobile to 56px on desktop without any media queries.
✗ Bad usage
Using the same 64px hero headline on mobile and desktop — the headline breaks to 4 lines on a phone and dominates the entire viewport.
Recommended values
- Desktop hero: 56–72px → Mobile hero: 32–40px
- Desktop H1: 40–48px → Mobile H1: 28–32px
- Desktop H2: 28–32px → Mobile H2: 22–24px
- Body copy: 16px on all screen sizes (never scale body down)
- Fluid headline: clamp(2rem, 5vw + 1rem, 4rem)
Common mistakes
- Scaling body text below 16px on mobile — readability suffers most on small screens.
- Setting the clamp() minimum too low — text at 12px on small phones is unreadable.
- Not testing at intermediate widths — fluid scaling can produce awkward sizes between breakpoints.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use clamp() for all headings: hero at clamp(2rem, 5vw + 1rem, 4rem), H1 at clamp(1.75rem, 4vw + 0.5rem, 3rem), H2 at clamp(1.25rem, 3vw + 0.25rem, 2rem). Keep body copy at 16px on all screens.