Key Insight
Typography is the art of choosing and arranging type to make text readable, accessible, and visually harmonious—using constrained scales for size, appropriate line spacing, and intentional alignment.
Key Points
- •Establish a type scale and stick to it—don't trial arbitrary values one pixel at a time
- •Optimal line length is 45-75 characters per line (about 20-35em)
- •Line height should be proportional: 1.5–2× for body text, 1–1.25× for headlines
- •Left-align body text; center alignment only works for short blocks
- •Not every link needs a color—in text-heavy interfaces, underline on hover is sufficient
- •Baseline alignment, not center—align mixed-size text elements to their baseline
- •Use letter-spacing: tighter for large headlines, wider for all-caps text
- •Font personality: rounded = playful, serif = elegant, geometric sans = professional
- •[FIGURE — Type scale definition] Shows: Visual type scale from 12px to 72px with usage annotations (caption, body, subhead, title, display). Teaches: A defined scale eliminates arbitrary sizing decisions and ensures visual harmony. Reproduce as: Interactive type scale builder. Data: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72.
- •[FIGURE — Line length comparison] Shows: Same paragraph at full viewport width vs constrained to 65ch. Teaches: Long lines cause eye-tracking errors; constrained line length improves reading speed and comprehension. Reproduce as: Resizable text container with character count.
- •[FIGURE — Baseline vs center alignment] Shows: Mixed-size text elements aligned to center vs baseline. Teaches: When combining different text sizes, align to baseline for professional appearance—centering creates awkward vertical relationships. Reproduce as: Interactive alignment toggle.
- •[FIGURE — Line height proportionality] Shows: Same text at different sizes with identical vs proportional line-height. Teaches: Large text needs tighter line-height (1.0-1.25), body text needs looser (1.5-2.0). Reproduce as: Font size slider with automatic line-height adjustment.
- •[FIGURE — Link styling options] Shows: Links with color vs underline-on-hover in dense text. Teaches: Colored links can be distracting in text-heavy interfaces; underline on hover preserves readability while maintaining affordance. Reproduce as: Text block with toggleable link styles.
- •[FIGURE — Letter-spacing for headlines] Shows: Large headline with default vs tighter letter-spacing. Teaches: Large text has optical spacing built in; reducing letter-spacing makes headlines feel more cohesive. Reproduce as: Headline with letter-spacing slider.
- •[FIGURE — All-caps readability] Shows: All-caps text with default vs increased letter-spacing. Teaches: All-caps words are harder to recognize; increased letter-spacing improves legibility. Reproduce as: All-caps text with spacing adjustment.
- •[FIGURE — Font personality comparison] Shows: Same UI designed with rounded, serif, and geometric sans fonts. Teaches: Typeface choice significantly affects perceived personality and tone. Reproduce as: UI mockup with font family switcher.
Guidelines
- ✓Pick 2 font sizes for body content (base + small) and 2-3 for headings—avoid the temptation to use every size in your scale
- ✓Set body text to 16px minimum for screen reading; smaller sizes only for captions and metadata
- ✓Constrain line length with max-width on text containers (60-70ch is a good default)
- ✓Increase line-height for smaller text sizes; decrease it proportionally for larger display text
- ✓Never use more than 2 typefaces in a single interface—one for headings and one for body is plenty
- ✓Test readability at actual usage distance and on real devices, not just design tool zoom levels
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall — strengthens long-term retention