Typografie fürs Web: Mehr als Schriftwahl

Die Wahl der Schriftart ist der erste Schritt — und oft der einzige, den man sieht. Aber Typografie im Web ist ein System, keine Entscheidung. Sie umfasst Schriftgröße, Zeilenhöhe, Zeilenlänge, Abstände zwischen Buchstaben, die Hierarchie zwischen Überschriften und Fließtext, das Verhalten auf verschiedenen Bildschirmgrößen und den Einfluss von Dark und Light Mode auf die wahrgenommene Stärke der Schrift. Wer nur die Schriftart wählt und den Rest dem Browser überlässt, hat noch keine Typografie gemacht.

Fluid Typography ist einer der wichtigsten typografischen Fortschritte der letzten Jahre im Web. Mit clamp() lassen sich Schriftgrößen definieren, die fließend zwischen einem Minimal- und Maximalwert skalieren — abhängig von der Viewport-Breite, ohne Media-Query-Sprünge. Eine H1, die auf dem Smartphone 32px groß ist und auf einem großen Monitor 80px, sieht bei dieser Methode auf jedem Punkt dazwischen proportional aus. Das klingt nach einem technischen Detail — ist aber ein fundamentaler Unterschied für das Gefühl der Seite.

Variable Fonts: eine Datei, viele Varianten

Variable Fonts erlauben es, eine einzige Schriftdatei zu laden, die alle Gewichte und Stile enthält — statt für jede Variante eine eigene Datei zu laden. Ein Variable Font kann Weight, Width, Italic-Winkel und andere Achsen in einem Kontinuum darstellen. Das reduziert HTTP-Requests und Dateigröße erheblich, wenn mehrere Varianten benötigt werden. Variable Fonts lohnen sich dort, wo das Schriftgewicht als gestalterisches Mittel variiert wird — und können gegenüber mehreren statischen Schriftschnitten oft einige hundert KB sparen.

Ein weniger bekanntes, aber wirkungsvolles Thema ist optisches Kerning und Textrendering. Große Überschriften mit langer Laufweite sehen oft besser aus, wenn font-kerning: auto aktiviert ist und text-rendering: optimizeLegibility gesetzt wird. Das betrifft vor allem Serifenschriften in Display-Größen. Im Fließtext hingegen kann optimizeLegibility die Performance beeinträchtigen — ein klares Beispiel dafür, dass typografische Entscheidungen im Web immer auch technische Konsequenzen haben.

Zeilenlänge und Lesbarkeit

Die optimale Zeilenlänge für Fließtext liegt zwischen 45 und 75 Zeichen. Kürzere Zeilen fühlen sich zerstückelt an, längere ermüden das Auge. Im Web wird das oft ignoriert — breite Container, volle Viewport-Breite, kein max-width auf dem Textblock. Das Ergebnis ist schwer lesbarer Langtext, der Besucher schnell abspringen lässt. Eine einfache Regel: Für Lesetexte niemals mehr als 70ch breite Textblöcke. Dieser einzelne Parameter verbessert die Lesequalität merklich.

• Fluid Type Scales mit clamp() für konsistente Größen auf allen Geräten
• Variable Fonts wo mehrere Gewichte gebraucht werden
• Zeilenlänge auf 45–75 Zeichen beschränken
• Zeilenhöhe im Fließtext mindestens 1.5, bei Überschriften 1.1–1.2
• Letter-Spacing nur bei Großbuchstaben und kleinen Labels einsetzen

Typografie ist das Handwerk, das am stärksten zwischen professioneller und amateurhafter Arbeit unterscheidet — und gleichzeitig das, das am wenigsten bewusst wahrgenommen wird. Gute Typografie fällt nicht auf. Sie macht das Lesen einfacher, das Verstehen schneller und den Gesamteindruck stimmiger. Das ist das Ziel.