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:

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