Typography strukturiert den Inhaltsbereich, indem sie eine visuelle Hierarchie schafft. Darüber hinaus erhöht eine gute Typography die Lesbarkeit und stärkt die Marke im Erscheinungsbild.
Allgemein
Flow nutzt die Schriftfamilie Inter, die für Bildschirmdarstellung optimiert ist und auch in kleinen Größen gut lesbar bleibt. Die einheitliche Verwendung sorgt für ein ruhiges, konsistentes Erscheinungsbild.
Für Fließtexte wird Regular, für Überschriften und Hervorhebungen Bold eingesetzt. Eine Zeilenhöhe (line height) von 150 Prozent zur Schriftgröße (font size) verbessert die Lesbarkeit und unterstützt die Barrierefreiheit. Abweichungen sind nur in Ausnahmefällen vorgesehen.
Alle Schriftgrößen werden in REM definiert. So bleiben Texte skalierbar, reagieren auf Zoom und berücksichtigen individuelle Systemeinstellungen.
Schriftgrößen und Hierarchie
Eine klare typografische Hierarchie hilft dabei, Inhalte strukturiert und schnell erfassbar zu machen.
Headings
Headings strukturieren Inhalte und definieren Abschnitte. Jede Stufe hat eine semantische Bedeutung und sollte entsprechend eingesetzt werden. H1 ist die oberste inhaltliche Ebene einer Seite.
| Preview | REM | Token |
|---|---|---|
Heading 1 | 2.625 rem | font-size-heading-xxl |
Heading 2 | 2 rem | font-size-heading-xl |
Heading 3 | 1.5 rem | font-size-heading-l |
Heading 4 | 1.25 rem | font-size-heading-m |
Heading 5 | 1.125 rem | font-size-heading-s |
Heading 6 | 1 rem | font-size-heading-xs |
Body
Text
Text wird für Fließtexte, Beschreibungen und längere Inhalte verwendet. Small eignet sich für unterstützende oder sekundäre Informationen. Um Inhalte übersichtlich und schnell erfassbar zu gestalten, lassen sich zentrale Informationen durch Bold gezielt hervorheben.
| Preview | REM | Token |
|---|---|---|
| Text (Body) | 1 rem | font-size-text-m |
| Text (Body) | 1 rem | font-size-text-m |
| Text (Small) | 0,875 rem | font-size-text-s |
| Text (Small) | 0,875 rem | font-size-text-s |
Links
Links werden je nach Kontext unterschiedlich gekennzeichnet. Freistehende Verlinkungen sind visuell in Bold hervorgehoben, während sie im Fließtext durch Unterstreichung kenntlich gemacht werden.
| Preview | REM | Token |
|---|---|---|
| Link | 1 rem | font-size-text-m |
| Link | 1 rem | font-size-text-m |
Code
Für eine technische Darstellung von Code wird die Schrift Fira Code eingesetzt.
| Preview | REM | Token |
|---|---|---|
code | 0,875 rem | font-size-text-s |