Overview
Our typography system helps create clear visual hierarchy and ensures excellent readability across all devices and contexts. We want our words to be easy to read and understand.
Do
- Use large text for better legibility
- Give content plenty of breathing room
Don't
- Use low contrast colour combinations
- Use uppercase text unnecessarily
- Add drop shadows or text effects
Font families
Type scale
We use the same scale across all our fonts to maintain consistency. Our article and interface fonts also come in different weights. Use these thoughtfully to improve readability, not just for decoration.
| Size | Emphasised | Editorial | Interface |
|---|---|---|---|
48px 5xl | Display | Display | |
36px 4xl | Heading | Heading | |
30px 3xl | Heading | Heading | |
24px 2xl | Heading | Heading | |
20px xl | Heading | Heading | |
18px lg | Body | Body | |
16px base | Body | Body | |
14px sm | Body | Label | |
12px xs | Caption |