Web Typography: Five Easy Pieces

Reading on the web is hard on the eyes. Follow these five rules to help ease the burden.

#1. Font Size

16px is a good baseline, comfortable for extended reading. Treat 14px as the minimum, reserving it for auxiliary copy like captions and buttons.

Don’t be afraid to go larger—this text starts at 16px and scales up with screen size.

#2. Line Width

Approximately 75 characters per line (including spaces) lends a natural reading pace. Place text in the center of the screen for proper ergonomics.

This text has a max width of 75ch.

#3. Line Height

Line height should range from 1.2 to 1.5, depending on the content. Dense, scientific writing with lots to cover? Stay closer to 1.2. Easy reading, like a blog post? 1.35 to 1.5.

This text has a line height of 1.5.

1

#4. Whitespace

Whitespace helps punctuate long text and alleviate scrolling fatigue. Make vertical breaks equal to about the height of one line.

$line-height: 1.5;
$whitespace: 1rem * $line-height;

h1, h2, h3,
p, ol, ul {
    margin-bottom: $whitespace;
}

#5. Font Choice

A contrast between heading and body text helps create a predictable pattern. Besides that, fonts are quite subjective and depend heavily on the tone of your content.

This text uses PT Serif for headings and PT Sans for the body.

In Summary

  1. Font size at least 16px.
  2. Line width about 75 characters.
  3. Line height from 1.2 to 1.5.
  4. Paragraph 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