Well-defined typography creates obvious hierarchy and helps to organise information.
The Design System uses the
Open Sans
font for most text and
Nunito Sans
for large headings. These are flexible and readable fonts that work well across digital and print.
Headings
Write all headings in sentence case.
Use the logical order ofh#
tags in code. For example, ah3
heading needs to come after ah2
heading but can be styled as any variant. It's important that
heading tags are used properly
.
Heading extra large
Nunito Sans • ExtraBold • 42pt • Line-height: 56pt • Letter-spacing: normal
Heading large
Nunito Sans • Bold • 34pt • Line-height: 45pt • Letter-spacing: 0.0025rem
Heading medium
Open Sans • Regular • 24pt • Line-height: 32pt • Letter-spacing: normal
Heading small
Open Sans • SemiBold • 20pt • Line-height: 24pt • Letter-spacing: 0.0015rem
Subtitles
Write all subtitles in sentence case.
Use subtitles for sub-section headings and table headings.
Subtitle large
Open Sans • Bold • 16pt • Line-height: 24pt • Letter-spacing: 0.0015rem
Subtitle small and table headings
Open Sans • SemiBold • 14pt • Line-height: 16pt • Letter-spacing: 0.0015rem
Text
Write all body text in sentence case.
Use a minimum of 16pt for body text. 18pt should be used for apps with a lot of text (like intranets or reports).
Body
Open Sans • Regular • 16pt • Line-height: 24pt • Letter-spacing: 0.005rem
Helper text on input fields and other captions
Open Sans • SemiBold • 12pt • Line-height: 20pt • Letter-spacing: 0.0025rem
Helper text on input fields and other captions
Open Sans • SemiBold • 12pt • Line-height: 20pt • Letter-spacing: 0.0025rem
Labels
Open Sans • SemiBold • 14pt • Line-height: 24pt • Letter-spacing: 0.0025rem
Open Sans • SemiBold • 14pt • Line-height: 24pt • Letter-spacing: 0.0025rem
Links
If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
Link style
Open Sans • Bold underline • 16pt • Line-height: 24pt • Letter-spacing: 0.0025rem
Last reviewed
15 November 2022
.
Navigated to Typography - Intelligence Community Design System