Style Typography
Text is the primary way users digest information and complete tasks, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximise legibility.
Font
The primary font used in ONS digital products is Open Sans (opens in a new tab) . Stylistic set 1 is used because it includes the more accessible opentail lowercase ‘g’, and serifed capital ‘I’.
Open Sans, with its broad range of weights and extensive unicode support was chosen to provide a good balance between legibility, personality and readability. As the majority of our User Interface (UI) is text-based, we use weight and size to denote hierarchy and separation between content. Open Sans’ letterforms also provide a good level of contrast which aid readability on poorer quality displays and for users with visual impairment.
Font family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif
Font weights
- Bold: 700
- Regular: 400
Type scale
Using the type scale classes on text elements, the type is sized appropriately above and below the medium breakpoint.
Headings
Heading defaults are as follows:
Breakpoint headings
Font sizes can be triggered at certain breakpoints. Just suffix any font size class with @{breakpoint}
, for example, ons-u-fs-m@l
Paragraphs
The base font size for paragraphs is 18px.
Links
Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.
External Links
Links to external websites using the onsExternalLink
macro will have the attributes target="_blank"
to open websites in a new tab, and rel="noopener"
to guard against a security vulnerability which can be exploited by malicious websites.
Lists
Use lists to break up blocks of text into concise, manageable chunks to make it easier to read.
Bulleted list (default)
Bulleted lists should be introduced with a lead-in line, ending in a colon.
Each item in the list should start with a lowercase letter and should not end with a full stop.
Numbered list
Numbered lists should be displayed in place of bulleted lists when the order of items is relevant.
Each list item should be a complete sentence, therefore start with an uppercase letter, and end with a full stop.
You do not need to introduce a numbered list with a lead-in line.
To use a numbered list when using the list macro you need to not be using a bare list and set the element
parameter to “ol”.
If there is only one item in the list when using the list macro it will render the item in <p>
tags and not a list with no list styling added.
Bare list
Bare lists should be used to display a list of navigational links, for example, a group of related pages displayed in the footer.
Dashed list
Dashed lists should be used to display a list of content navigational links.
Prefixed list
The prefix list allows each list item to contain a string as a prefix to the item. The prefixed string uses our monospaced font to ensure spacing and alignment is correct.
Suffixed list
The suffix list works the same as the prefix but just comes after the list item and the full stop isn’t included.
Inline list
Inline lists should be used to display a horizontal row of links, for example, a list of pages displayed in the transactional footer.
Lists with icons
There is specific guidance on how to use the available set of icons.
List with icon prefix
This example uses "iconPosition": 'before'
and the iconType
parameter on this list to show the check before each item.
List with icon suffix
This example uses "iconPosition": 'after'
and the iconType
parameter on this list to show the check after each item.
Inline list with social media icon prefix
This example uses "variants": [ 'inline', 'social']
, "iconPosition": 'before'
and "iconSize": 'xxl'
on the list, with the iconType
parameter set on each item to show the social icons.
Highlighting
Highlighting should be used to add emphasis to particular words in a heading, a user may otherwise miss. It can be used to indicate a calculated or piped value which was entered previously by the user and is being displayed in a new context.
Only apply highlights using the semantic emphasis tag (<em>
) with the class .ons-highlight
.
Quotes
Use when displaying a short quote.
Addresses
Use when displaying an address.
Indented text
Use when you need information to stand out from the rest of the content on a page, for example, when providing contact information.
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)