Web Typography: Five Easy Pieces

   ~ 2 min read

Reading on the web is, by default, 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. That’s about 30 times the font-size. Place text in the center of the screen for proper ergonomics.

This text has a max width of 33rem.

#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

Use whitespace to punctuate long text and alleviate scrolling fatigue. Vertical breaks should be equal to 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

Fonts are subjective, but in general, choose one font for headings and another for body text. The contrast creates a predictable pattern and makes sections clear.

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