Font: Typografie klar und konsistent gestalten

Veröffentlicht am 2026-10-11 · Aktualisiert am 2026-10-11

Font beeinflusst Lesbarkeit, Hierarchie, Markenwirkung, Performance und Lokalisierung einer Anwendung. Dieser Leitfaden zeigt, wie ein konsistentes Typografiesystem aufgebaut, passende Schriften gewählt, Größen und Abstände definiert, responsive und mehrsprachige Inhalte behandelt und Font-Loading sowie Tests sauber umgesetzt werden.

Zuerst ein Typografiesystem definieren

Definiere zuerst die Rollen von Text: Seitentitel, Abschnittstitel, Fließtext, Label, Button, Tabelle, Fehlermeldung, Caption, Zahlen und Metadaten. Jede Rolle braucht eine klare Hierarchiestufe und einen wiederverwendbaren Stil. Wenn jeder Screen eigene Größen und Gewichte erfindet, verliert die Oberfläche Rhythmus und wird schwer wartbar. Ein kleines, dokumentiertes Set ist stärker als viele lokale Ausnahmen, weil Designer und Entwickler damit dieselbe Sprache für Entscheidungen verwenden.

Trenne Hierarchie von Dekoration. Ein Titel sollte durch Größe, Gewicht, Abstand und Position wichtig wirken, nicht weil jede Seite eine andere Schrift erhält. Lege Tokens für body, small, label, subtitle, section heading, page heading und display an. Dadurch werden globale Änderungen kontrollierbar. Wenn Body-Größe, Dark Mode oder Accessibility angepasst werden, kann das System zentral aktualisiert werden, ohne jeden einzelnen Screen manuell zu bearbeiten.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Schriften nach Aufgabe auswählen

Wähle eine Schrift nach den tatsächlichen Lesebedingungen. Ein Marketing-Headline darf charaktervoller sein als eine dichte Tabelle, ein Formular oder längere Dokumentation. Für Fließtext sind klare Buchstabenformen, gute Interpunktion, passende Gewichte, verständliche Ziffern und stabiles Rendering bei kleinen Größen entscheidend. Teste echte UI-Inhalte statt nur große Beispielüberschriften. Eine attraktive Schrift kann im Dashboard trotzdem schlecht funktionieren.

Begrenze die Zahl der Schriftfamilien. Eine Familie mit mehreren Gewichten kann oft das gesamte Produkt abdecken; eine zweite kann für Display-Titel reserviert sein. Jede zusätzliche Familie erhöht visuelle Komplexität, Dateigröße und Wartungsaufwand. Wenn eine Markenschrift vorgeschrieben ist, dokumentiere, wo sie eingesetzt wird und wo eine robustere Systemschrift besser geeignet ist. Konsistenz bringt bei Arbeitsoberflächen meist mehr Wert als ständige Variation.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Eine konsistente Typografie-Skala bauen

Erstelle eine Größen-Skala statt einzelne Werte pro Seite zu wählen. Beginne mit einer komfortablen Body-Größe, definiere kleinere Hilfstexte und anschließend die Überschriftenebenen. Entscheidend sind die Beziehungen. Zu viele fast gleiche Größen schwächen die Hierarchie; zu große Sprünge wirken laut. Eine praktische Skala umfasst Body, Small, Label, Subtitle, Section, Page Title und Display mit festgelegtem Gewicht und line-height.

Größe allein reicht nicht. Gewicht, line-height, letter-spacing, Farbe und Großschreibung beeinflussen ebenfalls die Hierarchie. Ein Label kann kleiner, aber etwas kräftiger sein. Große Überschriften benötigen oft engere Zeilenhöhe, während Absätze mehr Luft brauchen. Tabellen können von tabellarischen Ziffern profitieren. Dokumentiere diese Regeln, damit Formulare, Cards, Dashboards und Marketingseiten nicht voneinander abweichende Typografiesysteme entwickeln.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Zeilenlänge und Abstände kontrollieren

Lesbarkeit hängt stark von der Zeilenlänge ab. Sehr breite Zeilen erschweren den Sprung zur nächsten Zeile, sehr schmale Spalten erzeugen zu viele Umbrüche. Setze für längere Texte eine sinnvolle Maximalbreite und passe Interface-Komponenten an ihren Zweck an. line-height sollte Zeilen klar trennen, ohne den Absatz auseinanderzureißen. Der richtige Wert hängt von Schrift, Größe und Sprache ab und muss visuell getestet werden.

Achte auf vertikalen Rhythmus zwischen Überschriften, Absätzen, Listen und Formfeldern. Der Abstand vor einer Überschrift sollte häufig stärker trennen als der Abstand danach. Vermeide willkürliche Margins pro Seite und verwende Spacing-Tokens oder Komponentenregeln. Wenn sich Font-Größe oder line-height ändern, müssen oft auch umliegende Abstände neu geprüft werden, damit die visuelle Struktur stabil bleibt.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Responsive Typografie planen

Responsive Typografie sollte nicht auf jedem Gerät ein neues System erzeugen. Große Display-Titel können auf kleinen Screens kleiner werden, während Body-Text meist in einem begrenzten Bereich bleibt. Nutze Breakpoints oder fluid sizing mit klaren Mindest- und Höchstwerten. Teste echte lange Überschriften, weil Umbrüche Höhe und Balance kompletter Bereiche verändern können.

