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

View code on GitHub.