Design standards

Typography

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)

Typography is subject to the viewport scale.

Type 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

You should use multiples of 0.25rem (roughly 4px).

Line length

The optimal line length of text is around:

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

Brand font

You should use Proxima Nova.

You should only use the weights:

  • semi-bold
  • light

Use "djy7snj" for the Adobe Fonts embed code. This code is valid for all of Barnardo's products.

Body copy

You should use the system-ui generic font family.