Design

Typography

Brand font

You should use Proxima Nova.

You should only use the weights:

  • 300 (light)
  • 600 (semi-bold)

Use ‘djy7snj’ for the Adobe Fonts embed code. This code is valid for all Barnardo’s products.

Body font

You should use the system-ui generic font family.

You should only use the weights:

  • 300 (light)
  • 600 (semi-bold)

Type scale

You should use:

  • a base size of 1rem (roughly 16px) for body copy
  • exponents of 1.125 for other type sizes (major second type scale)

To create a consistent type hierarchy using these standards, you should use the type components.

Typography is subject to the viewport scale.

This content is for children and young people
1rem / 1.125^2 (roughly 13px)
This content is for children and young people
1rem / 1.125^1 (roughly 14px)
This content is for children and young people
1rem (base size)
This content is for children and young people
1rem * 1.125^1 (roughly 18px)
This content is for children and young people
1rem * 1.125^2 (roughly 20px)
This content is for children and young people
1rem * 1.125^3 (roughly 23px)
This content is for children and young people
1rem * 1.125^4 (roughly 26px)
This content is for children and young people
1rem * 1.125^5 (roughly 29px)
This content is for children and young people
1rem * 1.125^6 (roughly 32px)
This content is for children and young people
1rem * 1.125^7 (roughly 36px)

View type scale code and type scale research on GitHub.

Line height

To make layouts align, you should use multiples of 0.25rem (roughly 4px) for line height.

Line length

The optimal line length of text is around:

  • 15–40 characters for short lines
  • 40–95 characters for body copy