Design · Gestaltung
Typografie im Web: Schriften wählen und gut lesbar setzen
Der größte Teil einer Website ist Text. Ob er gelesen wird, entscheidet die Typografie. Ein paar Regeln, die aus einer Seite eine gut lesbare Seite machen.
Kurz beantwortet
Gute Typografie im Web beginnt mit wenigen, gut lesbaren Schriften, meist einer für Überschriften und einer für Fließtext. Der Fließtext sollte mindestens 16 Pixel groß sein, mit einer Zeilenhöhe um das 1,5-Fache und Zeilen von etwa 45 bis 75 Zeichen. Klare Größenunterschiede zwischen Überschriften und Text schaffen Orientierung.
Schriften auswählen
Für die meisten Websites reichen zwei Schriften: eine für Überschriften, die Charakter zeigen darf, und eine für den Fließtext, die vor allem gut lesbar ist. Manche Auftritte kommen mit einer einzigen Schriftfamilie in mehreren Stärken aus.
- SerifenlosGrotesk
- Schriften ohne Füßchen, etwa Inter oder Roboto. Am Bildschirm sehr verbreitet, sachlich und gut lesbar.
- SerifAntiqua
- Schriften mit Füßchen. Wirken klassisch, eignen sich gut für längere Texte und Überschriften mit Anspruch.
- DisplayAuszeichnung
- Ausdrucksstarke Schriften für große Überschriften. In kleiner Größe oder für längere Texte ungeeignet.
Bei der Auswahl zählen Lesbarkeit in kleinen Größen, ein vollständiger Zeichensatz mit Umlauten und Sonderzeichen, mehrere Stärken und eine Lizenz, die den Einsatz im Web erlaubt.
Regeln für gut lesbaren Text
| Eigenschaft | Richtwert | Warum |
|---|---|---|
| Schriftgröße | mindestens 16 Pixel | auf dem Handy ohne Zoomen lesbar |
| Zeilenhöhe | etwa das 1,4- bis 1,7-Fache der Schriftgröße | das Auge findet den Anfang der nächsten Zeile |
| Zeilenlänge | etwa 45 bis 75 Zeichen | zu lange Zeilen ermüden, zu kurze zerhacken den Text |
| Absatzabstand | deutlich sichtbar | Absätze gliedern den Gedankengang |
| Ausrichtung | linksbündig | Blocksatz erzeugt im Web unruhige Lücken |
Hierarchie: Wichtiges sieht wichtig aus
Überschriften, Zwischenüberschriften und Fließtext brauchen klar unterscheidbare Größen. Besucher überfliegen eine Seite zuerst und lesen dann dort, wo sie etwas Passendes finden. Eine gute Hierarchie führt sie dahin.
Bewährt hat sich eine feste Abstufung von Schriftgrößen, die überall gleich verwendet wird, statt jede Überschrift einzeln festzulegen. Auf großen Bildschirmen dürfen Überschriften größer sein als auf dem Handy. Mit modernem CSS passen sich Größen fließend an die Bildschirmbreite an.
Typische Fehler
- zu viele verschiedene Schriften auf einer Seite
- hellgraue, dünne Schrift auf weißem Grund, die schick aussieht, aber schwer zu lesen ist
- lange Texte in Großbuchstaben oder in einer verspielten Schrift
- Zeilen über die gesamte Breite eines großen Monitors
- Text auf unruhigen Fotos ohne ausreichenden Kontrast
Schriften schnell und sauber laden
Jede Schrift und jede Stärke ist eine Datei, die geladen werden muss. Wenige Schnitte, das moderne Format WOFF2 und lokal auf dem eigenen Server abgelegte Dateien halten die Website schnell und vermeiden Datenschutzprobleme. Wie das geht, erklärt der Artikel Schriften DSGVO-konform einbinden.
Aus der Praxis von KKM-Design
Häufige Fragen
Darf ich jede Schrift auf meiner Website verwenden?
Nur, wenn die Lizenz den Einsatz im Web erlaubt. Viele Schriften, etwa die von Google Fonts, stehen unter freien Lizenzen. Bei gekauften Schriften regelt die Lizenz, ob und wie sie im Web genutzt werden dürfen.
Sollte die Website dieselbe Schrift wie das Logo verwenden?
Nicht zwingend. Logoschriften sind oft für große Darstellung gedacht und für Fließtext ungeeignet. Wichtig ist, dass die Schriften der Website zum Logo passen.
Was sind variable Schriften?
Schriftdateien, die mehrere Stärken oder Breiten in einer Datei enthalten. Sie sparen Ladezeit, wenn viele Schnitte gebraucht werden.
Kay Strack · Webdesigner und Cloud Engineer · KKM-Design