Typography
Introduction
When it comes to building a distinctive and memorable brand, font is our not-so-secret weapon. In this chapter, you'll learn all about our selected fonts and how to use them for maximum impact.
Crafting a key communication? Different typefaces and layout options can help you make the difference. Tackling more everyday materials? Keeping it simple and going with the basics should work just fine.
Primary typeface
DM Sans is a professionally designed typeface by Colophon foundry.
It's an Open Font, allowing us to use it freely as our primary brand typeface, for headlines and body copy.
DM Sans is being made available across the company and will mostly be used in designed items from ATL to BTL and MS Office documents.
You can download the font here.
Secondary typeface
Lora is a professionally designed typeface by Cyreal foundry.
it's an Open Font, allowing us to use it freely as our secondary brand typeface, for intros and highlights.
Lora will mostly be used in literature or newsletters and other applications where there's a lot of copy.
You can download the font here.
System font
The chosen system typeface is Verdana. It is used as a cross-device typeface.
Verdana has been chosen due to its digital-native design and geometric shapes.
Verdana is the backup typeface for those digital applications that do not allow Open Fonts.
You can find Verdana already on your computer.
Cross-language font
When there is a need to type in any language that uses glyphs other than the Latin Set, it is recommended to use both Noto Sans and
Noto Serif as this is a global font available for all modern and ancient languages.
Noto is licensed under the Open Font License.
You can download the font here.
Using the weights
We combine a range of weights across both fonts in a very specific way to create a type style that is uniquely, consistently dsm-firmenich. It also ensures legibility and highlights the right content.
However, each piece of communication is different and the use of typography could be changed accordingly.
When designing a communication remember not to use more than two type weights. This ensures perfect legibility and consistency in all applications.
Here are the type of pairing options that can be used.
Lora can be used when important information needs to be highlighted and the two weights of DM Sans do not provide enough differentiation.
Application examples
Here are some examples of the correct use of typography weights in applications.
Type size guide
To keep things simple, it’s important that a maximum of three type sizes are used per communication. Each type size should be distinctly different in scale from the others. This will help establish a hierarchy and avoid visual confusion.
Type size follows a simple formula: each type size must be a minimum of 50% larger than the preceding type size (rounded to the nearest whole number).
This will prevent too many type sizes that are too close in size from being used on the same page (which would become visually confusing).
Kerning and tracking
Kerning refers to the space between two letters. dsm-firmenich's default kerning setting for DM Sans should always be set to Optical.
Tracking governs the amount of space given to an entire group of letters.
Here are some tracking values to use according to type size.
Note: On Microsoft applications, please use “Normal” Character spacing.
Leading
Leading is the space between lines.
To ensure the type performs optimally across the huge variety of situations in which it will be used and to prevent words from being read out of order, or the eye jumping from line to line instead of left to right, specific leading values need to be used.
Alignment
Basic
Type is always set aligned left following the whole perimeter of the canvas. For a better understanding of the grid, please refer to the 'Grids & layouts' section.
Dynamic
If there is the need to highlight a word or make the text more playful, a dynamic alignment of the typography can be used.
The word to be highlighted can move horizontally on the grid.
In this specific example the word "world" is highlighted, implying that in everything we say, there is a tangible benefit to people, nature, and the planet. We are intrinsically connected to the world around us.
For a better understanding of the tone of voice and the right content to highlight, please refer to the 'Tone of voice' section.
Color
As already mentioned in the "Colors" section, dsm-firmenich is a vibrant and colorful brand.
We highly recommend the use of full-color backgrounds when designing a communication.
Typography should preferably be used in white when applied on colored backgrounds. Black may be applied if the background has lighter color for better contrast. Please refer to the "Logo application" section under "Colors" for application examples.
The only exception is shown in “Color highlight” below.
Color highlight
In a piece of communication when there is the need to highlight a strong concept (and other assets are not enough), one word can be colored with a different color (from the same column of the palette) to ensure outstanding visibility.
Do's
Here are some examples of correct typography usage.
Don'ts
Here are some examples of incorrect typography usage.
