Skip to content
Designsystem – STEPS Leaders
Share
Explore

Typography

Schriftfamilie
Aufgrund der bereits bestehenden Marke 365STEPS folgert sich die grundlegende Schrift bestehend aus der Familie für das STEPS Leaders Projekt. Daraus leitet sich weiterhin für die Überschriften der Schnitt 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
Search
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.