Typography

Our typographic system is built on legibility and accessibility. It’s clear, bold and expressive.

Plain

Plain –our house typeface– is a strong part of our visual identity and brand language. We use it both in headings and body text, in varying weights, sizes and styles.

The example above shows Plain in Extrabold. Our standard font weight for big headings.

The example above shows Plain in Extrabold. Our standard font weight for big headings.

Font weights

Font weight refers to how bold or light your text will appear; the higher the font weight, the bolder the text. We use 3 types of font weight. Font weights are important when adding emphasis and hierarchy to your designs. A bold font weight will always draw the user’s attention more than a lighter weight. When using weights in your designs be mindful of this guidance to ensure you create the correct balance and hierarchy.

Extrabold

Extrabold is used for bigger headings (h1 – h4)

Extrabold is used for bigger headings (h1 – h4)

Bold

Bold is user for smaller headings (h5 – h6) and for buttons and links

Bold is user for smaller headings (h5 – h6) and for buttons and links

Regular

Regular is used for paragraphs

Regular is used for paragraphs

Font styles

Font styles refer to the text decorations used to emphasise different features of our typographic styles.

Underline

We use underlines for interactive elements such as links, especially when they are placed inside a block of text.

Links are underlined and using the font weight Bold

Links are underlined and using the font weight Bold

Alignment

This property defines the horizontal alignment of the text. It includes three types of alignment.

Left aligned

This is the preferred way to align text within our products because it makes it easier to identify the start of a new line (for left-to-right languages).

Centre aligned

This alignment should be used sparingly, and should never be considered as the primary way to align text in our designs unless there is a specific need for it to be used.

Right aligned

This alignment should also be used sparingly. This approach is usually found in chunks of complex numeric data, where alignment of the decimals is key to assist readability.