| name | apply-typography-hierarchy |
| description | Use when designing a typographic system for a document, website, or brand that needs clear visual hierarchy and readable body text |
| source | Robert Bringhurst "The Elements of Typographic Style" (4th ed., 2012); Ellen Lupton "Thinking with Type" (2010) |
| tags | ["typography","type-hierarchy","visual-design","layout","readability","type-scale"] |
| verified | true |
Apply Typography Hierarchy
Build a type system with a coherent scale, contrast, and rhythm so readers navigate content without conscious effort.
Why This Is Best Practice
Adopted by: Every major editorial, book, and web design discipline; Google Material Design type system; Apple Human Interface Guidelines typography specifications
Impact: Bringhurst's principles underpin professional typography in 50+ countries; eye-tracking research (Nielsen Norman Group, 2018) confirms users scan pages in F-patterns — visual hierarchy guides the eye through deliberate size and weight contrast
Why best: Good typography is invisible to the reader. Bad typography is a tax on every reading moment. A coherent hierarchy reduces cognitive load by encoding priority in visual weight before the reader processes a word.
Steps
- Choose a type scale — Use a modular scale with a ratio: Major Third (1.25), Perfect Fourth (1.333), or Golden Ratio (1.618). Apply consistently: base size × ratio^n. Tools: typescale.com. For web: set base at 16–18px.
- Select 2 typefaces maximum — One serif or humanist sans-serif for body text; one contrasting face for headings. Pair by contrast (weight, width, or classification), not similarity. Avoid combining two serifs or two geometric sans-serifs.
- Set body text first — Body text is the foundation. Set size, leading (line-height), and measure (line length) before touching headings. Optimal measure: 45–75 characters per line. Leading: 120–145% of font size.
- Establish heading levels — Use the type scale to assign sizes for H1–H4. Each level should be visually distinct at a glance — at minimum a 1.25× size difference between adjacent levels. Supplement size with weight change (regular vs. bold) or color.
- Control spacing with a baseline grid — All vertical spacing (margins, padding, line height) should align to an 8px or 4px grid. Consistent vertical rhythm makes the page feel ordered even subconsciously.
- Set color and contrast — Body text: minimum 4.5:1 contrast ratio (WCAG AA). Headings at 18pt+: minimum 3:1. Decorative text labels: at least 3:1. Never gray-on-gray body text.
- Define hierarchy through weight, size, color, and case — Use no more than two of these simultaneously per level. Three simultaneous signals (bold + large + all-caps) creates noise, not hierarchy.
- Test in context — Apply the system to a real content sample. The hierarchy should communicate without labels: a reader should be able to rank content importance by visual weight alone.
Rules
- Never set body text below 16px on screen or 10pt in print.
- Line length must not exceed 75 characters for sustained reading — wider lines cause readers to lose their place.
- Avoid justified text on screen without hyphenation; it creates irregular word spacing (rivers) that disrupts reading flow.
- All-caps is acceptable for short labels (3–5 words); never for body text or headings longer than 6 words.
- Font pairing must create contrast — if you squint and the two faces look the same, change one.
Examples
A publication system using Inter (body) and Playfair Display (headings):
- H1: 48px / 700 weight / 1.1 leading
- H2: 36px / 600 weight / 1.2 leading
- H3: 24px / 600 weight / 1.3 leading
- Body: 18px / 400 weight / 1.6 leading / max 680px container width
- Caption: 14px / 400 weight / muted color
Consistent 8px grid spacing between all elements.
Common Mistakes
- Too many typefaces — Three or more faces compete for attention; readers experience noise, not hierarchy.
- Ignoring line length — Full-width body text on a 1440px screen (150+ characters/line) is nearly unreadable; readers lose their place and skip lines.
- Size without weight contrast — Headings that are only slightly larger than body text fail to communicate hierarchy; add weight (bold) or letter-spacing to reinforce distinction.
