Web Typography: Five Easy Pieces

 ~  2 min read

#1. Font Size

If they can’t read it, they won’t.

16px is the minimum. Use it for auxiliary copy, such as captions and button text.

18px is a good standard, comfortable for extended reading.

Don’t be afraid to go larger! This text starts at 18px 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.

#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.

typography

#4. Whitespace

Whitespace is punctuation, vital for timing and airing out long text. Set vertical breaks to the height of one line.

$font-size: 18px;
$line-height: 1.45;
$whitespace: $font-size * $line-height;

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

#5. Font Choice

Fonts are subjective, but an easy rule of thumb is to choose one font for headings and another for body text. This makes the headings pop and creates a predictable pattern.

In Summary

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

Always test typographic styles on real content, varied in structure and length (don’t use lorem ipsum–it doesn’t have realistic feel). Read, read, read, tweaking until the content flows.

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

References