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.
Universal Sans
Our brand typeface is KLM Universal Sans. We use it across all of our communications for headlines and body copy. KLM Universal Sans is a classic geometric sans. The harmonization of width and height gives it a modern streak. All typography across our brand communications should use our brand typeface. It has been customised for KLM.
There are several available weights and two font variants: Display and Text. The Display variant is applied to headlines and the Text variant to body text. Headlines are presented in the bold font weight. For body text we stick to a regular weight in general, but depending on the use case a medium and bold could be applied as well. For specific platform appliance, please switch to the according tabs on this page.
Universal Sans Display
As mentioned, Universal Sans Display Medium is applied to headlines. This variant contains optical size adjustments such as increased aperture, making it suitable for larger texts.
Universal Sans Text
Universal Sans Text is designed for smaller text sizes and therefore applied to our body copy. Please do not apply it to headlines, the Display variant is optimized for that exact purpose.
System fonts
For digital appliance, we need to have fall-back fonts in place as well. Therefore, we apply a fall-back range including system fonts. Specifically the following fall-back fonts are used:
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif
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 requirement at the very least. Always do a proper check to test if the combination passes this standard. To know what combinations pass the WCAG AA requirements, please visit the Colour page.
Although multiple combinations are possible, there are a couple of combinations that are primarily used for text:
|
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.