Typography

The Mulish typefaces are available for download, for example, from Google Fonts (https://fonts.google.com). It is available in two different fonts:

1. Static fonts can be used as single typefaces. These are particularly recommended for Office applications.

2. Variable fonts are dynamic and are only contained in one file. This has the advantage that only one HTTP request is needed for digital applications, which means that the content is loaded more quickly.

Arial is only used for digital conversions in which Mulish is not supported by the system, e.g. in e-mail signatures. Arial Black is only used as an alternative for the KWC word mark if Mulish Black is not available in the system. Otherwise, Arial Regular, Arial Bold for emphasis and Arial Italic for quotations apply to most applications. The final font sizes can be found in the respective paragraph formats of the templates and Office templates.

A modular layout system also includes a baseline grid for analogue applications. However, flexibility is limited in order to make the typeface uniform across all possible formats, especially for the small font sizes such as body text. For example, it is possible to align body text completely or headlines only from every first line onwards with the baseline grid.

This ensures the greatest possible flexibility in the layout. The DIN formats used in the print sector – especially the A4 format – serve as a starting point. To determine the unit size of the design grid, we proceed in the same way as for the design principle (see Basic Elements Design Principle). The baseline grid is defined by the relevant unit of the respective format. It is divided by 5. This results in a baseline grid with 2.1 mm = 5.953 pt line spacing (using A4 as an example).

By standardising the baseline grid, different formats can be combined with one baseline grid. The line spacing is 5.953 pt in this case. The baseline grid is part of the design zone (see Design Principle).

In principle, the design zone and the baseline grid are limited to a distance of 1 unit from the format edge in all media. However, this may also vary if the medium is very extensive, such as a catalogue. The design zone and the baseline grid should be limited to a distance of 2 units from the format edge for small and narrow media. In this way, we ensure flawless implementation and processing for printed materials (content is not cut off).

The column grid can be an additional modular building block to organise content even more clearly. It builds on the modular system to ensure a uniform typeface. The number of columns can be selected as required, but should not exceed 4 in total. For example, product overview pages require significantly more columns than a regular introduction page. There are various templates available for this purpose. However, the column spacing should be as consistent as possible in the medium and be a half unit.

The height of the columns can also be adjusted flexibly and is created in accordance with the use and medium. The distance does not always have to be calculated with a fixed unit size, but may also be created with an additional half unit.

The font is always aligned with the baseline offset of the uppercase height so that it can be positioned without any problems. The character spacing is 10, and the kerning is metric. The alignment is always left-justified. In order to maintain more flexibility in the layout, headlines, toplines and sublines are only aligned with the baseline grid from every first line.

Colours
All text is always black or white on dark backgrounds. However, there are exceptions when it comes to display colours.

Font size
The font size of headlines is generally flexible and can be from 12.5 pt as required. The size of sublines and toplines is derived from the headlines. Depending on the layout, it is 60% of the headline size and is thus somewhat smaller than the headline.

The following formula applies to the calculation of the topline and preline, which can also be conveniently calculated automatically in InDesign – here is an example of 24 pt:

24 pt × 60% = 29.76 pt topline and/or preline size

Topline
Mulish ExtraLight is used for toplines. The font size is smaller than the headline and is 60% of the headline size. The spacing from the headline is 124%. Further lines within the topline are again calculated at 124% (derived from the size of the topline).

Headline
Mulish ExtraLight is used for headlines. The font size is freely scalable and is set with a line spacing of 124%.

Subline
Sublines are also 60% smaller than headlines. However, the spacing from the headline must be calculated from the first line with a line spacing of 110% (derived from the headline). Further lines within the subline are again calculated at 124% (derived from the size of the subline).

All line spacing has been pre-defined in the templates. However, if a manual calculation is required, this can be done easily using the following formula, which can also be conveniently calculated automatically in InDesign – here is an example of 24 pt:

Topline: 24 pt × 124% = 29.76 pt line spacing
Preline: 24 pt × 110% = 26.4 pt line spacing

There are different text elements for the large number of different media, which can be used as required. These are the most common text elements:

Body text
Body text is set in Mulish Light in 9 pt with line spacing of 132%. The character spacing is 10, and the kerning is metric.

Paragraph heading
Paragraph headings are slightly larger than the body text and set in Mulish ExtraBold. The text size is 12.5 pt in black with line spacing of 132%. The character spacing is 10, and the kerning is metric.

Highlighting
Highlighting in the text is set off in black in Mulish ExtraBold in 9 pt with line spacing of 132%. The character spacing is 10, and the kerning is metric.

Captions, footnotes and margin notes
All text modules are set in Mulish Light in 7 pt with line spacing of 132%. The character spacing is 10, and the kerning is metric. The grid always applies only to each first line. Display highlighting can generally be set in Mulish ExtraBold.

For media with a focus on brochures or magazines, additional text elements such as quotes, introductory texts, etc. can be used:

Large introductory text
This version of introductory texts is set off in Mulish ExtraLight in 12.5 pt or larger and with line spacing of 132%. The character spacing is 10, and the kerning is metric.

Small introductory text
This small version of introductory texts is set off in Mulish ExtraBold in 9 pt with line spacing of 132%. The character spacing is 10, and the kerning is metric.

Quotes
If you want to emphasise quotes or particularly important text passages in your communication, you can use the Mulish ExtraLight Italic font style. Use Mulish ExtraBold for the author of the quote or the source below it. Quotes that are to be incorporated more casually into the text are left in the definition of body text. Quotes can be defined freely from a size of 12.5 pt with line spacing of 132%. The character spacing is 10, and the kerning is metric. The source or author of the quote is in a smaller font of 7 pt. Quotes should be placed at least 1 unit away from the respective text.

Numbering
Text used in numbering is in 9 pt Mulish Light. Line spacing is 132%. The character spacing is 10, and the kerning is metric. The numerals are spaced 4.2 mm apart in Mulish ExtraBold. Space between paragraphs is set to 2.1 mm.

Bulleted list
Bulleted lists are in 9 pt Mulish Light. Line spacing is 132%. The character spacing is 10, and the kerning is metric. The bullets are 50% smaller than the original glyph in Mulish ExtraBold, spaced at 2.1 mm. Space between paragraphs is set to 2.1 mm. In the second hierarchy level, the full bullets become empty circles for better differentiation.

Separators
Dashes from the glyph set of Mulish are used as separators. These separators provide more structure and thus increase readability. The spacing of the separators before and after the text is equivalent to an en dash.

The brand field can also be used deliberately as a medium for content, such as in advertisements. It is important to decide beforehand how much text should be included. The size of the brand field depends on this. The brand field can be set flexibly in different sizes (see chapter Design Principle). Note: the brand field with text may be only so small that the content is still legible at 9 pt.

In principle, the font size is flexible. However, the defined 9 pt font size and the defined line spacing of 132% must be maintained for body text. The size of headlines can be set as desired.

The text layer in the brand field is reduced by a minimum of 1 unit so that the text can be centred. In the text frame, the uppercase height must be specified under the baseline options so that the text can be docked to the defined frame. This way, the text flow can be composed either from top to bottom or from bottom to top.

KWC product names are always written in black in capital letters. This puts the focus clearly on the product and the brand. The fonts used for this are Mulish Black as the logo font for the KWC brand (metric, character spacing = 0) and ExtraLight (metric, character spacing = 10) for the product name. The font size can be selected freely and used flexibly.

All features should be displayed in tabular format in order to ensure greater consistency. The colour is generally black, or white when used with dark backgrounds. (Kerning metric, character spacing = 0)

Feature header
The header of the feature listing always contains the product name. KWC is always set to Mulish Black and the name to ExtraLight. The size can be selected freely and separated from the listing by a thin line in 0.25 pt

Article number
The article number is generally set to ExtraBold so that it can be found more quickly.

Features
These are set to bullet form or body text. The font size here is 9 pt or even 7 pt for large amounts of text. Line spacing is 132%.

The first line in tables is based on the baseline grid. Tables are set in black, but can be highlighted in KWC Red for special displays. Kerning is metric, and character spacing is 10. Dividing lines are variable and can be used in accordance with the purpose and structure.

Table header
The table header contains the relevant product names or headlines. The font size used here is 12.5 pt.

Table content
Body text is set to 9 pt Mulish Light. Article numbers are generally highlighted in Mulish ExtraBold so that they can be found more quickly.

Footnote or source
The font size used here is 7 pt, with line spacing of 132%. The spacing between text and the table is a half unit.

Tables providing an overview
With the help of tables, content can also be used as a guide. The layout in the first line is based on the baseline grid. The overview is generally in black. Kerning is metric, and character spacing is 10.

Mulish ExtraLight is used for the table header. The font size in this case is 12.5 pt and separated from the table content by a thin line in 0.25 pt. Products are listed in 9 pt Mulish Black and Light. Highlighting, such as “NEW”, uses uppercase Mulish ExtraBold and KWC Red.

Eye-catchers are used to emphasise certain content. The eye-catcher elements are generally square in design and in the KWC Red brand colour.

Mulish ExtraLight and optionally Black in upper case are used for eye-catchers. The font size may vary. Kerning is metric, and character spacing is 10. The number of characters is variable, but should be limited to around 25 characters. The text is centred and placed inside the square. The space from the margin should be at least 1/8 of the total surface area of the square.