Typography plays a vital role in providing a recognisable and legible digital experience. Discover the typefaces we use and how we apply them on each platform.
Excellence in Motion
"Excellence In Motion" is our primary typeface and used throughout all communication. The typeface comes in several font weight, which we apply appropriately in order to create rhythm and hierarchy for our digital products. For every platform, we defined specific weight and size classes.
How to apply
You can find me in Figma, under the 'Text styles' panel.
Sizing and line heights
Our size increments for titles come close to a major third typographic scale. For body copy, it’s closer to a minor third scale, as smaller increments are required.
Our font sizes and line height are optimised to align with a baseline grid of 4px — precision is required for a well-balanced and legible set. In general, the body copy line height should be around 150% of the font size. We slightly round these numbers up or down according to the baseline grid.
Text colour and accessibility
To create accessible products, it’s very important to apply the correct colour to your text. The combination of the foreground and background colours should pass the WCAG AA standard at the very least.
Always do a proper check to test if the combination passes this standard. Although multiple combinations are possible, there are a couple of combinations that are primarily used for text listed below. For all possible combination please see our color contrast matrix.
|
Primary 900 |
Our default body text colour, which provides excellent contrast. Not just on a white background, but also on light-coloured backgrounds. |
|
Grey 900 |
Can be applied to secondary text and also works on light or light grey colours (such as Grey 100 and Grey 200). |
|
Grey 700 |
Can be applied to secondary or tertiary text, but should be used on white. |
|
Primary 500 |
Regularly used in our components. Mostly for actionable items, used in combination with white. |
Text on images
Text on an image should be applied carefully. As viewport sizes vary and elements and components scale accordingly, the control we have over the part of the image that is covered by text can get lost. Since the text should offer sufficient contrast in order to pass a AA standard, there are a few considerations to keep in mind when applying this:
- Make sure the text colour offers sufficient contrast with the background (the part of the image that can be covered by text). The best way to do this, is to colour-pick the part of the image that would result in the worst-case scenario and use a contrast checker to check the ratio.
- When the image is unpredictable (when it is not “fixed”, picked by another party and/or can vary often), make sure to work with an overlay that results in sufficient contrast.
- Never embed text in the image itself. The text should be a separate layer (in code) to prevent quality issues and to keep the content accessible.
Text alignment
An interface consists mostly of text. Text alignment is important and affects how we scan the content on the screen. In general, left aligned text results in the best readability and helps avoid unnecessary eye jumps making everything much easier to follow.
Left align text as much as possible
As a general rule we apply left-alignment to text as this provides the best reading experience. Center alignment should be avoided — it can only be applied in rare situations and when text is no longer than two lines.
Hanging alignment
In some situation a so called hanging alignment would be beneficial. Hanging alignment helps to create a clear eye path for the text and eliminating zig-zag eye jumps. This helps to establish a clear hierarchy for UI elements that don’t have the same visual weight as the text, such as icons, bullets, or quote commas.
Typography styles
Text styles and sizes are managed in a platform-specific way. While there is overlap, each platform has its own demands and technical restraints regarding typography styles and sizing. Please see the platform-specific pages within this section for more details.