Brand font

Each brand has a display font typically used for headlines and marketing messages, these may come in several weights. Access brand fonts.

Check the Masterbrand Guidelines to understand how to use brand fonts effectively.

Note: Never use a web font without confirmation that you have the correct licence agreement in place.

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights.

The body font stack is a list of system fonts for each operating system. When users view a website or application their device goes through this list and selects the corresponding system font.

To date the current body font stack uses:

• San Francisco - iOS
• Roboto - Android
• Segoe - Windows

Please note operating systems are updated all the time - these fonts may change.

Note: Never use a web font without confirmation that you have the correct licence agreement in place.

Typographic scale

The typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.

Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Using fonts

Brand fonts are typically display fonts. This means they are designed to be used a larger sizes. Using display fonts at small sizes can create legibility issues. We do not recommend using display fonts below 24px.

The body font is the companion to the brand font and used for all UI elements and body text. This typeface has to be extremely flexible and functional. As a result we recommend brands use system fonts rather than bespoke web-fonts for the body. There are several key reasons we use system fonts for body text and UI elements:

• Page weight and download speeds: Similar to images, web-fonts have to be downloaded. When it comes to online banking every byte counts. Using a system font boosts performance because the browser doesn't have to download any font files.
• Multi-lingual applications: Our sites and applications are often multi-lingual and include double-byte character sets (Chinese, Japanese, Korean etc). These fonts use thousands of glyphs which creates huge font files. Using system fonts we have automatic access to these character sets when switching languages.
• Leveraging the smarts: Modern system fonts are specifically designed and created to aid legibility on screen. The geometry, hinting and logic that goes into each glyph works in conjunction with the operating system to ensure that the user always has an optimal reading experience.

To style body copy and text in UI elements we use the body font. This typeface has to be extremely flexible and functional. As a result we recommend brands use system fonts rather than bespoke web-fonts for the body. There are several key reasons we use system fonts for body text and UI elements.

Multi-brand fonts

Similar to the colour system, a reference (variable) is created for each font; brand and body. By using this reference rather than the physical name of the font we can quickly and efficiently implement brand specific typography across multiple applications and brands.

Dos and don’ts

• Do not use display fonts below 24px.
• Do use brand fonts sparingly for headings and call outs.
• Don’t use brand fonts for UI elements or body text.
• Do use body fonts for headings if required.
• Do adjust line heights to suit your needs.
• Avoid using font weights other than those specified.
• Avoid using font sizes other than those specified in the type scale.
• Avoid using all caps unless specified in the master brand guidelines.
• Always ensure that you have the correct license to use web fonts in your applications.

Where is this available?