Quick answer
Choose website fonts for readability first and personality second, limit yourself to one or two families, build a simple colour palette and check contrast meets WCAG's 4.5 to 1 ratio for normal text.
Key takeaways
- Choose fonts for readability first and personality second.
- Limit yourself to two fonts and a small colour palette.
- Check colour contrast to meet accessibility standards.
- Document choices in a simple style guide for consistency.
How do you choose fonts?
Body text needs to be easy to read on every screen. Use a clean sans-serif or readable serif at 16 pixels or larger, with generous line spacing.
| Font style | Feels like |
|---|---|
| Geometric sans-serif | Modern, clean |
| Humanist sans-serif | Friendly, approachable |
| Serif | Established, trustworthy |
| Display or script | Expressive, headings only |
How do you pair fonts and protect speed?
- Use one font for headings and one for body, or one family with several weights.
- Load only the weights you use.
- Self-host fonts and prefer variable fonts.
How do you build a colour palette?
- Primary colour for key actions.
- Secondary colour for variety.
- Accent colour used sparingly.
- Neutrals for text and backgrounds.
Associations vary by culture, so test with your audience.
How do you check contrast?
WCAG recommends at least 4.5 to 1 for normal text and 3 to 1 for large text. Free tools such as the WebAIM contrast checker make testing easy.
What mistakes should you avoid?
| Mistake | Better approach |
|---|---|
| Too many fonts | Stick to one or two |
| Light grey text on white | Use darker text that passes contrast |
| Brand colour everywhere | Reserve it for buttons and highlights |
| Tiny body text | Use at least 16 pixels |
How do you test and record your choices?
View pages on several phones, in bright light and in dark mode. Ask a few people to read a paragraph and find a button. Then record fonts, colour codes and button styles in a short style guide.
Our website design team can build a palette and type system that works for everyone.
Bottom line
Choose readable fonts and a small, accessible palette, then write the choices down. Simple and consistent almost always beats clever.
