Typography

One of the most important building blocks of any experience, whether online or offline

Our grid system and layouts are all based on the typographic rules we have put in place. These rules must be followed to ensure we're creating the best and most accessible experiences for our customers.

# Typeface

# Type choices

Consider using a single typeface in a variety of sizes and weights, and definitely no more than 2. You may use an expressive typeface for headings and display text, but never for body text or interface elements (e.g. buttons, cells and so on).

You must choose a typeface that works well on both large and small screens. See our typographic system for a list of the sizes we are using.

Brand specific typography guidelines (WIP):

# Body text

By default, body text size is set at 16px. This is also the default font size in most browsers - so it's the font size a lot of customers would be used to.

# Colour

The default text colour is #252525, which is dark grey - not black. Other text colours used in our UI - alerts, validation and so on, can be found in Colour.

Dark text should be used on light backgrounds, and white text on dark backgrounds. If your UI has light and dark themes (for example light and dark modes on Android or IOS), make sure the text is available in a contrasting colour against each theme. This includes promotional content such as hero images and general banners.

Do

  • Only use one typeface
  • Use dark text on light backgrounds - always check colour accessibility

Don't

  • Don't write too much text in a paragraph. See our guide on how we write
  • Don't use a brand's display font for body text
  • Don't write paragraphs of text in all caps

# Hierarchy

Users rely on visual hierarchy when scanning a page: headings summarise content, and body text provides more detail. Create a clear visual hierarchy and customers will be able to easily find the content they're looking for on the page.

Fig 2

Do

  • Create a visual hierarchy with headings, subheadings and body text
  • Make content easy to read, and easy to find

# Text alignment

Default text alignment is ‘left’ for English text. There can be situations where right aligned text is used but this would be for UI only (not marketing material). In future, we should consider ‘right-to-left’ reading languages for default text alignment, such as Hebrew and Arabic.

We should look to use left aligned text where possible, including marketing pages.

# Font weight

Used for emphasising headings or important body text, the variety of weights available are dependant on the font. Used well, it will provide clear textural contrasts allowing for easy reading.

We recommend using bold and regular weights for the majority of the UI. This eliminates the need for extra files and unnecessary font weights, decreasing download times. Additionally, it also reduces ambiguity when selecting a font weight as a designer.

Fig 3

# Letter spacing

We don't recommend altering the letter spacing for text in the body or headings as this can affect the readability of the text.

With that in mind, use altered letter spacing sparingly in editorial or marketing material.

Fig 4

# Banners and imagery

Where possible, don't use any text in an image, especially for mobile devices. When designed in isolation, a banner with text may look fine, but when sized down to a smaller mobile device or a 2 column layout, the text may become unreadable.

All customers, with our without visual impairments and accessibility issues should be able to read text without difficulty. This includes terms and conditions text for sale or credit banners.

# Typographic system

All typography must be sized to one of the set values in the table below. Each text size, in accordance with its line height, has been specifically chosen to work with the baseline grid provided by NBUX.

Font Size Line Height Usage
10px 16px Small print
12px 20px Body small
16px 24px Body - most of our UI will use this size
20px 28px Body large
26px 32px Headline

# Line Length

The optimal line length for body text should be between 40 & 60 characters per line. Aim for these lengths when the viewport is at each of the defined NBUX breakpoints (See Screen sizes). For any viewport width in-between the breakpoints; it's not as important to get right as the percentage of customer usage will be much less.

Try not to fill white space left by text written at the optimal reading length.

Fig 5

# Buttons

Our buttons are always written in sentence case to ensure the highest level of readability and accessibility. We don't recommend using any other cases for button labels, regardless of brand.

See the Buttons component page for more in-depth information.

Last Updated: 10/8/2020, 10:42:32 AM