Typography
Type Scale and Typeface Choice
A consistent size scale and disciplined typeface selection that creates hierarchy
Key Insight
UI typography starts with choosing one sans-serif typeface for body and UI text. A second typeface - a display or serif - can be added for headings to create personality contrast. Use regular and bold weights only; intermediate weights (500, 600) create visual muddle. Build a type scale of 4-6 distinct sizes; resist adding sizes outside the scale. Font size communicates hierarchy - only change size when hierarchy genuinely differs.
Key Points
- •One sans-serif for UI and body text; optionally one display typeface for headings
- •Use only regular (400) and bold (700) weights - avoid intermediate weights in UI
- •Type scale: 4–6 steps, each meaningfully different from adjacent steps
- •Heading hierarchy from size, not just weight - scale must be visibly distinct
- •Body text: 16–18px minimum for comfortable reading at arm's length
Guidelines
- ✓Test typeface at 12px and 40px before committing - some fonts degrade at extremes
- ✓Use a licensed typeface or a high-quality free font (Inter, Source Sans Pro, etc.)
- ✓Create a Figma or CSS type scale before designing any screens
- ✗Avoid system fonts in branded products - they lack personality and cross-platform consistency
- ✓Check that bold weight is visibly different from regular at every scale step
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention