Last reviewed: 20 April 2021

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.

Typescale on devices above 768px screen width

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

Typescale on devices below 768px screen width

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

Link

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

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

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