Typography
About
As a public sector organisation 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 seperately.
Find below, various examples of our typography in use.
Open Sans / headings & body
Things to note:
- On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
46px - Heading 1
32px - Heading 2
23px - Heading 3
18px - Heading 4
The font Open 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.
Open Sans font reference
Characters
Font size: 16px / 1remA 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 - Regular400 - Regular italic
700 - Bold
700 - Bold italic