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.

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

Get support

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.

#experience-library-support

Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.