Designing for Readability: Typography on the Web

Great content deserves great presentation. Typography is the interface between your words and your reader.

Measure and line length

Keep paragraphs between 60 and 75 characters per line. Longer lines tire the eye; shorter lines break the reading rhythm.

Line height

For body text, a line height of 1.6 to 1.8 gives Arabic and Latin scripts room to breathe. Arabic, with its diacritics and taller ascenders, benefits from the upper end of that range.

Contrast

Aim for a contrast ratio of at least 4.5:1 between text and background. Pure black on pure white is harsh; a soft charcoal like \#16181d\ on \#ffffff\ is easier to read for long sessions.

Hierarchy

Use size, weight and spacing — not decoration — to signal hierarchy. Three levels of headings is usually enough for an article.

Good typography is invisible. Readers should remember the idea, not the font.