TL;DR:
- Match font to brand: sans-serif (modern), serif (editorial), display (creator), system (brutalist).
- Max 2 fonts per page. Body 16px+ for readability.
Font Categories
- Modern sans ??” Inter, Plus Jakarta, IBM Plex.
- Editorial serif ??” Cormorant, Playfair, Caudex.
- Display / creator ??” Cherry Bomb, Alkatra, Bungee.
- Monospace / tech ??” JetBrains Mono, IBM Plex Mono.
- System (brutalist) ??” Helvetica, Times New Roman.
Best Practices
- Max 2 fonts per page (heading + body).
- Body 16px+ for mobile readability.
- Strong hierarchy via size + weight.
- Test on mobile.
Key Takeaways
- Match font to brand voice.
- Max 2 fonts; 16px+ body.