We're creating a new front-end 'Experience Kit'
For more information go to the #Experience-library-support Slack channel (Co-op colleagues only).
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
For readability, we never use a size smaller than:
- 40px when using Co-op Headline
- 16px when using Avenir Next on sizes larger than mobile
- 14px when using Avenir Next on apps and the smallest device sizes
The tables show the difference in our typescale when viewed on different devices.
Font | Level | Size | Line height | Spacing |
---|---|---|---|---|
Co-op Headline (uppercase) | Mega | 82px | 100% | Margin bottom 16px |
Co-op Headline (lowercase) | Mega | 82px | 105% | Margin bottom 16px |
Avenir Next | Mega | 56px | 84px | Margin bottom 16px |
Co-op Headline (uppercase) | H1 | 64px | 100% | Margin bottom 16px |
Co-op Headline (lowercase) | H1 | 64px | 105% | Margin bottom 16px |
Avenir Next | H1 | 46px | 69px | Margin bottom 16px |
Avenir Next | H2 | 32px | 48px | Margin bottom 16px |
Avenir Next | H3 | 26px | 39px | Margin bottom 16px |
Avenir Next | H4 | 22px | 33px | Margin bottom 16px |
Avenir Next | H5 | 22px | 33px | Margin bottom 16px |
Avenir Next | H6 | 22px | 33px | Margin bottom 16px |
Avenir Next | Lead paragraph | 26px | 39px | Margin bottom 16px |
Avenir Next | Paragraph | 20px | 30px | Margin bottom 16px |
Font | Level | Size | Line height | Spacing |
---|---|---|---|---|
Co-op Headline (uppercase) | Mega | 64px | 100% | Margin bottom 8px |
Co-op Headline (lowercase) | Mega | 64px | 105% | Margin bottom 8px |
Avenir Next | Mega | 48px | 72px | Margin bottom 8px |
Co-op Headline (uppercase) | H1 | 48px | 100% | Margin bottom 8px |
Co-op Headline (lowercase) | H1 | 48px | 105% | Margin bottom 8px |
Avenir Next | H1 | 30px | 45px | Margin bottom 8px |
Avenir Next | H2 | 26px | 39px | Margin bottom 8px |
Avenir Next | H3 | 22px | 33px | Margin bottom 8px |
Avenir Next | H4 | 18px | 27px | Margin bottom 8px |
Avenir Next | H5 | 18px | 27px | Margin bottom 8px |
Avenir Next | H6 | 18px | 27px | Margin bottom 8px |
Avenir Next | Lead paragraph | 22px | 33px | Margin bottom 16px |
Avenir Next | Paragraph | 18px | 27px | Margin bottom 16px |
Font | Level | Size | Line height | Spacing |
---|---|---|---|---|
Co-op Headline (uppercase) | Mega | 48px | 100% | Margin bottom 8px |
Co-op Headline (lowercase) | Mega | 48px | 105% | Margin bottom 8px |
Co-op Headline (uppercase) | H1 | 40px | 100% | Margin bottom 8px |
Co-op Headline (lowercase) | H1 | 40px | 105% | Margin bottom 8px |
The Avenir type scale
Heading mega
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead paragraph
Paragraph
LinkThe Co-op headline type scale
Heading mega
Heading 1
Heading mega
Heading 1
Example combinations
Heading mega
Lead paragraph lead paragraph lead paragraph lead paragraph lead paragraph lead paragraph lead paragraph lead paragraph.
Heading 2
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Heading 1
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph.
Custom 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 14
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 |
---|---|
15 Aug 2024 | Co-op Headline typescale added |
14 April 2021 | First version of page published |