Wenn Layouts unruhig wirken, Buttons anders aussehen und Überschriften auf dem Handy zu groß sind, liegt das oft nicht am Geschmack, sondern an fehlender Struktur. Ein sauberes Typografie-System im Designsystem schafft Klarheit – für Nutzer:innen und für das gesamte Team.
Dieser Leitfaden zeigt, wie im Web eine konsistente Typografie geplant wird: von Grundentscheidungen über Schriftarten bis hin zu sinnvoll skalierten Größen, Zeilenabständen und responsivem Verhalten.
Typografie im Designsystem richtig denken
Typografie ist mehr als schöne Schrift. Sie steuert Lesbarkeit, Hierarchie, Markenwirkung und Interaktionen. In einem Designsystem werden all diese Entscheidungen einmal sauber getroffen und dann wiederverwendbar dokumentiert.
Warum ein Typografie-System im Web unverzichtbar ist
Ohne System wächst mit jedem neuen Screen die Anzahl der Sonderfälle: neue Schriftgrößen, schnell hinzugefügte Farben, andere Zeilenabstände. Das Ergebnis sind unruhige Oberflächen, mehr Code und Fehler beim Entwickeln.
Ein klar definiertes Typografie-System sorgt für:
- Wiedererkennbare Muster – Nutzer:innen finden sich schneller zurecht.
- Weniger Design-Entscheidungen – für neue Seiten werden nur noch bestehende Styles kombiniert.
- Weniger Frontend-Chaos – keine 25 verschiedenen Font-Sizes und Zeilenhöhen im CSS.
- Bessere Skalierbarkeit – neue Produkte oder Sprachen lassen sich leichter andocken.
Wer bereits ein Spacing-System im Designsystem nutzt, kennt den Effekt: Klar definierte Bausteine beschleunigen alles. Für Typografie gilt das genauso.
Markenrolle und Lesbarkeit ausbalancieren
Typografie trägt stark zur Marke bei. Gleichzeitig muss sie auf vielen Geräten und bei unterschiedlichen Sehfähigkeiten funktionieren. Ein Designsystem hilft, diese Ziele zu verbinden.
- Marke: Passt die Schrift eher zu Tech, Lifestyle, Behördenkommunikation oder E-Commerce?
- Ton: Soll die Seite seriös, verspielt, sachlich oder emotional wirken?
- Barrierefreiheit: Sind Kontraste und Schriftgrößen für ältere Nutzer:innen oder Menschen mit Sehschwäche ausreichend?
Wichtig ist: Nicht jede Überschrift muss ein Design-Highlight sein. Die Basis muss zuerst funktionieren – dann können einzelne Akzente bewusst gestaltet werden.
Webfonts und Systemschriften bewusst auswählen
Die Wahl der Schriften beeinflusst Ladezeit, Technik und Markenwirkung. Ein Designsystem sollte klar festhalten, welche Fonts erlaubt sind und wie sie geladen werden.
Primäre und sekundäre Schrift definieren
In vielen Projekten genügt eine Hauptschriftfamilie. Eine zweite Schrift kann sinnvoll sein, zum Beispiel für kleine Hinweise oder Code-Elemente. Wichtig ist, die Rollen klar zu beschreiben:
- Primäre Schrift: Fließtext, Standard-UI-Elemente, grundlegende Lesbarkeit.
- Sekundäre Schrift: Optional für Akzente, etwa Zahlen in Dashboards oder Monospace für Code.
Zu viele Schriften erschweren das Interface. Als Faustregel reichen meist 1–2 Familien, kombiniert mit verschiedenen Schnitten (Regular, Medium, Bold).
Performance und Fallback-Schriften im Blick behalten
Webfonts können Seiten verlangsamen. Deshalb sollte klar sein, wie viele Schriftschnitte wirklich nötig sind und wie Fallback-Schriften aussehen sollen.
- Nur benötigte Schnitte laden: Regular, Medium, Bold – statt 7 Varianten.
- Fallback-Stack definieren: Eine Reihe von Systemschriften, falls Webfonts nicht geladen werden.
- Font-Display-Regel nutzen: Damit Text schnell sichtbar ist, auch wenn die Webfont noch lädt.
Diese technischen Vorgaben gehören ebenfalls ins Designsystem – so treffen Entwickler:innen nicht jedes Mal neue Entscheidungen.
Typografische Skala: Größen, Zeilenabstand, Hierarchie
Ein zentrales Element eines Typografie-Systems ist die Skala: klar abgestufte Schriftgrößen, die aufeinander aufbauen und gut miteinander harmonieren.
Basisgröße und Skalierung festlegen
Am Anfang steht eine Basisgröße, meist die Schriftgröße des Fließtextes. Darauf aufbauend wird eine Skala definiert – etwa mit einem gleichbleibenden Faktor zwischen den Stufen.
Ein einfaches Beispiel für Desktop:
- Body: 16 px (Basis)
- H6: 18 px
- H5: 20 px
- H4: 24 px
- H3: 28 px
- H2: 32 px
- H1: 40 px
Wichtiger als „schöne“ Zahlen ist die Konsistenz. Die Skala sollte sinnvolle Abstände haben und nicht bei jeder neuen Überschrift spontan angepasst werden.
Zeilenhöhe und Zeilenlänge steuern
Die Lesbarkeit hängt stark von Zeilenhöhe (Line-Height) und Zeilenlänge ab. Zu enge Zeilen ermüden, zu weite Zeilen machen das Lesen mühsam.
- Body-Text: Großzügigere Zeilenhöhe, damit längere Passagen leicht lesbar sind.
- Überschriften: Etwas kompakter, damit sie klar als Block wirken.
- Maximale Zeilenlänge: Texte lieber in Spalten oder mit begrenzter Breite darstellen.
Diese Werte sollten nicht nur im CSS versteckt sein, sondern im Designsystem als Empfehlung und Richtwert dokumentiert werden.
Rollen statt reiner HTML-Tags definieren
Statt nur „h1–h6“ zu denken, lohnt sich eine Definition nach Rolle. Zum Beispiel:
- Display / Hero Title
- Page Title
- Section Title
- Block Title (z. B. Karten-Überschriften)
- Body / Paragraph
- Caption / Meta
So kann das System später auch in Komponenten-Bibliotheken oder Code sauber abgebildet werden, ohne an einzelne HTML-Tags gebunden zu sein.
Responsives Typografie-Design planen
Auf einem 27-Zoll-Monitor kann eine H1 riesig und beeindruckend sein – auf einem Smartphone wirkt dieselbe Größe schnell erschlagend. Ein Designsystem sollte darum klar regeln, wie Typografie auf verschiedenen Viewports reagiert.
Breakpoints und Größenanpassung definieren
Für die wichtigsten Gerätegrößen werden Typografie-Regeln festgelegt. Zum Beispiel:
- Mobile: kleinere Überschriften, kürzere Zeilen, angepasste Abstände.
- Tablet: Zwischenstufe – etwas mehr Luft, aber noch kompakt.
- Desktop: großzügigere Skala, längere Zeilen möglich.
Welche Breakpoints sinnvoll sind, hängt vom Projekt ab. Wichtig ist, sie im Designsystem zu benennen und für Typografie zu nutzen – nicht nur für das Grid.
Fluid Typography sinnvoll einsetzen
Mit modernen CSS-Techniken können Schriftgrößen fließend zwischen Mindest- und Maximalwert skalieren. Das sorgt für gleichmäßigere Layouts, bringt aber auch Komplexität.
Empfehlenswert ist eine klare Regel:
- Primäre Überschriften: Fluid skalierend zwischen z. B. Mobile- und Desktop-Werten.
- Fließtext: Meist fixe Größe je Breakpoint, um Lesbarkeit stabil zu halten.
- Kleine Labels: Nur vorsichtig skalieren, damit sie nicht zu klein werden.
Im Designsystem sollte zu jeder Rolle erläutert werden, ob sie flüssig skaliert oder nur an festen Punkten umspringt.
Typografie-Tokens und Komponenten im System verankern
Damit Typografie in Design- und Code-Tools effizient nutzbar wird, braucht es eine saubere Übersetzung in Tokens und Komponenten.
Typografie-Tokens anlegen
Tokens sind benannte Werte, etwa für Schriftgröße, Zeilenabstand oder Schriftfamilie. Sie erlauben eine einheitliche Nutzung in verschiedenen Umgebungen – etwa Design-Tools, Styleguides und Code.
Typische Token-Gruppen:
- Font-Families (Hauptschrift, Sekundärschrift, Monospace)
- Font-Sizes (xs, sm, md, lg, xl …)
- Line-Heights (für Text und Überschriften)
- Font-Weights (Regular, Medium, Bold)
- Letter-Spacing (optional für spezielle Rollen)
Tokens machen das Typografie-System robuster. Wenn später eine Schriftgröße angepasst werden muss, ändert sich der Token – nicht hunderte Vorkommen im Code.
Textstile in Komponenten und Vorlagen nutzen
Der nächste Schritt ist die Nutzung der Tokens in wiederverwendbaren Komponenten. Ein Button sollte nicht „18 px / Bold“ hart codiert bekommen, sondern einen klar definierten Textstil.
- Button-Text: Verweist auf einen Typografie-Token (z. B. text/button).
- Form-Labels: Nutzen einen einheitlichen Label-Stil.
- Karten-Titel: Binden an eine definierte Überschriften-Rolle.
So bleibt das System pflegbar: Ändert sich die Definition für Labels, müssen nicht alle Formulare neu designt werden. Wer bereits mit Designsystem-Komponenten in Figma arbeitet, kann die Typografie-Stile direkt dort hinterlegen.
Barrierefreie Typografie im Designsystem berücksichtigen
Barrierefreiheit ist keine Extra-Schicht, die später ergänzt wird. Sie sollte von Beginn an Teil des Typografie-Systems sein. So wird vermieden, dass einzelne Seiten „nachträglich barrierefrei“ gemacht werden müssen.
Kontraste und Mindestgrößen definieren
Entscheidend sind ausreichend Kontrast und gut lesbare Mindestgrößen – online gibt es dafür anerkannte Richtlinien. Ein Designsystem sollte klare Grenzwerte definieren:
- Mindestschriftgrößen für Fließtext und interaktive Elemente.
- Kontrastvorgaben zwischen Text und Hintergrund.
- Vermeidung von rein farblich codierten Unterschieden (z. B. Fehler nur in Rot).
Auch bei der Verwendung von Dark Mode oder farbigen Hintergründen ist eine saubere Dokumentation wichtig. Ein eigener Style-Abschnitt für dunkle Themes oder Special Sections hilft, Widersprüche zu vermeiden.
Lesbarkeit für verschiedene Nutzergruppen mitdenken
Gutes Typografie-Design berücksichtigt, dass Nutzer:innen in sehr unterschiedlichen Situationen lesen:
- Auf dem Smartphone im Sonnenlicht.
- Mit Lesebrille oder Sehschwäche.
- In konzentrierter Arbeitssituation am Schreibtisch.
Das System sollte deswegen nicht zu knappe Zeilenhöhen oder zu feine Schriftschnitte verlangen. Fettgedruckte Zustände (zum Beispiel aktive Navigationselemente) müssen klar erkennbar sein.
Checkliste: Typografie-System im Designsystem aufsetzen
Die folgende kompakte Checkliste hilft, ein Web-Typografie-System Schritt für Schritt aufzubauen oder zu überarbeiten.
- Markenrolle klären: Welche Wirkung soll die Schrift vermitteln?
- Fonts auswählen: 1–2 Familien festlegen, inklusive Schriftschnitte und Fallbacks.
- Basisgröße bestimmen: Fließtextgröße für Desktop und Mobile definieren.
- Typografische Skala anlegen: Überschriften- und Textgrößen mit sinnvollen Abständen planen.
- Zeilenhöhe und Zeilenlänge: Richtwerte für Lesbarkeit dokumentieren.
- Responsives Verhalten regeln: Breakpoints und ggf. fluides Verhalten definieren.
- Tokens erstellen: Schriftfamilien, Größen, Abstände und Gewichtungen als Tokens anlegen.
- Komponenten anbinden: Buttons, Formulare, Karten und Navigationen mit Textstilen verknüpfen.
- Barrierefreiheit prüfen: Mindestgrößen, Kontraste und Lesbarkeit testen.
- Dokumentation veröffentlichen: Beispiele und Do/Don’t-Screens ins Designsystem aufnehmen.
Mini-Ratgeber: Typografie-Probleme im Bestand erkennen
Viele Teams starten nicht auf der grünen Wiese, sondern mit einem bestehenden Interface. Ein kurzer Audit hilft, die größten Lücken zu finden:
- Design-Screens durchgehen und alle unterschiedlichen Schriftgrößen notieren.
- Überprüfen, ob Überschriften-Hierarchien konsistent sind (z. B. H2 folgt auf H1).
- Elemente markieren, die schwer lesbar sind (zu kleiner Text, zu wenig Kontrast).
- Unnötige Varianten streichen und auf eine einheitliche Skala zurückführen.
Wer parallel ein responsives Typografie-Design plant, kann diesen Audit nutzen, um Desktop- und Mobile-Ansichten gezielt zusammenzuführen.
FAQ zu Typografie im Designsystem
- Wie viele Schriftgrößen sind sinnvoll?
Für viele Anwendungen reichen 6–10 gut abgestimmte Rollen (von Hero bis Caption). Zu viele Größen erzeugen Unruhe. - Reicht eine Schriftfamilie für ein komplettes Interface?
In den meisten Fällen ja. Wichtig ist, dass sie in verschiedenen Schnitten verfügbar ist und Umlaute sowie Sonderzeichen unterstützt. - Muss das Typografie-System fertig sein, bevor entwickelt wird?
Es hilft, eine erste stabile Version zu haben. Danach kann iterativ verfeinert werden – aber grundlegende Rollen sollten früh stehen. - Wie wird Typografie im Code dokumentiert?
Durch Styleguides, Tokens und klare Benennungen. Je weniger „Magic Numbers“ im CSS, desto robuster bleibt das System.
Quellen
- Eigene Projekterfahrung mit Designsystemen für Webanwendungen und Markenauftritte.
- Praktische Leitlinien aus Usability-Tests mit Nutzer:innen verschiedener Altersgruppen.