Prüfe auch Buttons, Tabs, Labels, Navigation und Tabellen. Lege fest, ob Text umbrechen, gekürzt, gescrollt oder das Layout verändern darf. Teste Browser-Zoom und größere Systemtexteinstellungen. Nutzer können Text vergrößern, ohne die Viewport-Breite zu ändern. Eine Oberfläche, die nur bei Standardzoom funktioniert, ist nicht robust genug.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Mehrsprachige Texte richtig unterstützen

Mehrsprachige Produkte müssen die tatsächliche Zeichenabdeckung prüfen. Eine gute lateinische Schrift kann arabische Zeichen, tschechische Diakritika oder andere Scripts nicht vollständig enthalten und dadurch unerwartete Fallbacks auslösen. Diese verändern Breite, Höhe und Gewicht. Teste echte Übersetzungen, weil Texte je nach Sprache deutlich länger sein können als englische Platzhalter.

Right-to-left-Scripts brauchen zusätzliche Aufmerksamkeit bei Richtung, Ausrichtung, Interpunktion, Zahlen und gemischtem Text. Übertrage letter-spacing und line-height nicht blind von Latein auf alle Sprachen. Wenn je Script unterschiedliche Familien verwendet werden, sollten ihre Metriken ähnlich genug sein, damit Sprachwechsel nicht zu starken Layout-Sprüngen führen.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Font-Loading und Fallbacks optimieren

Lade nur Gewichte und Stile, die wirklich verwendet werden. Jede zusätzliche Font-Datei erhöht die Seitengröße. Moderne komprimierte Formate sind sinnvoll, aber Subsetting muss die benötigten Zeichen aller unterstützten Sprachen erhalten. Ziel ist schneller sichtbarer Text mit möglichst wenig Layout Shift, wenn die Custom-Schrift den Fallback ersetzt.

Definiere einen Fallback-Stack mit gut lesbaren und metrisch ähnlichen Schriften. Teste langsame Netze, blockierte Requests und den ersten Besuch ohne Cache. Self-Hosting bietet Kontrolle, bringt aber Verantwortung für Dateien, Cache, Lizenzierung und Updates. Die Entscheidung sollte auf Messungen beruhen und nicht auf der Annahme, dass eine Variante grundsätzlich schneller ist.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Typografie testen und pflegen

Teste Typografie mit realen Inhalten: lange Titel, Tabellen, Fehler, leere Zustände, Zahlen, Übersetzungen und nutzergenerierte Texte. Suche nach Clipping, Überlappung, zu vielen Umbrüchen, schwachem Kontrast und inkonsistenter Gewichtung. Eine saubere Demo-Seite zeigt nicht die unvorhersehbaren Texte, die im echten Betrieb auftauchen.

Pflege eine kleine Typografie-Referenz mit Familien, Gewichten, Größen, line-height, letter-spacing, Einsatzbereichen, Fallbacks und Ladeverfahren. Bevor ein neuer Stil hinzugefügt wird, prüfe, ob ein vorhandener Stil ausreicht. Beim Austausch einer Schriftfamilie müssen Metriken und Umbrüche auf mehreren Screens verglichen werden. Ein gepflegtes System macht spätere Änderungen schneller statt restriktiver.

Teste außerdem nutzergenerierte Inhalte wie Namen, Adressen, Kommentare und importierte Daten. Diese Werte können deutlich länger sein als Designbeispiele. Jede Komponente braucht ein definiertes Overflow-Verhalten. Prüfe lange Wörter, große Zahlen, Strings ohne Leerzeichen und gemischte Interpunktion, besonders in Tabellen, Cards, Badges und mobilen Headern.

Accessibility betrifft mehr als Kontrast. Teste Zoom, größere Systemschrift und Browser-Einstellungen, die Standardschriften verändern. Bedeutung sollte nicht nur über Gewicht oder Farbe vermittelt werden. Die Hierarchie muss verständlich bleiben, auch wenn die Custom-Schrift nicht lädt oder ein anderer Fallback verwendet wird.

Teste außerdem nutzergenerierte Inhalte wie Namen, Adressen, Kommentare und importierte Daten. Diese Werte können deutlich länger sein als Designbeispiele. Jede Komponente braucht ein definiertes Overflow-Verhalten. Prüfe lange Wörter, große Zahlen, Strings ohne Leerzeichen und gemischte Interpunktion, besonders in Tabellen, Cards, Badges und mobilen Headern.

Accessibility betrifft mehr als Kontrast. Teste Zoom, größere Systemschrift und Browser-Einstellungen, die Standardschriften verändern. Bedeutung sollte nicht nur über Gewicht oder Farbe vermittelt werden. Die Hierarchie muss verständlich bleiben, auch wenn die Custom-Schrift nicht lädt oder ein anderer Fallback verwendet wird.

Teste außerdem nutzergenerierte Inhalte wie Namen, Adressen, Kommentare und importierte Daten. Diese Werte können deutlich länger sein als Designbeispiele. Jede Komponente braucht ein definiertes Overflow-Verhalten. Prüfe lange Wörter, große Zahlen, Strings ohne Leerzeichen und gemischte Interpunktion, besonders in Tabellen, Cards, Badges und mobilen Headern.

Accessibility betrifft mehr als Kontrast. Teste Zoom, größere Systemschrift und Browser-Einstellungen, die Standardschriften verändern. Bedeutung sollte nicht nur über Gewicht oder Farbe vermittelt werden. Die Hierarchie muss verständlich bleiben, auch wenn die Custom-Schrift nicht lädt oder ein anderer Fallback verwendet wird.

• Define roles
• Use reusable styles
• Keep hierarchy consistent
• Document decisions

Häufige Fragen

Kostenlos starten Vorlagen