Skip to content
Designsystem – STEPS Leaders
Logo
Colours
Typography
Icons
Forms & Button
Thumbnails
More
Share
Explore

icon picker
Typography

Schriftfamilie

Aufgrund der bereits bestehenden Marke 365STEPS folgert sich die grundlegende Schrift bestehend aus der Familie
Roboto
⁠
für das STEPS Leaders Projekt. Daraus leitet sich weiterhin für die Überschriften der Schnitt
Roboto Slab
⁠
ab und für weitere Texte die Sans-serif.

Schriftgrößen

Die Schriftgrößen werden von einer Basisgröße, in diesem Fall 16px, ermittelt und sind entsprechende Vielfache davon. Für eine responsive Gestaltung der Website ist diese Art der Schriftgrößendefinition von Vorteil. Um ein noch nahtloseres Leseerlebnis zu erzeugen wird außerdem von einer neuen Technologie Gebrauch gemacht, die je nach angezeigter Displaygröße die Schriftgröße in bestimmten Grenzen mitskaliert. Daher ist eine exakte Festlegung der Schriftgröße abhängig von der Anzeigegröße und kann dementsprechend nicht allgemeingültig benannt werden.

Schriftfarbe

Die Farben für Schrift sind abhängig vom Seitenkontext und werden an der Hauptfarbe, Pantone Classic Blue, orientiert.
Definition der Schriften
0
name
use
font-family
font-size
font-style
font-weight
line-height
letter-spacing
color
1
Display-1
h1, site-title
roboto-slab
2.5em
regular
700
1
0
blue-0
2
Display-2
h2, section-title, post-title
roboto-slab
2em
regular
700
1
0
blue-0
3
Display-3
h3, section-title, post-title
roboto
1.8em
regular
200
1
0
blue-0
4
Display-4
h4, post-section-title
roboto-slab
1.5em
regular
500
1
0
blue-0
5
Display-5
h5, post-section-title
roboto
1.2em
regular
700
1
0
blue-0
6
Display-6
h6, post-section-title
roboto
1em
italic
​
1
0
blue-0
7
Text-1
html (root), p, fallback
roboto
1em = 16px
regular
400
1.5
0
grey-text
8
Text-2
meta-information
roboto
1em
regular
300
1
0
grey-text
9
Text-3
quotation, bible-word
​
1em
​
​
1.5
0
blue-0
10
Akzent-1
overline
roboto
1em
regular
300
1
400
blue-0
There are no rows in this table
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.