FigmaTypografie
Typografie ist ein zentrales Gestaltungselement im KERN Design-System. Sie legt die Grundlage für eine klare visuelle Hierarchie, gute Lesbarkeit und eine einheitliche Gestaltung in digitalen Verwaltungsanwendungen und öffentlichen Online-Diensten. Unsere Typografie-Skala stellt sicher, dass Text systematisch, zugänglich und konsistent eingesetzt wird – über alle Anwendungsteile hinweg.
Typografieskala
Die Typografie-Skala bildet die Grundlage für einheitliche Schriftgrößen, mit denen Überschriften, Fließtext und weitere Textelemente gestaltet werden. Sie trägt zur Konsistenz und besseren Orientierung bei – besonders in responsiven Anwendungen.
Im Frontend wird mit der relativen Einheit rem gearbeitet, um Schriftgrößen und Zeilenabstände barrierefrei skalieren zu können. Zur besseren Lesbarkeit zeigt die folgende Tabelle zusätzlich die zugehörigen Pixelwerte – alle weiteren Angaben im Dokument erfolgen aus Gründen der Übersichtlichkeit in Pixel (px).
| Wert in px | Entspricht in rem |
|---|---|
| 80px | 5rem |
| 72px | 4.5rem |
| 56px | 3.5rem |
| 48px | 3rem |
| 40px | 2.5rem |
| 32px | 2rem |
| 26px | 1.625rem |
| 24px | 1.5rem |
| 21px | 1.3125rem |
| 20px | 1.25rem |
| 18px | 1.125rem |
| 16px | 1rem |
Semantische Token
Um eine konsistente und zugängliche Typografie im gesamten System zu gewährleisten, verwendet das KERN Design-System semantische Token. Sie beschreiben nicht nur konkrete Werte wie Schriftgröße oder Zeilenhöhe, sondern auch den funktionalen Zweck eines Textstils – unabhängig von Ausgabemedium oder Gestaltungslösung.
Die Benennung folgt dabei dem allgemeinen Prinzip, das im Abschnitt Design-Token beschrieben ist. Für die Typografie gelten spezifische Benennungen, die auf ihre jeweiligen Anwendungsbereiche abgestimmt sind – sie werden im Folgenden genauer beschrieben.
Schriftfamilie
Für die Schrift im KERN Design-System fiel die Wahl auf die Fira Sans. Sie ist gut geeignet für barrierefreie Gestaltung, da sie leicht lesbar ist. Außerdem deckt sie sämtliche Zeichen und Sprachen ab. Die Fira Sans ist frei verfügbar und wird von Google über Google Fonts gehostet.
| Token | Wert |
|---|---|
--kern-typography-font-family-default | Fira Sans |
Schriftgrößen
Die Schriftgrößen im KERN Design-System sind semantisch benannt und jeweils für kleinere und größere Bildschirmgrößen definiert. Die Skalierung sorgt dafür, dass Texte auf allen Geräten gut lesbar bleiben. Jeder Wert ist mit einem passenden Zeilenabstand gekoppelt, um ein stimmiges, responsives Gesamtbild zu erzeugen.
| Token | Mobile / Desktop |
|---|---|
--kern-typography-font-size-adaptive-2x-large | 48px / 72px |
--kern-typography-font-size-adaptive-x-large | 32px / 48px |
--kern-typography-font-size-adaptive-large | 26px / 32px |
--kern-typography-font-size-adaptive-medium | 21px / 24px |
--kern-typography-font-size-static-large | 21px / 21px |
--kern-typography-font-size-static-medium | 18px / 18px |
--kern-typography-font-size-static-small | 16px / 16px |
Zeilenabstände
Der Zeilenabstand definiert den vertikalen Raum zwischen zwei Textzeilen und ist ein zentrales Element für Lesbarkeit, Rhythmus und visuelle Ausgewogenheit. Die Werte sind ein Vielfaches von 8 Pixeln und fügen sich dadurch nahtlos in das 8-Punkte-Raster ein. Das sorgt für einen konsistenten vertikalen Rhythmus, der das Lesen erleichtert und das Layout visuell ausbalanciert.
| Token | Mobile / Desktop |
|---|---|
--kern-typography-line-height-adaptive-2x-large | 456px / 80px |
--kern-typography-line-height-adaptive-x-large | 40px / 56px |
--kern-typography-line-height-adaptive-large | 32px / 40px |
--kern-typography-line-height-static-large | 32px / 32px |
--kern-typography-line-height-static-medium | 24px / 24px |
Schriftschnitte
Der Schriftschnitt legt die Stärke bzw. Dicke der Schrift fest. Er beeinflusst sowohl die visuelle Hierarchie als auch die Lesbarkeit eines Textes. Diese Gewichtungen können gezielt eingesetzt werden, um Inhalte zu betonen oder Sektionen zu strukturieren. Alle Schriftschnitte basieren auf der Fira Sans und sind so abgestimmt, dass sie auch bei kleinen Schriftgrößen gut lesbar und kontrastreich bleiben.
| Token | Wert |
|---|---|
--kern-typography-font-weight-regular | 400 |
--kern-typography-font-weight-medium | 500 |
--kern-typography-font-weight-semi-bold | 600 |
Composite Token
Ein Composite Token ist ein zusammengesetzter Token, der mehrere untergeordnete Werte bündelt – etwa Schriftfamilie, Schriftgröße, Zeilenhöhe und Gewicht. Solche Token sind besonders nützlich für Stileigenschaften, die stets gemeinsam verwendet werden und eine gestalterische Einheit bilden. Sie verbinden visuelle Eigenschaften mit ihrer funktionalen Bedeutung im Design. Dadurch lassen sich Textstile systematisch anwenden, pflegen und skalieren – unabhängig von konkreten Werten oder Ausgabemedien.
Die Composite Token bilden die Brücke zwischen funktionaler Typografie und konkretem Design – sie stellen sicher, dass alle Komponenten konsistent und barrierefrei gestaltet sind.
Mit Hilfe der baseline-Token wird sichergestellt, dass Textkomponenten innerhalb derselben Größenstufe (z. B. default, small oder large) direkt untereinander platziert werden können. Sie definieren typografische Abstände in den Textstilen und richten sie am 8-Punkte-Raster aus. So entsteht ein harmonischer vertikaler Rhythmus – ganz ohne zusätzlichen Konfigurationsaufwand.
Textrollen: Im KERN Design-System sind Textstile nicht nur optisch, sondern auch semantisch getrennt. Eine ausführliche Beschreibung der Rollen – Heading, Title, Preline, Subline, Label und Body – findest du im Bereich der Textkomponenten.
| Composite | Token |
|---|---|
| heading-display |
|
| heading-x-large |
|
| heading-large |
|
| heading-medium |
|
| heading-small |
|
| title-large |
|
| title-medium |
|
| title-small |
|
| preline-large |
|
| preline-default |
|
| preline-small |
|
| subline-large |
|
| subline-default |
|
| subline-small |
|
| label-large |
|
| label-default |
|
| label-small |
|
| body-large regular |
|
| body-large bold |
|
| body-default regular |
|
| body-default bold |
|
| body-small regular |
|
| body-small bold |
|