Typography
Overview
Users absorb information, follow instructions and complete tasks primarily through reading text. It is important to use good typographic principles to establish a visual hierarchy and present content as clearly as possible.
Our typefaces
At the Office for National Statistics (ONS) we use four typefaces for consistency across our content.
Primary typeface
Our primary typeface is Open Sans as it is well-balanced between personality and readability. It should be used across all print and digital communications and is available to anyone with an Adobe Creative Cloud license.
View and download Open Sans in Adobe Fonts (opens in a new tab)
We use Open Sans Light, Regular, Semibold and Bold to create hierarchy and emphasis.
The letterforms have a good level of contrast, which boosts readability on poorer quality displays and helps users with visual impairments.
Always use Open Sans, with “stylistic set 1” turned on in the Opentype options to use a more accessible “g” and “I”
Alternative typeface
For on-screen communications where Open Sans is not available, such as PowerPoint presentations, Arial is our alternative typeface.
When using Arial, headings and subheadings are set in bold and body copy should be set in regular.
Do not use Arial in printed materials
Translation typeface
Some of our communications are available in different languages. In these instances, Noto Sans should be used for all our translated materials.
We use Noto Sans Light, Regular, Semibold and Bold to create hierarchy and emphasis. For consistency we always set Noto Sans in sentence case.
View and download Noto Sans and its language variants from Google Fonts (opens in a new tab)
Logo typeface
Dax Pro should only ever be used for the ONS logo.
Applying our typography
Typography is important for creating a visual hierarchy. A hierarchy guides a user's attention to certain areas of text by using weight, colour and size.
The largest element on the page naturally draws the eye first and ensures users read the information in the order you want them to.
Applying our type styles in a consistent manner across our communications will build hierarchy and brand recognition with our users. They help to create impactful, informative statements and content that is easy to skim.
Type styles
Our type styles work best on a white background and should be used on standard A4 text-heavy materials, such as reports, letters and handbooks.
When you need to use a coloured background, we recommend using white text.
Always maintain the relationship between the text size and the space between lines of text, as this improves the readability of the content.
Sizes may need to be adjusted according to the content and format of the document.
For digital products, follow the guidance on the design system typography page
Element | Weight | Size | Leading | Tracking | Colour/style |
---|---|---|---|---|---|
Document title | Bold | 36pt | 44pt | -10VA | Night blue |
Subtitle | Bold | 24pt | 30pt | -10VA | Aqua teal |
Heading one | Bold | 24pt | 30pt | -10VA | Night blue |
Heading two | Bold | 18pt | 24pt | -5VA | Night blue |
Heading three | Semibold | 14pt | 18pt | 0VA | Night blue |
Heading four | Semibold | 12pt | 16pt | 0VA | Night blue |
Body copy | Regular | 12pt | 16pt | 0VA | 95% Black |
Bullet points | Regular | 12pt | 16pt | 0VA | Point: Aqua teal Text: 95% Black |
Pull quote large | Bold | 36pt | 48pt | -10VA | Aqua teal |
Pull quote small | Regular | 16pt | 22pt | -10VA | Border: 2mm Aqua teal Text: 95% Black |
Product code | Semibold | 10pt | 14pt | 0VA | 95% Black, Uppercase, Rotated 90° CW |
General typesetting guidance
Paragraph spacing
Spacing between paragraphs should be of equal proportion throughout our documents. This is normally set at a minimum of 2pt.
The final paragraph at the end of a section of content should be followed by double the amount of space used between paragraphs.
This shows that the section has come to an end and the next section contains information on a different topic.
Case setting
All text should use sentence case. Sentence case involves capitalising only the first word and any proper nouns in titles, chapter, and section headings.
Product codes are an exception and should be capitalised.
Alignment
Content should always be aligned to the left hand-side of a page.
Do not fully justify your content as it is harder to read.
Styling
Bold, semi-bold and the use of colour can be used to highlight specific areas of text when required but cannot be solely relied upon to show importance.
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)