🖋️ Typography

Fonts

We use the following fonts on different media (e.g. websites, e-mail, business cards, handouts):

• Poppins: The standard font for all media and printed matter

• Roboto Mono: The monospace font for code fragments

Poppins Thin

Poppins ExtraLight

Poppins Regular

Poppins SemiBold

Poppins Bold

Roboto Mono Thin

Roboto Mono Light

Roboto Mono Medium

Hint

Our logo is an exception that contains the font Lucida Grande.

Font sizes and spacing

We design everything on a scale of 2 (see «Layout & Grid» section). This creates a balanced rhythm across all design elements. Also, this rule applies to the typographic scale, too. Use the factor 1.5 for the line spacing resp. line-height. For the paragraph spacing use 1x or x times the line spacing of the body copy.

The following table refers to the «Poppins» font:

	PRINT (pt)	WEB (px)	SLIDES
Section Title	SemiBold, 48/60	SemiBold, 56/60	128/128
Subline	Thin, 16/24	ExtraLight, 16/24	Regular, 32/48
Main Title / H1	Light, 24/30	Bold, 28/36	SemiBold, 80/120
H2	SemiBold, 18/24	Bold, 24/32	–
H3	SemiBold, 12/18	SemiBold, 20/24	–
H4	SemiBold, 10.5/16	Bold, 16/20	–
H5	SemiBold, 8.5/12	–	–
Leadtext	Regular, 12/18	Regular, 20/24 (25)	Regular, 64/80
Bodycopy	Regular, 8.5/12	Regular, 16/20	Regular, 40/60
Marginalia	Light, 6/12	ExtraLight, 14/18	Light, 20/32

Hint

Section Title

Use to divide sections like chapters. Optionally can be used as a standout title for documents (except letters).

Subline

Subline of the main title. As a completion or informative addon to the main title.

Main Title

The title of the document. Usually only one of this type should exist.

Leadtext

A whort summary of the following content to draw the users into the text.

Bodycopy

The main text. This is the style where the content is written in.

Marginalia

Small notes or additions like footnotes. They have a lower visual priority.

Line lengths

Consider the line lengths to ensure that texts remain legible. A proper line length depends on the medium, the number of columns, and the language. Thus, too general rules of thumb don’t make sense. We have to decide on a case-by-case basis. To help you decide, here are some rough clues:

• Printed matters: 50 - 70 characters (depending if it’s one or two columns)

• Web: ~ 35em

Websites

The standard font-size on websites is 16px. This results in a baseline grid of 20px. Base all other texts and headlines on the baseline grid.

For websites, use the following font stack:

font-stack: 'Poppins', Open Sans', 'Helvetica Neue', 'Helvetica', 'Trebuchet MS', 'Arial', sans-serif

Print matters

Set the body text with 9pt, line spacing with 16pt and the font style «Regular» for printed matters and documents ins standard sizes such as A4.

Vertical Rhythm

Texts in several columns should be on the same baseline. For other font sizes (e.g. headings), select the line spacing as a multiple of 16pt. If a correction space is necessary, you must set it at the beginning of the paragraph. This is necessary for programs that do not have a function to align text to the baseline grid.

Side Notes

Brief information and marginal notes can also be in 6pt and the «Light» style.

E-mail

For e-mails, we use Helvetica Neue or Arial with a size of 12px by default.

Keynotes and presentations

«Poppins» is also used for presentations. The basic font sizes are under «Slides» in the section Font sizes and spacing.

Font colours

These are our primary font colours:

Grey 30 Primary colour on bright backgrounds.

Grey 100 Primary colour on dark backgrounds.