Web Typography: Five Easy Pieces

1

#1. Font Size

18px is comfortable for extended reading, because it’s about equal to 12pt on a printed page. Treat 14px as the minimum, reserving it for auxiliary copy like captions and buttons.

This text is 18px.

#2. Line Width

Line should be around 75 characters long, including spaces. This creates a natural reading pace and improves reading comprehension.

This text has a max width of 65ch.

#3. Line Height

Line height can range from 1.2 to 1.5, depending on the content. For dense writing (e.g. documentation), stay closer to 1.2. For easy reads (e.g. blog posts), 1.35 to 1.5.

This text has a line height of 1.5.

#4. Whitespace

Paragraph breaks should roughly equal the height of a line (font size multiplied by line height). Breathing room between paragraphs helps alleviate scrolling fatigue.

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

#5. Font Choice

Fonts convey the tone of your content. Compact, austere fonts tell the reader that the content will be dense. Fun, light-hearted fonts do the opposite.

Adding contrast between the headings and body improves scannability. Achieve this through different font sizes, weights, and/or families.

This text uses Iowan Old Style, an airy and easy-to-read serif.

In Summary

  1. Font size at least 18px.
  2. Line width about 75 characters.
  3. Line height from 1.2 to 1.5.
  4. Line breaks equal to line height.
  5. Contrasting fonts for headings and body.

Always test typographic styles on real content, varied in structure and length (lorem ipsum isn’t realistic enough). Read and tweak until the content flows.

That’s it. Five easy pieces. Start using them!

References