Typography
Fonts
Für Benutzeroberflächen wird hauptsächlich die Font Inter verwendet. Sie
wird z. B. in Headings, im Body und in den
Components eingesetzt. Im Code wird die Font Size immer in REM angegeben, damit
die Schrift vom User leicht vergrößert werden kann.
Die Line Height
beträgt immer min. 150 % der Höhe der Font.
Headings
Headings zeichnen sich durch ihre Farbe und die große Auswahl an verschiedenen Größen zur Strukturierung aus.
| REM | PX | Line Height | |
|---|---|---|---|
Heading 1 | 2 rem | 32 px | 48 lh |
Heading 2 | 1,25 rem | 20 px | 30 lh |
Heading 3 | 1.125 rem | 18 px | 27 lh |
Heading 4 | 1 rem | 16 px | 24 lh |
Heading 5 | 1 rem | 16 px | 24 lh |
Text
Text wird überall auf Benutzeroberflächen verwendet, vom Fließtext bis hin zu kleinen Hinweisen. Bei Small kann zwischen den Line Heights 21 und 24 gewählt werden, da gerade 24lh gut in das Layout passt und 21lh für kleinere Höhen besser geeignet ist.
| REM | PX | Line Height | |
|---|---|---|---|
| Text (Body) | 1 rem | 16 px | 24 lh |
| Text (Body) | 1 rem | 16 px | 24 lh |
| Text (Small) | 0,875 rem | 14 px | 21 lh / 24 lh |
| Text (Small) | 0,875 rem | 14 px | 21 lh / 24 lh |
Label
Labels sind durch ihre graue Farbe und Bold-Darstellung als beschreibendes Element in komplexeren Components gut erkennbar.
| REM | PX | Line Height | |
|---|---|---|---|
| 0,875 rem | 14 px | 21 lh / 24 lh |
Links
Frei stehende Links werden in Bold dargestellt. Im Fließtext stehende Links verfügen über einen Unterstrich, um sie im Text besser erkennen zu können (s. Accessibility).
| REM | PX | Line Height | |
|---|---|---|---|
| Link | 0,875 rem | 14 px | 24 lh |
| Link | 1 rem | 16 px | 24 lh |
Code
Um Code von der anderen Font abzuheben, wird bei Code Fira Code verwendet, da sie einen eher technisches Aussehen hat.
| REM | PX | Line Height | |
|---|---|---|---|
code | 0,875 rem | 14 px | 24 lh |