How to use
Perfect alignment
The two font families of our brands are perfectly aligned to ensure a consistent design and implementation.
|
Air France |
KLM |
|
Excellence In Motion Display |
Universal Sans Display |
|
Excellence In Motion Text |
Universal Sans Text |
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.
Display variant
For large Display titles and Headlines.
Text variant
For all other texts.
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.
|
aero-color-text-default |
Our default body text colour, which provides excellent contrast. Not just on a white background, but also the default background token. |
|
aero-color-text-alternative |
Can be applied to secondary text and also works on the default background. |
|
All other text color tokens |
The other text tokens like active and even disabled provide enough contrast when used on the default background. |
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 the surface overlay tokens 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 Styles
All styles serve a specific purpose. Text styles define the visual hierarchy and tone of your content. Each text style has been crafted with intent. Font size, weight, line height, and letter spacing are carefully tuned to optimize readability and accessibility across different screen sizes and platforms.
- Display for very large titles, for example landing pages
- Headline for all other titles
- Body for long texts (Medium Regular is the default)
- Label for short and small texts
