Foundations
Font sizes
Using different font sizes in our content creates a hierarchy. This helps people to find the information they need.
Default font sizes
Here are our default font sizes. For readability, we never use a point size smaller than 16px.
The tables show the difference in our typescale when viewed on different devices.
| Type | Size | Line height | Spacing |
|---|---|---|---|
| Mega | 56px | 84px | Margin bottom 16px |
| H1 | 46px | 69px | Margin bottom 16px |
| H2 | 32px | 48px | Margin bottom 16px |
| H3 | 26px | 39px | Margin bottom 16px |
| H4 | 22px | 33px | Margin bottom 16px |
| H5 | 22px | 33px | Margin bottom 16px |
| H6 | 22px | 33px | Margin bottom 16px |
| Lead paragraph | 26px | 39px | Margin bottom 16px |
| Paragraph | 20px | 30px | Margin bottom 16px |
| Type | Size | Line height | Spacing |
|---|---|---|---|
| Mega | 48px | 72px | Margin bottom 8px |
| H1 | 30px | 45px | Margin bottom 8px |
| H2 | 26px | 39px | Margin bottom 8px |
| H3 | 22px | 33px | Margin bottom 8px |
| H4 | 18px | 27px | Margin bottom 8px |
| H5 | 18px | 27px | Margin bottom 8px |
| H6 | 18px | 27px | Margin bottom 8px |
| Lead paragraph | 22px | 33px | Margin bottom 16px |
| Paragraph | 18px | 27px | Margin bottom 16px |
The default type scale
Heading mega
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead paragraph
Paragraph
LinkCustom font sizes
If you’re designing a user interface where space is tight, for example an app, you might need to use our custom font sizes (also known as font size utilities).
Here are our custom font sizes:
Size 16
Size 18
Size 20
Size 22
Size 24
Size 26
Size 28
Size 30
Size 32
The CSS classes that support our custom font sizes already exist. If you’re unsure, ask the engineers on your team to talk you through them.
Changelog for this page
| Date | Notes |
|---|---|
| 14 April 2021 | First version of page published |