Basics of Typography in Web Design

I boiled down the principles of typography for comfortable reading as discussed by Luke Jones in Typography Tips for a More Comfortable Read

Use typographic hierarchy to give a clear sense of the structure of a page

All font sizes should be derived from the body text.

  1. Body text: increase/decrease the text size until it’s comfortable to read (e.g. 22pt)
  2. Primary heading: 180–200% of the body text (40–44pt)
  3. Secondary heading: 130–150% of the body text (29–33pt)
  4. Tertiary heading: 100–125% of the body text (22–28pt)
  5. Small text / captions: 70–75% of the body text (15–17pt)

Use vertical spacing to make your words easier to scan

Paragraph spacing. In most cases, it should be equal to the body text, so if the body text is 16pt then the paragraph spacing is 16pt. In CSS, this is the equivalent of setting margin-bottom of paragraphs to 16px or 1em

Line spacing. The line spacing should be set somewhere between 120–160% of the text size. As a rule, the smaller the text, the more generous the line spacing needs to be to give each word room to breathe. In CSS, you can set this using ems or unitless values (e.g. 1.2), but it may require adjustment to make it feel right.

Adjust the measure to make each line of text more comfortable to read

The ideal number of characters per line is 65–75.

Comments, questions and feedback welcome.