Offered by Dead Brands
Nobody reads your screen or poster the way you wrote it — they scan it in seconds, following predictable eye paths, and bail if the important thing doesn't surface immediately.
Use it over MCP: connect to https://mcp.deadbrands.co/hub/mcp and call skills_get with slug visual-hierarchy-and-readability.
# Visual Hierarchy and Readability
Credit: SteTy — published free in the Skills Hub
Nobody reads your screen or poster the way you wrote it — they scan it in seconds, following predictable eye paths, and bail if the important thing doesn't surface immediately. This skill teaches how hierarchy (size, weight, color, position) steers that scan, what eye-tracking research actually shows about F-patterns and Z-patterns, and the hard numbers for contrast and information density that keep text legible for everyone.
## Overview
In 1997 Jakob Nielsen's usability research found that **79% of users scan a new page; only 16% read word by word**. His 2006 eye-tracking study of 232 users across thousands of pages revealed the **F-pattern**: a full horizontal sweep across the top, a second shorter sweep, then a vertical scan down the left edge. Hierarchy is how you design for that reality: you rank every element, then spend your loudest signals (size, weight, contrast, position) on the top of the ranking. Readability is the floor beneath it — type size, line length, spacing, and contrast ratios (codified in the WCAG accessibility standard) that determine whether the words can be read at all once found.
## Core Principles
- **One loudest thing.** Hierarchy is a ranking, not a volume contest. If three elements shout, none does. Decide the #1, #2, #3 messages and size them in obvious steps.
- **Contrast creates hierarchy; sameness destroys it.** Adjacent levels must differ decisively — a heading only 15% bigger than body text reads as a mistake, not a level.
- **Position is a signal.** In left-to-right cultures, top and left are read first and weighted as more important. Bottom-right is where the eye lands last (the terminal area — good for the call to action).
- **Scanning is the default; reading is earned.** People commit to reading linearly only after scanning tells them the content is worth it (NN/g's "commitment pattern").
- **Legibility is non-negotiable.** Hierarchy tricks cannot rescue 10px gray-on-light-gray text. Meet the contrast floor first, then style.
## Techniques
- **Size steps with a modular scale.** Pick a ratio and multiply: 1.25 (major third), 1.333 (perfect fourth), or 1.5. From 16px body: 16 → 20 → 25 → 31 → 39. Every level is unmistakably distinct and harmoniously related.
- **Weight and color as secondary channels.** Reserve bold for true emphasis (bolding everything = bolding nothing). Use one accent color for interactive/important elements only; color alone must never carry meaning (8% of men have red-green color vision deficiency) — pair it with weight, underline, or position.
- **The F-pattern layout (text-heavy pages).** Front-load: put the conclusion and keywords in the headline, the first two words of each subheading, and the first sentence of each paragraph. Bullets and bold lead-ins feed the vertical left-edge scan.
- **The Z-pattern layout (sparse pages, posters, landing heroes).** Logo top-left → key visual top-right → diagonal sweep through a central image → headline and button bottom-right, exactly where the Z terminates.
- **Layer-cake pattern support.** NN/g's 2017 follow-up found users often scan *only headings*, skipping body text between them ("layer cake"). Write headings that tell the whole story alone.
- **Spotted and bypassing defenses.** Users hunt for specific shapes (prices, links, their own name) and skip lines that all start the same way. Vary paragraph openings; make targets visually distinct.
- **Contrast numbers (WCAG 2.1, criterion 1.4.3).** Normal text: **≥ 4.5:1**. Large text (≥24px, or ≥18.7px bold): **≥ 3:1**. AAA: 7:1 / 4.5:1. UI component boundaries and icons: ≥ 3:1 (criterion 1.4.11). Check with the WebAIM Contrast Checker — never eyeball it.
- **Readable line measures.** Body text 45–75 characters per line (Robert Bringhurst's range; ~66 is ideal), line-height 1.4–1.6 for body (WCAG requires content to survive spacing up to 1.5× without loss), left-aligned ragged-right for Latin scripts, body size ≥16px on web.
- **Density control.** Chunk information into groups of 3–5, separate with space (not lines), and cut words before shrinking type. A poster gets one message; a screen gets one primary task per view.
## Worked Examples
- **Poster scan test.** Movie one-sheet: title occupies the top third at 10× the billing-block size (billing blocks are famously condensed to near-illegibility by contract — hierarchy serving lawyers, not readers, and a warning). At 3 meters the viewer should get: image → title → date. Nothing else competes.
- **Article rescue.** A 900-word wall becomes: inverted-pyramid headline ("City Cuts Bus Fares 30% Starting June"), subheads every 2–3 paragraphs whose first words carry keywords, a 3-bullet summary up top. Same words, F-pattern-shaped.
- **Dashboard ranking.** One KPI at 39px top-left, four secondary metrics at 20px in a row, table body at 14–16px with ≥4.5:1 contrast, timestamps in de-emphasized (but still ≥4.5:1) gray — de-emphasis by size and position, not by failing contrast.
- **Price table.** The plan you want chosen gets the accent border, the largest price numeral, and the middle or terminal position; feature lists use check/dash similarity so the vertical scan compares instantly.
## Common Pitfalls
- **Everything is bold/red/large.** Emphasis inflation collapses the ranking back to flat.
- **Hierarchy by color only.** Fails colorblind users, grayscale printing, and sunlight glare.
- **Centered multi-line body text.** Ragged left edges destroy the F-pattern's vertical anchor; every line starts somewhere new.
- **Gray text chic.** Light gray body copy (#999 on white = 2.8:1) is the most common readability failure in modern UI — it fails WCAG AA outright.
- **Long lines on wide screens.** At 120+ characters the eye loses the return sweep; fix with max-width (~65ch), not bigger fonts.
- **Headings that need the body.** If your subheads are "Introduction / More details / Conclusion," the layer-cake scanners get nothing.
## Practice Drills
1. **The 5-second test.** Show a design for 5 seconds, hide it, ask what the #1 and #2 messages were. Any mismatch = hierarchy failure; fix and repeat.
2. **Grayscale conversion.** Screenshot your layout in black and white. If the ranking disappears, it was carried by color alone.
3. **Squint ranking.** Blur the design (or view at 25%) and list elements in the order you notice them. Compare with the intended order.
4. **Contrast audit.** Run every text/background pair in a real project through WebAIM's checker; log and fix every sub-4.5:1 pair.
5. **Heading-only rewrite.** Take an article and rewrite only its headings until the headings alone summarize it — layer-cake proof.
## When to Use and Limits
- **Use it when:** a task calls for visual hierarchy and readability, as laid out in the Techniques and Worked Examples above.
- **Watch first for:** Everything is bold/red/large.; Hierarchy by color only.; Centered multi-line body text. (see Common Pitfalls).
- **Limits:** this is a general reference drawn from public sources; it is a starting point for practice, not a full course, and attributions and dates should be checked against the cited sources before quoting them.
## Quick Reference
- Scanning stats: 79% scan, 16% read word-by-word (Nielsen, 1997); F-pattern documented 2006 (232 users). | Patterns: F = text-heavy; Z = sparse/hero; layer-cake = headings only. | Scale ratios: 1.25 / 1.333 / 1.5 from a 16px base. | Contrast AA: 4.5:1 text, 3:1 large text & UI parts; AAA 7:1. | Large text = ≥24px or ≥18.7px bold. | Line length 45–75 chars; line-height 1.4–1.6; body ≥16px. | Emphasis budget: one loudest element per view; never encode by color alone.