Lesson 1 of 3 · 2 min read
Typography Basics
Typography is arguably the most important element of UI design. The right type choices can make an interface feel premium, while poor typography makes even beautiful layouts feel amateur.
Why Typography Matters
Over 90% of design is typography. The words on your screen carry meaning, and how those words look affects how users interpret them.
Good typography is invisible. Users shouldn't notice your type choices — they should just feel right.
Core Concepts
1. Font Families
There are three main categories:
| Type | Use Case | Examples |
|---|---|---|
| Sans-serif | UI, headings, body | Inter, Roboto, SF Pro |
| Serif | Editorial, long-form | Georgia, Lora, Playfair |
| Monospace | Code, data | JetBrains Mono, Fira Code |
2. Type Scale
A consistent type scale creates visual hierarchy:
--text-xs: 0.75rem; /* 12px — Captions */
--text-sm: 0.875rem; /* 14px — Small text */
--text-base: 1rem; /* 16px — Body text */
--text-lg: 1.125rem; /* 18px — Large body */
--text-xl: 1.25rem; /* 20px — Subheadings */
--text-2xl: 1.5rem; /* 24px — Headings */
--text-3xl: 1.875rem; /* 30px — Page titles */
3. Line Height & Spacing
- Body text: 1.5–1.8 line height
- Headings: 1.1–1.3 line height
- Paragraph spacing: Match your body font size
Exercise
- Pick a primary font for your next project
- Define a 7-step type scale
- Set appropriate line heights for body and headings
- Test readability at mobile and desktop sizes
Key Takeaway
Start with a single, well-designed sans-serif font (like Inter). Master one font before exploring pairings. Consistency beats variety.