Aktualisiert 11. Juli 2026

Web-Typografie: Schriften, Kombination & Lesbarkeit

Typografie ist der größte Teil der meisten Interfaces — fast alles, was ein Produkt sagt, sagt es in Schrift — und das Handwerk teilt sich in zwei Hälften: Schriftarten gut auszuwählen und zu kombinieren, und sie so zu setzen, dass sie mühelos lesbar sind. Die Mathematik der Größen wohnt in unserem Schriftgrößenskala-Leitfaden; dieser Hub ist die andere Hälfte — das Handwerk. Der schnellste Einstieg ist, eine klassische Kombination in echtem Text zu sehen.

Auswählen heißt Casting

Die Wahl einer Schriftart ist eine Casting-Entscheidung: Die Schrift spricht jede Zeile aus, die das Produkt je sagt, in einem Register, das Leser aufnehmen, bevor sie ein Wort lesen. Die Leitfäden hier decken die Entscheidungen ab — Schriften kombinieren, die kontrastieren, ohne zu kollidieren, die Serifenfrage, wie sie auf modernen Bildschirmen wirklich steht, Display-Schriften, die keine Lesbarkeit opfern, und was Buchstabenformen über eine Marke signalisieren. Die Casting-Metapher leistet echte Arbeit: Leser nehmen den Tonfall einer Schriftart wahr, bevor sie ein Wort des Inhalts lesen — so wie eine Stimme wahrgenommen wird, bevor der Satz es tut — und keine Überarbeitung macht diesen ersten Eindruck rückgängig.

Lesen ist eine Mechanik

Die andere Hälfte ist mechanisch und messbar: Zeilenlänge, die den Rücksprung des Auges verlässlich hält, der Unterschied zwischen Leserlichkeit — kann ich es entziffern? — und Lesbarkeit — fließt es?, Schrift in Formularen, wo Fehler am teuersten sind, und die kleinen optischen Anpassungen, die Text bei kleinen Größen braucht. Nichts davon ist Geschmack — das meiste ist seit einem Jahrhundert erforscht, und die Leitfäden berichten, was standhält. Der Grund, warum die Zahlen halten, ist physiologisch statt ästhetisch: Lesen geschieht in Sprüngen und Rücksprüngen, und fast jede Messung in diesen Leitfäden existiert, um diese Sprünge dort landen zu lassen, wo das Auge sie erwartet.

Die praktische Ebene

Zwischen Handwerk und Theorie liegt die Arbeitsebene, der jedes Projekt begegnet: welche Google Fonts wirklich standhalten, wann ein System-Font-Stack besser ist, als überhaupt etwas zu laden, wie Schriften auf die Seite gelangen, ohne sie zu blockieren, und was Variable Fonts verändern. Konkret, aktuell und hier behandelt — und die Web-Typografie-Checkliste verdichtet den ganzen Hub zu einem einzigen Durchgang vor dem Launch.

Wo die Größen-Hälfte wohnt

Dieser Hub hört bewusst dort auf, wo das Messen beginnt. Die Mathematik der Größe — Skalenverhältnisse, Überschriften-Hierarchien, wie viele Größen ein System braucht — gehört zum Schriftgrößenskala-Leitfaden, und wie sich diese Größen zwischen einem Smartphone und einem Desktop verhalten, behandelt fluide Typografie. Die Trennung ist in der Praxis wichtig: Typografie, die sich schlecht liest, scheitert meist nur auf einer Seite, und zu wissen, ob du ein Casting-Problem oder ein Größen-Problem beheben willst, spart Nacharbeit. Scale Composer hält beide Hälften an einem Ort — eine kuratierte Auswahl von Familien für die handwerklichen Entscheidungen, angetrieben von derselben Skala, die Schrift, Abstände und Raster dimensioniert — sodass eine hier gewählte Kombination bereits vom System dimensioniert ankommt.

Leitfäden in diesem Hub

Beurteile Kombinationen mit deinen eigenen Augen

Rat zum Kombinieren wird erst vor echtem Text zur Überzeugung: tausche die Überschrift- und Fließtext-Schriften in einem Live-Beispiel — der kuratierte Schrift-Picker des Scale Composer hält ~50 Familien, die den UI-Einsatz überstehen, und zu beobachten, wie eine Kombination in laufendem Text passt (oder kollidiert), lehrt schneller als jede Regelliste.

Häufige Fragen

Wie kombiniere ich Schriften?

Ein verlässliches Prinzip deckt die meisten Fälle ab — Kontrast in der Klasse, Harmonie in den Proportionen. Kombiniere Schriften aus verschiedenen Familien (eine Serifen-Überschrift mit einem serifenlosen Fließtext), deren x-Höhen und Breiten zueinander passen, und gib jeder eine eigene Aufgabe. Ähnliche, aber nicht identische Schriften sind der klassische Fehler.

Wie viele Schriften sollte eine Website verwenden?

Ein oder zwei Familien. Schriftstärken, Größen und Laufweite erzeugen die ganze Vielfalt, die die meisten Produkte brauchen — eine dritte Familie fügt selten etwas hinzu, das nicht auch eine kräftigere Stärke leisten könnte, und sie kostet Ladezeit und Kohärenz.

Sind Google Fonts gut genug für professionelle Arbeit?

Ja — die besten Familien des Katalogs werden überall in ernsthaften Produkten eingesetzt. Die Kunst ist die Kuration: Der Katalog ist groß und ungleichmäßig, also besteht die Arbeit darin zu wissen, welche Familien in UI-Größen bestehen, genug Schriftstärken mitbringen und deine Sprachen abdecken.

Welche Zeilenlänge ist am besten lesbar?

Etwa 45–75 Zeichen pro Zeile im Fließtext, mit dem Optimum nahe bei 66. Kürzer zerhackt Sätze in Fragmente; länger macht den Rücksprung des Auges zur nächsten Zeile fehleranfällig. Über die Spaltenbreite steuerst du das.

Serif oder serifenlos für Fließtext auf Bildschirmen?

Moderne Bildschirme stellen beides gut dar, also hat die alte Regel »serifenlos für Bildschirme« ausgedient. Die ehrliche Antwort lautet, dass Größe, Zeilenhöhe und Zeilenlänge das Lesen weit stärker beeinflussen als die Serifenfrage — wähle nach Stimme und Kontext.

Was sagt eine Schriftart über eine Marke aus?

Buchstabenformen tragen Tonfall, so wie eine Stimme es tut — eine geometrische Serifenlose wirkt modern und neutral, eine humanistische Serifenlose wärmer, Serifen etablierter oder editorialer. Das Signal ist real, aber grob; es setzt ein Register, statt eine Botschaft zu senden.