Responsive Typography

A heading that looks right on a laptop can be gigantic on a phone, and body text that is comfortable on a phone can look tiny on a wide screen. Responsive typography fixes both.

Step 1: use rem

Font sizes in rem follow the visitor’s settings. Everything else builds on that.

Step 2: change sizes with a media query

1
2
3
4
5
6
7

<style>
  h1 { font-size: 1.75rem; line-height: 1.2; }
  @media (min-width: 400px) {
    h1 { font-size: 2.5rem; }
  }
</style>
<h1>A heading that grows</h1>

Step 3: let it scale smoothly with clamp()

clamp(min, preferred, max) picks a value that grows with the screen but never goes below the minimum or above the maximum. You will study it in CSS clamp().

1
2
3
4
5
6

<style>
  h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); line-height: 1.15; }
  p  { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); max-width: 60ch; line-height: 1.6; }
</style>
<h1>Fluid heading</h1>
<p>The paragraph also grows slightly with the screen, and the line length is kept near sixty characters.</p>

There is no breakpoint in sight, and it works at every width.

Other things that matter on small screens

• Line length: 45 to 75 characters is a comfortable range. max-width: 65ch limits it.
• Line height: around 1.5 for body text. Long lines need a bit more.
• Long words and URLs: use overflow-wrap: anywhere so they cannot push the page wider. See White Space and Wrapping.
• Do not use vw alone for font sizes. It ignores the visitor’s text preferences. Adding it to a rem base, as above, fixes that.