#Designing for Reading vs. Scanning

#Two Different Cognitive Modes

A reader and a scanner are in fundamentally different cognitive states. The reader — seated with a long-form article, a research paper, a novel — is in a sustained attention mode: following a linear argument, building a mental model incrementally, absorbing detail. The scanner — on a landing page, a dashboard, a search results page — is in a triage mode: looking for a specific piece of information, deciding in milliseconds whether to engage further.

Designing typography that optimizes for one mode and applies it to both is a common and costly mistake. The conventions of long-form editorial design, applied to a marketing landing page, produce a page that feels heavy and slow. The conventions of scannable UI design, applied to an article, produce text that feels fragmented and shallow.

#What Reading Design Looks Like

Long-form reading contexts — Medium, The New York Times, Substack, editorial articles — share several typographic priorities:

Measure calibrated for sustained reading. The 45–75 character measure exists specifically for continuous reading. At this range, the eye can complete a line and return to the start of the next with minimal effort and no loss of place. A 90-character measure is manageable for 30 seconds; over ten minutes of reading, it becomes fatiguing.

Generous leading. For sustained reading, line-height: 1.6 or higher gives the eye adequate space to navigate between lines without confusion. Reading contexts tolerate — and benefit from — leading that might feel too airy in a UI.

Minimal hierarchy depth. Long-form reading typically uses two to three heading levels at most. Aggressive use of h2, h3, h4 interrupts reading flow, fragmenting the text into chunks. A well-argued long piece may need only h2 subheadings to orient the reader.

Conservative font size. Body text for reading contexts is typically 16–18px (1–1.125rem). Larger sizes force shorter measures; smaller sizes require more visual effort over long reading sessions.

Reduced color complexity. A reading context benefits from a minimal color palette — primary text, perhaps one accent, no visual distractions competing with the content.

/* Long-form reading layout */
.article {
  max-inline-size: 65ch;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.article p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  text-wrap: pretty;
  margin-block-start: 1.25rem;
}

.article h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  margin-block: 3rem 0.75rem;
  text-wrap: balance;
}

#What Scanning Design Looks Like

Scanning contexts — landing pages, dashboards, product listing pages, search results — have opposite priorities:

Short paragraph length. Paragraphs longer than three to four lines are rarely read in scanning mode. The eye is looking for hooks — key words, value propositions, answers — not sustained arguments. Keep paragraphs short and front-load the key information in each.

Aggressive hierarchy depth. More heading levels, more visible visual breaks. In scanning mode, the reader is using headings as navigation. Visible h2, h3, and bold lead-ins all function as signposts. Headings are not interruptions here — they are the primary content.

Wider measure tolerated. Because scanning is not linear reading, wider measures (up to 85–90 characters) are acceptable in some scanning contexts. The eye is jumping around the page, not following lines.

Smaller line-height acceptable. At 1.4, body text is more compact without being unreadable — appropriate for information-dense scanning contexts like navigation menus, data tables, and sidebars.

Heavy use of lists. Bullet lists, numbered lists, and definition-style layouts all support scanning. Prose paragraphs bury key information; lists expose it.

/* Scannable marketing/landing page layout */
.landing-section {
  max-inline-size: 80ch;
  margin-inline: auto;
  padding-block: 4rem;
}

.landing-section p {
  font-size: 1rem;
  line-height: 1.5;
  max-inline-size: 55ch; /* Constrain prose within wider container */
}

.feature-list {
  display: grid;
  gap: 1.5rem;
}

.feature-item h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-block-end: 0.375rem;
}

#The Hybrid Case: Documentation

Technical documentation is a genuinely hybrid case — it contains both prose that benefits from reading design and reference material that benefits from scanning design. The best documentation sites (Stripe's API docs, Tailwind's documentation) handle this through layout rather than a single typographic mode: prose explanations in a main column with reading-optimized settings, code blocks and reference tables in a secondary column with scanning-optimized formatting.

#The Core Test

Ask a single question of any text you are setting: Is the reader's goal to consume this content or to extract something specific from it?

If consumption (enjoyment, understanding, following an argument): apply reading design — longer measure, generous leading, restrained hierarchy.

If extraction (finding a price, locating a feature, confirming information): apply scanning design — shorter paragraphs, aggressive hierarchy, exposed structure.

The lorem ipsum generator can help you prototype both approaches — generate a few paragraphs of body text and a set of headings, then test your layout against both the reading context (does it feel comfortable to read a full paragraph?) and the scanning context (can you skim the headings and understand the structure?).

#Key Takeaways

• Reading contexts (long-form editorial) and scanning contexts (landing pages, dashboards) require different typographic approaches
• Reading design: 45–75ch measure, 1.6+ leading, minimal heading depth, conservative hierarchy
• Scanning design: short paragraphs, aggressive heading use, lists, wider measure acceptable
• Documentation is typically a hybrid — use layout to apply different modes to different content types
• The core test: is the user's goal to consume or to extract? Answer that, then select the appropriate typographic mode

#Further Reading

• Mastering Line Length, Leading & Measure
• Hierarchy: Guiding the Eye Through a Page
• Whitespace Is Not Empty
• Widows, Orphans & Rivers: Microtypography