Typography
About
We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
Our findings were as such:
- 55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
- 69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
- 55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
As a public sector organisation, in addition to testing the above we are required to meet []WCAG 2.1 guidelines at AA standard. Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
Fonts
We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them separately.
Find below, various examples of our typography in use.
DM Sans / headings
The font DM Sans is used with font weight of 400 (regular) and 700 (bold) for heading elements only.
DM Sans font reference
Things to note:
- On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
- Use the regular font weight only as an alternative to the Heading 4 style.
46px - Heading 1
32px - Heading 2
23px - Heading 3
18px - Heading 4
Styles
400 - Regular
700 - Bold
Noto Sans / body copy
The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
Noto Sans font reference
Characters
Font size: 16px / 1rem A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
‘ ? ’ “ ! ” (%) [#] {@} / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *
Styles
400 - Regular
400 - Regular italic
700 - Bold
700 - Bold italic