Typography is a crucial element that allows you to present your design, organize content, clear hierarchies and drive the user through the product or experience as clearly and efficiently as possible.
Daimler's brand font is Daimler CS. The light weight is used for all body text, headlines are set in bold.
The Daimler CS web fonts can be downloaded by registered users via the Daimler Brand & Design Navigator after additional authorization has been granted by the administrator. The web fonts have been licensed for all projects directly related to Daimler.
Headlines are set in bold, in some rare exceptions headlines can also be set in the light font-weight. The font size of headlines is big and prominent, so that a clear visual hierarchy is established.
Default font alignment for headlines is left. It is also possible to right-align headlines if they are placed on images. This way editors and designers have more layout flexibility in case sensitive parts of an image are covered by the headline.
If headlines are positioned on images, they are placed on a black or white background. Articles use a black background, teasers and overview pages use a white background. This way readability of text on images is guaranteed at all times. Please note that this headline treatment is exclusively reserved for text on images.
Find an overview of all headline sizes in the Sketch Design Kit.
The typical Daimler typography looks clean and is set in a large and easy-to-read font size. Use a single-column layout for articles and make sure that the font size is large enough. Be careful with long lines of text – too many words in a line of text makes it hard to read. As a rough guideline do not fit more than 120 to 150 characters in a single line of text.
If you want to place special emphasis on text, do not use italics but the bold font-weight instead. Italics are reserved for quotes and image captions. Text-links are underlined and coloured in petrol for easy identification.
To get an overview of all font-sizes, please refer to the Sketch Design Kit.
2.7.3.Font sizes and responsive behaviour
Font sizes behave responsively like the rest of the design system. A headline on a desktop viewport is larger than the same headline on a mobile screen. To understand the behaviour of each text size, refer to the Sketch Design Kit. It includes predefined font-styles for each layout-breakpoint.
2.7.4.Daimler Financial Services text styles
Daimler Financial Services (DFS) is a sub-brand of Daimler and uses its own distinctive text style. Headlines on DFS websites are set in Daimler CS extra-bold and written all-caps. In contrast to headlines on daimler.com, they are never placed on a background when positioned on an image. Body text uses the same styles on both daimler.com and DFS websites.
You can use predefined, responsive font styles in the Sketch Design Kit. These styles will help you to design typography across all layout-breakpoints that is consistent with daimler.com's styles and behaviour.