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