Typography on Screen: Getting the Details Right

The difference between good and great digital typography comes down to a handful of decisions that most people never consciously think about. But your readers feel them — in how easy (or exhausting) it is to read your content.

The Basics That Everyone Gets Wrong

Line Length

The ideal line length for body text is 45-75 characters. Most websites blow past this with full-width paragraphs spanning 120+ characters per line.

Your eyes lose their place on long lines. Short lines create too many line breaks. The sweet spot is around 65 characters — which translates to roughly 600-700px for body text at 16-18px.

Line Height

Body text needs room to breathe. A line height of 1.5 to 1.75 is comfortable for most fonts at body sizes. Headings can go tighter — 1.1 to 1.3 — because they're read differently.

Font Size

16px is the absolute minimum for body text on screen. 18px is better. 20px is generous. There's no reason to go smaller — your readers aren't holding a book 12 inches from their face, they're reading on screens of varying quality at varying distances.

The Details That Elevate

Paragraph Spacing

Use margin between paragraphs, not indentation. The web convention is clear for a reason — indentation works in books because of the physical page, but on screen, spacing between paragraphs is easier to scan.

Heading Hierarchy

Establish a clear type scale and stick to it:

• H1: 2.5rem — Page title only. One per page.
• H2: 1.75rem — Major sections.
• H3: 1.25rem — Subsections.
• Body: 1.125rem — Everything else.

Color and Contrast

Pure black (#000) on pure white (#FFF) is harsh on screens. Soften both sides slightly. Off-black (#1C1917) on off-white (#FAFAF9) reduces eye strain without sacrificing readability.

Choosing a Typeface

For blogs, you want a typeface that disappears. Readers shouldn't notice the font — they should notice the words. That means:

• Clean, open letterforms
• Good x-height (the height of lowercase letters)
• Comfortable at body sizes
• Distinct italic for emphasis

Serif or sans-serif is a matter of taste, not readability. Both work well on modern screens.

Test With Real Content

Never judge typography with lorem ipsum. Use your actual content — the longest post, the shortest post, the one with code blocks and bullet lists. That's the only real test.