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 , defaulting to stylistic set 2 (for open g’s).
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 stack: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif
Type scale
Using the type scale classes on text elements, the type is sized appropriately for the following breakpoints:
Viewport < 740 | Viewport >= 740 |
---|---|
ons-u-fs-xxxl Open Sans Bold - 1.7rem/32px |
ons-u-fs-xxxl Open Sans Bold - 2.6rem/48px |
ons-u-fs-xxl Open Sans Bold - 1.5rem/28px |
ons-u-fs-xxl Open Sans Bold - 2rem/36px |
ons-u-fs-xl Open Sans Bold - 1.4rem/26px |
ons-u-fs-xl Open Sans Bold - 1.6rem/30px |
ons-u-fs-l Open Sans Bold - 1.3rem/24px |
ons-u-fs-l Open Sans Bold - 1.4rem/26px |
ons-u-fs-m Open Sans Bold - 1.1rem/20px |
ons-u-fs-m Open Sans Bold - 1.2rem/22px |
ons-u-fs-r–b Open Sans Bold - 1rem/18px |
ons-u-fs-r–b Open Sans Bold - 1rem/18px |
ons-u-fs-r Open Sans Regular - 1rem/18px |
ons-u-fs-r Open Sans Regular - 1rem/18px |
ons-u-fs-s–b Open Sans Bold - 0.7rem/14px |
ons-u-fs-s–b Open Sans Bold - 0.7rem/14px |
ons-u-fs-s Open Sans Regular - 0.7rem/14px |
ons-u-fs-s Open Sans Regular - 0.7rem/14px |
Font weights
<ul class="ons-list ons-list--bare"><li class="ons-list__item">
<b>Bold: 700</b></li><li class="ons-list__item">
Regular: 400</li></ul>
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
This text will change font size depending on viewport width
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. lass="token punctuation">}
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.
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 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.
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 style
Let us know how we could improve this style or share your user research findings.
+++ Discuss the ‘Typography’ style on Github