Typography Best Practices for Modern Interfaces
Typography is the silent ambassador of your brand. Every font choice communicates something about your product before a single word is read. Mastering typography means balancing aesthetics with readability, personality with practicality.
Choosing Your Font Stack
A font stack is a prioritized list of fonts for the browser to use. A well-structured stack looks like this:
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
The strategy is simple: pick one display font that reflects your brand, then fall back to system fonts for performance and reliability. System fonts load instantly because they're already installed on the user's device.
When selecting fonts, consider:
- Readability at small sizes — Body text must be legible at 14px and below
- Character variety — Ensure your chosen font has bold, italic, and medium variants
- License compatibility — Verify the font can be used commercially and embedded in web projects
Establishing a Type Scale
A type scale creates visual hierarchy and rhythm. Here's a practical scale for most interfaces:
| Level | Size | Weight | Use Case |
|---|---|---|---|
| Heading 1 | 36px | Bold | Page titles |
| Heading 2 | 28px | Semi-bold | Section headers |
| Heading 3 | 22px | Semi-bold | Card titles |
| Body large | 18px | Regular | Lead paragraphs |
| Body | 16px | Regular | Default body text |
| Body small | 14px | Regular | Captions, metadata |
| Caption | 12px | Regular | Legal text, hints |
Keep your type scale consistent across all pages. Users should instantly recognize your product by its typographic rhythm.
Line Length and Spacing
The single most common typography mistake is setting line length too wide. For optimal readability:
- Body text — 50–75 characters per line (roughly 60–65 is ideal)
- Headings — Can be wider, but keep them centered or left-aligned consistently
- Line height — 1.4–1.6 for body text, 1.2–1.3 for headings
- Letter spacing — Slightly increase for all-caps headings (+0.5px to +1px)
Never justify text in UI design — the uneven word spacing creates rivers of white space that hurt readability. Left-align or center instead.
Accessibility Considerations
Typography accessibility goes beyond contrast:
- Use at least 16px for body text
- Ensure sufficient color contrast between text and background
- Avoid relying solely on font weight to distinguish elements
- Test with screen readers to ensure proper heading hierarchy (h1 through h6)
- Never use font size alone to convey meaning — pair with icons or labels
Conclusion
Good typography is invisible — users don't notice it when it's done right. They notice when it's wrong. Start with a strong font stack, establish a clear type scale, and never compromise on readability. Your users will read more, understand better, and trust your product more.
