🖋️ 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

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.