45 Mins intermediate
6. Typography & Hierarchy
Module 6
The Architecture of Reading
90% of the web is text. If your typography is poorly engineered, your application is poorly engineered. Typography is not about picking a 'pretty font'; it is the mathematical art of arranging text to make it legible, readable, and appealing on a digital screen.
🅰️ Serif vs. Sans-Serif
- Serif: Fonts with small structural 'feet' at the ends of letters (e.g., Times New Roman, Merriweather). Historically used for long-form printed reading because they guide the eye along the baseline.
- Sans-Serif: Fonts without feet (e.g., Inter, Roboto, Arial). Clean, modern, and highly legible on digital screens. 95% of modern UI design uses Sans-Serif.
⚖️ Establishing Visual Hierarchy
Hierarchy is how you control the user's eye, forcing them to read the most important information first. You establish this using three primary levers:
- Size: Headlines must be significantly larger than body text.
- Weight: Use Bold (700+) for titles to create contrast against Regular (400) body text.
- Color: Primary text is a dark, high-contrast gray. Secondary text (like dates or metadata) should be a lighter, muted gray to push it into the visual background.
📏 The Math: Line Height & Line Length
Text crammed together causes cognitive fatigue. Two mathematical rules govern modern web readability:
- Line Height (Leading): The optimal line height is 1.5x to 1.6x the font size. This provides enough 'breathing room' between lines so the eye doesn't skip.
- Line Length: The optimal line length is 60 to 75 characters (ch). If a line of text stretches across an entire widescreen monitor, the user's eye will lose its place when returning to the start of the next line.
Hands-On Tutorial: Fixing the Wall of Text
In the Sandbox, you will be confronted with a dense, unreadable 'wall of text' spanning the entire screen. Your mission is to repair the typography math. You must increase the Line Height to the WCAG recommended 1.5x minimum, and restrict the Max-Width of the container to approximately 65 characters to prevent horizontal eye fatigue.
In the Sandbox, you will be confronted with a dense, unreadable 'wall of text' spanning the entire screen. Your mission is to repair the typography math. You must increase the Line Height to the WCAG recommended 1.5x minimum, and restrict the Max-Width of the container to approximately 65 characters to prevent horizontal eye fatigue.
Active Lab: TypographyLab
Fix the Type Scale
H1 Size14px
Body Size14px
Caption Size14px
Line Height1.2
✗H1 (28–48px)
✗Body (15–18px)
✗Caption (11–13px)
✗Scale ratio ≥1.8
✗Line-height (1.4–1.8)
The Quick Fox
Body text renders here.
Knowledge Check
Ready to test your understanding of 6. Typography & Hierarchy?