We're creating a new front-end 'Experience Kit'

For more information go to the #Experience-library-support Slack channel (Co-op colleagues only).

Last reviewed: 15 Aug 2024

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.

Typescale on devices above 768px screen width

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

Typescale on devices below 768px screen width

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

Typescale on devices below 600px screen width

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

Link

The 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.

Heading 1

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