Web-Typografie und Lesbarkeit: Ein praktischer Leitfaden
Die Lesbarkeit einer Seite kommt weniger von der Schriftwahl als von Zeilenlänge und Zeilenhöhe. Ein praktischer Leitfaden, inklusive Umlaute und ß.
rabbitclip-TeamVeröffentlicht: 5 Min. Lesezeit
Kurz gesagt
Die Lesbarkeit einer Seite kommt nicht allein aus der Schriftwahl; Zeilenlänge und Zeilenhöhe zählen mindestens so sehr wie die Schrift selbst, ebenso die Größenskala. Der WCAG-Standard empfiehlt eine Zeilenhöhe von mindestens dem 1,5-Fachen der Schriftgröße innerhalb eines Absatzes und erwartet, dass sich diese Einstellung an die eigene Präferenz eines Nutzers anpassen lässt (W3C WCAG 2.1, Text Spacing).
Für eine deutschsprachige Seite verdienen Umlaute (ä, ö, ü) und das ß eine eigene Prüfung; nicht jede Schrift zeichnet sie in derselben Qualität, in manchen Schriften wirkt das ß zu schmal oder wird mit einem großen B verwechselt. Das ist ein Detail, das in der Designphase leicht übersehen wird, aber die Lesbarkeit direkt betrifft.
Im Folgenden vier Themen: Schriftwahl, Größenskala, Zeilenlänge und die Prüfung von Umlauten und ß.
Worauf bei der Schriftwahl geachtet wird
Eine Fließtextschrift braucht eine mittlere Laufweite und klare Buchstabenformen, damit lange Absätze das Auge nicht ermüden; eine Überschriftenschrift kann mehr vom Charakter der Marke tragen, weil kurze Texte weniger Lesbarkeitsrisiko bergen. Beide müssen nicht aus derselben Schriftfamilie stammen; zwei gut zusammenpassende Schriften funktionieren meist besser, als eine Schrift für beide Aufgaben zu zwingen.
Wird auf der Seite einer Anwaltskanzlei eine dünne, dekorative Schrift im Fließtext eingesetzt, werden lange Passagen wie Vertragsbedingungen schwer lesbar; die dekorative Schrift kann bei Überschriften bleiben, während der Fließtext auf eine schlichtere Schrift wechselt.
Skala: wie viele Größen reichen aus
Eine klare Skala mit drei oder vier Stufen (Überschrift, Zwischenüberschrift, Fließtext, kleiner Hinweis) funktioniert besser als fünf oder sechs kaum unterschiedliche Schriftgrößen; sie liefert sowohl Konsistenz als auch eine klare Regel für die Entwicklung. Jede Stufe sollte deutlich größer oder kleiner sein als die vorherige; zu nahe beieinanderliegende Größen wie 16px und 17px fallen visuell nicht auf, sie fügen nur Unordnung hinzu.
Warum die Zeilenlänge zählt
Zu viele Zeichen in einer Zeile, und das Auge findet den Anfang der nächsten Zeile nur schwer; zu wenige, und das Auge springt ständig zur nächsten Zeile, der Leserhythmus bricht. Ein brauchbarer Bereich liegt bei sechzig bis achtzig Zeichen pro Zeile, das heißt, Text sollte auf einem breiten Bildschirm in einer begrenzten Spalte stehen, nicht über die volle Breite reichen.
Lässt eine technische Dokumentationsseite eines Bodenbelagherstellers den Text über den ganzen Bildschirm laufen, können Zeilen auf einem breiten Monitor zweihundert Zeichen überschreiten; die Lösung ist, den Inhalt auf eine feste Spaltenbreite zu setzen und den Rest der Fläche leer zu lassen oder für ein Bild zu nutzen.
Wie Umlaute und das ß geprüft werden
Bevor eine Schrift ausgewählt wird, sollten alle Umlaute (ä, ö, ü) und das ß in Überschrift und Fließtext mit echtem Text getestet werden, nicht nur mit englischem Platzhaltertext. In manchen Schriften wirkt das ß zu schmal oder wie ein großes B, in anderen sitzen die Punkte über ä und ö zu weit oben oder zu klein; solche Details fallen erst am Bildschirm bei größerer Darstellung auf.
- Überschrift und Fließtext mit echtem deutschsprachigem Text vorab geprüft
- ä, ö, ü und ß bei mehreren Größen kontrolliert
- Fettschrift (bold) auf dieselben Zeichen hin geprüft
- Lesbarkeit bei kleiner mobiler Größe separat getestet
Die eigene Einstellung des Nutzers respektieren
Manche Besucher vergrößern die Schrift über die Browsereinstellungen; ist die Seite mit festen Pixelwerten aufgebaut, die diese Vergrößerung blockieren, funktioniert diese Präferenz nicht. Größen in flexiblen Einheiten wie rem zu definieren, lässt die eigene Einstellung eines Besuchers auch auf der Seite gelten; das ist ein kleiner, praktischer Schritt für Barrierefreiheit und für Besucher mit eingeschränktem Sehvermögen.
Wie variable Schriften bei der Geschwindigkeit helfen
In einer klassischen Einrichtung ist jede Schriftstärke (dünn, normal, fett) eine eigene Datei; eine variable Schrift (variable font) trägt alle Stärken in einer einzigen Datei, der Browser erzeugt die benötigte Stärke aus dieser einen Datei. Das bedeutet einen einzigen Download statt fünf oder sechs.
Nutzt eine Marke drei oder vier verschiedene Stärken, senkt eine variable-Schrift-Einrichtung sowohl die gesamte Dateigröße als auch gibt sie einem Designer die Freiheit, eine Zwischenstärke zu nutzen, etwa zwischen normal und fett; die meisten aktuellen Browser unterstützen das, aber ein Fallback lohnt sich, wenn Unterstützung für ältere Browser noch zählt.
Tabellenziffern für Zahlen, die nebeneinanderstehen
Stehen die Zahlen in einer Preistabelle oder einem technischen Datenblatt nicht spaltenweise auf einer Linie, tut sich das Auge beim Vergleich schwer. Das liegt meist daran, dass eine Schrift standardmäßig proportionale Ziffern verwendet, bei denen jede Zahl eine andere Breite einnimmt; werden Tabellenziffern (tabular figures) aktiviert, hat jede Ziffer dieselbe Breite, die Spalten richten sich sauber aus.
Stehen die Leistungswerte in der technischen Tabelle eines Generatorherstellers unausgerichtet nebeneinander, wird die Tabelle spürbar lesbarer, sobald diese Einstellung eingeschaltet wird; bei den meisten modernen Schriften genügt dafür eine einzige Zeile CSS.
Diese Einstellung ist nicht auf Tabellen beschränkt; derselbe Unterschied zeigt sich überall dort, wo Zahlen zum Vergleich nebeneinanderstehen, etwa in einer Preisliste oder bei Datums- und Uhrzeitanzeigen.
Lesbarkeit kommt nicht aus einer einzelnen Schriftentscheidung, sondern aus der Summe von Skala, Zeilenlänge und einem echten Zeichentest. rabbitclip prüft diese vier Punkte in jedem Designsystem mit echtem Inhalt; die Typografie Ihrer aktuellen Seite lässt sich gemeinsam durchgehen.
Häufige Fragen
Wie viele Schriften sollte eine Seite verwenden?
Meist zwei: eine für Überschriften, eine für Fließtext; mehr davon geht auf Kosten der Konsistenz.
Warum wird die Zeilenlänge auf sechzig bis achtzig Zeichen begrenzt?
Dieser Bereich lässt das Auge den Anfang der nächsten Zeile leicht finden; längere Zeilen brechen den Leserhythmus.
Stellt jede Schrift Umlaute und ß sauber dar?
Nein, in manchen Schriften wirken ä, ö, ü oder ß unsauber gezeichnet; das sollte vor der Auswahl mit echtem Text geprüft werden.
Womit sollte die Schriftgröße statt in Pixel definiert werden?
Mit einer flexiblen Einheit wie rem; so funktioniert die Vergrößerung eines Besuchers über die Browsereinstellung auch auf der Seite.
Sollte jedes Projekt eine variable Schrift verwenden?
Nein, bei einem Design mit nur einer Schriftstärke ist es nicht nötig; bei Projekten mit mehreren Stärken macht es einen Unterschied.
