“Wer liefert was” Styleguide

As with our logo, the consistent use of our house font Source Sans reinforces the brand identity of “Wer liefert was”.
Source Sans Pro is a serif typeface with a humanistic look. The slightly narrow letters of Source Sans Pro are ideal for user interfaces which offer little space. Source Sans works in print media just as well as it does on the screen.

Source Sans is also available as a webfont and can be found on Google Fonts.
Source Sans webfont

Examples of Source Sans

Source Sans A-Z, numbers, and special characters

In print media, we use a wide range of font widths: Light, regular, semibold, bold and black. We always try to keep the typography light/airy.

• Top headlines should be set in Source Sans Light.
• Source Sans Regular is used for the continuous text.
• We use Source Sans Bold to establish a hierarchy and occasionally to emphasize/highlight text.
• Source Sans Black is used very sparingly, especially for special items such as eyecatchers.
• Source Sans Italics is used for emphasis/highlighting - but only in light and regular.
• Source Sans SemiBold Italic and Source Sans Bold Italic are not used.

Weights

The following weights for the in-house font Source Sans are used in digital media: Light, Regular and Semibold.
The font sizes for the screen follow a harmonious gradation. This facilitates the organization of content and creates a balanced typographic hierarchy. Our largest sizes - Kilo, Mega and Giga - should be used sparingly and only for special content such as “large numbers”.

Font weights and sizes for digital media

To ensure maximum compatibility with browsers and operating systems, Arial is set as the fallback font for the website. Arial is a sans-serif font and can be used without time-consuming adjustments because of the similarity of its tracking.
Arial is used whenever no webfont can be loaded, for example for e-mail newsletters or e-mail communication.

Arial

Continuous text is always left-aligned (ragged).
There are a few exceptions for the use of centered text: large numbers, key points in connection with an icon/symbol, eyecatchers and landing page headings.

✓ Left-aligned body text

✓ Centered text

--

— Do not right-align text

— Do not justify text

It is permitted to set white text on dark colors. We would, however, recommend limiting this to headlines and short texts.
Colored text may not be set on a colored background.
Only exception: the URL in wlw green is placed on wlw blue.

✓ White text on color background

✓ URL in green on blue is allowed

— Color text on color background

— Never add shadows to the text