Font Size, Weight and Line Height: A Guide to Typographic Hierarchy

Choosing a great font pairing is only half the job. The other half is how you set it: sizes, weights, spacing and line length. Good hierarchy lets readers understand the structure of a page in a single glance — what is most important, what belongs together, and where to start reading.

Start with the body size

On the web, body text between 16px and 20px is comfortable for most fonts. Fonts with a small x-height need the upper end of that range; fonts with a large x-height (like Inter or Merriweather) can sit at 16–17px. Never go below 16px for long-form reading on mobile.

Use a type scale

Rather than picking heading sizes at random, multiply your body size by a consistent ratio. A ratio of 1.25 (“major third”) is a reliable default:

body  16px
h4    20px
h3    25px
h2    31px
h1    39px
hero  49px

For bold, poster-like designs, try a larger ratio such as 1.333 or 1.5. For dense interfaces, use something smaller, like 1.2.

Weight creates contrast

Size is not the only tool. A heading at 600 or 700 weight stands out even at a modest size, and a regular-weight caption in a lighter colour recedes. If you are using a single family, weight is how you create hierarchy. If you're pairing two fonts, keep the body at 400 and let the heading font provide contrast through its structure.

Line height

• Body text: 1.5–1.7. Longer lines and fonts with a large x-height need more.
• Headings: 1.05–1.25. Large text looks loose with body line heights.
• UI labels and buttons: 1.2–1.4.

Line length

Aim for 55–75 characters per line for body text. In CSS, max-width: 65ch on your text container is an easy way to get there. Lines that are too long make it hard to find the start of the next line; lines that are too short break the reading rhythm.

Letter spacing

Most fonts are spaced for text sizes. At large sizes, tighten headings slightly (letter-spacing: -0.01em to -0.03em). For all-caps labels, do the opposite and add 0.05em to 0.12em.

Putting it together

body {
  font: 400 17px/1.65 'DM Sans', sans-serif;
}
h1, h2, h3 {
  font-family: 'DM Serif Display', serif;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
.eyebrow {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
article { max-width: 65ch; }

In the pairing tool you can adjust the size and weight of each font independently and copy the resulting CSS with one click.