🖋️ Typography#


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


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)


Section Title

SemiBold, 48/60

SemiBold, 56/60



Thin, 16/24

ExtraLight, 16/24

Regular, 32/48

Main Title / H1

Light, 24/30

Bold, 28/36

SemiBold, 80/120


SemiBold, 18/24

Bold, 24/32


SemiBold, 12/18

SemiBold, 20/24


SemiBold, 10.5/16

Bold, 16/20


SemiBold, 8.5/12


Regular, 12/18

Regular, 20/24 (25)

Regular, 64/80


Regular, 8.5/12

Regular, 16/20

Regular, 40/60


Light, 6/12

ExtraLight, 14/18

Light, 20/32


Section Title
Use to divide sections like chapters. Optionally can be used as a standout title for documents (except letters).
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.
A whort summary of the following content to draw the users into the text.
The main text. This is the style where the content is written in.
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


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


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.