Typografie im Web: Schriften wählen und kombinieren

Der größte Teil einer Website ist Text. Typografie, also die Gestaltung mit Schrift, entscheidet deshalb mehr als jedes andere Gestaltungsmittel darüber, ob eine Seite angenehm zu lesen ist und welchen Charakter sie ausstrahlt. Dieser Ratgeber erklärt die Grundbegriffe, die wichtigsten Maße und wie Schriften im Web technisch richtig eingebunden werden.

Die wichtigsten Begriffe

• Schriftfamilie: alle Varianten einer Schrift, zum Beispiel Regular, Italic, Bold.
• Schriftschnitt: eine einzelne Variante, etwa “Semibold Italic”.
• Variable Font: eine Schriftdatei, die viele Gewichte oder Breiten stufenlos enthält. Das spart oft Dateien und Ladezeit.
• Laufweite: der Abstand zwischen den Buchstaben eines Wortes insgesamt.
• Kerning: der Abstand zwischen bestimmten Buchstabenpaaren, etwa “AV”.
• x-Höhe: die Höhe der Kleinbuchstaben ohne Ober- und Unterlängen. Schriften mit großer x-Höhe wirken bei gleicher Schriftgröße größer und sind oft gut lesbar.

Schriftklassen im Überblick

Für die Praxis genügt eine grobe Einteilung:

Schriftgröße, Zeilenabstand und Zeilenlänge

Drei Maße entscheiden über die Lesbarkeit von Fließtext:

1. Schriftgröße: Browser verwenden standardmäßig 16 Pixel. Das ist ein guter Ausgangswert, für längere Artikel darf es mehr sein. Angaben in der relativen Einheit rem beziehen sich auf die Grundgröße im Browser, sodass Menschen, die eine größere Schrift eingestellt haben, sie auch bekommen.
2. Zeilenabstand: Für Fließtext bewährt sich ein Wert zwischen etwa 1,4 und 1,7 der Schriftgröße. Überschriften brauchen weniger, oft 1,1 bis 1,3.
3. Zeilenlänge: Rund 60 bis 75 Zeichen pro Zeile gelten als angenehm. Bei sehr langen Zeilen findet das Auge den Anfang der nächsten Zeile schwer, bei sehr kurzen springt es ständig.

Eine Größenskala statt Zufallswerten

Statt jede Überschrift einzeln festzulegen, arbeiten viele Gestalter mit einer Skala: Jede Stufe ist um einen festen Faktor größer als die vorige. Bei einem Faktor von 1,25 wird aus 16 Pixeln Fließtext eine Folge von 20, 25, 31 und 39 Pixeln für die Überschriften. Das Ergebnis wirkt harmonisch, weil die Größen in einem nachvollziehbaren Verhältnis stehen.

Auf dem Smartphone darf die Skala flacher sein als am Desktop, sonst werden Hauptüberschriften auf schmalen Bildschirmen riesig. Moderne CSS-Funktionen wie clamp() lassen Schriftgrößen stufenlos zwischen einem Minimum und einem Maximum mitwachsen.

Schriften kombinieren

Die sicherste Kombination ist eine einzige gut ausgebaute Schriftfamilie, deren Schnitte für Überschriften und Text genutzt werden. Wer zwei Schriften mischt, sollte auf einen deutlichen Unterschied achten, etwa:

• eine kräftige Serifenschrift für Überschriften und eine ruhige Grotesk für den Text,
• eine geometrische Grotesk für Überschriften und eine humanistische Grotesk für den Text,
• gemeinsame Merkmale wie eine ähnliche x-Höhe, damit beide auf einer Zeile zusammenpassen.

Zwei Schriften, die sich nur ein wenig unterscheiden, wirken dagegen wie ein Versehen. Mehr als zwei Familien braucht kaum eine Website.

Webfonts technisch richtig einbinden

Schriften werden im Web als Dateien geladen. Damit das schnell geht und rechtlich sauber ist:

• Format WOFF2 verwenden. Es ist stark komprimiert und wird von allen aktuellen Browsern unterstützt.
• Nur benötigte Schnitte laden. Jeder zusätzliche Schnitt ist eine weitere Datei. Oft reichen Regular und Bold oder ein variabler Font.
• Zeichensätze beschränken. Für deutschsprachige Seiten genügt meist der lateinische Zeichensatz mit Umlauten.
• font-display: swap setzen. Dann zeigt der Browser den Text sofort in einer Systemschrift und tauscht sie aus, sobald der Webfont geladen ist.
• Lokal ausliefern. Werden Schriften von einem fremden Server wie Google Fonts geladen, wird die IP-Adresse der Besucher dorthin übertragen. Das Landgericht München I hat 2022 in einem viel beachteten Urteil einem Kläger deshalb Schadensersatz zugesprochen. Die Dateien vom eigenen Server zu laden, vermeidet dieses Problem und ist meist auch schneller.
• Lizenz prüfen. Freie Schriften stehen oft unter der SIL Open Font License, kommerzielle Schriften brauchen eine Weblizenz, die manchmal nach Seitenaufrufen berechnet wird.

Systemschriften als Alternative

Jedes Betriebssystem bringt gut lesbare Schriften mit. Ein sogenannter System-Font-Stack nutzt automatisch die Schrift des jeweiligen Geräts. Das kostet keine Ladezeit und wirkt vertraut, ist aber weniger eigenständig. Für Werkzeuge, Dashboards und schnelle Seiten ist das eine gute Wahl, für Marken mit ausgeprägtem Charakter eher nicht.

Typografie und Barrierefreiheit

Gute Typografie ist auch zugänglich: ausreichender Kontrast, keine Texte in Bildern, Schriftgrößen, die sich vergrößern lassen, ohne dass das Layout zerbricht, und keine langen Passagen in Großbuchstaben oder kursiv. Was die WCAG dazu verlangen, steht im Ratgeber Barrierefreies Webdesign. Wie Schrift mit Farbe und Raster zusammenspielt, erklären die Grundlagen guter Gestaltung.