CSS line-height: Mit Zeilenabstand auf Webseiten die Lesbarkeit erhöhen

Dienstag, 25 August 2009 13:45 MET

Thema:: Webgestaltung, Ausgewählte Artikel
Stichworte:: benutzerfreundlich, CSS

dieser Artikel: CSS line-height: Mit Zeilenabstand auf Webseiten die Lesbarkeit erhöhen [hyperkontext | Weblog]; Kommentare 4

Laut einer Aussendung des BITKOM klagen 47 Prozent der Anwender über schlechte Lesbarkeit von Texten auf Websites. Vermutlich auch auf der des BITKOM. Geeigneter Zeilenabstand in Fließtexten ist dabei eine wichtige Komponente.

Ich habe Erkenntnisse und Beiträge der letzten Jahre zusammengetragen und geordnet. Die Zeilenhöhe (Zeilenabstand) in Fließtexten auf Webseiten sollte 140 bis 160 Prozent der Schriftgröße betragen. Die Spannbreite bewegt sich zwischen 120 und 200 Prozent.

Lesbarkeit von Fließtexten

Den derzeitigen Lesekomfort der Texte auf der Website des Deutschen BITKOM (Bundesverband Informationswirtschaft, Telekommunikation und neue Medien e.V.) bezeichne ich als suboptimal. Skurril wird es aber, wenn dort ein Artikel erscheint, der, neben Programmen, auch die schlechte Lesbarkeit von Texten auf Websites moniert.

Laut dieser Mitteilung klagen 47 Prozent über zu kleine Schrift auf Webseiten und anderen Anwendungen. Es werden auch noch Tipps gegeben, welche Möglichkeiten Anwender selbst haben, den Lesekomfort zu erhöhen. Das Fazit richtet sich vor allem an Ersteller von Programmen und Websites:

Maßgabe ist aus Sicht des BITKOM, dass Anwendungen und Benutzeroberflächen möglichst für alle Nutzer, also auch für ältere Menschen und Personen mit Behinderungen, möglichst ohne fremde Hilfe nutzbar sind (»Barrierefreiheit«). […] Der BITKOM empfiehlt daher, bei der Erstellung von Software und Webseiten die ergonomischen Anforderungen möglichst sämtlicher Anwender ausreichend zu berücksichtigen. Häufig sind Texte am Computer nur schwer zu lesen

Werfen wir einen Blick (2009-08-25) auf das CSS (Cascading Style Sheets) der Site des BITKOM:

Die Schriftart Arial wird mit einer Größe von 12px angegeben. Diese Kombination enstpricht nicht gerade den Erkenntnissen lesefreundlicher Anforderungen.
Wenn dann auch noch die Zeilenhöhe im Fließtext mit 15px festgezurrt ist, lässt das am Verständnis der ergonomischen Anforderungen einer Website schon stark zweifeln.

Wenn im Text auf der eigenen Website nicht einmal Listenpunkte sichtbaren Abstand haben, durch die Angabe in Pixel die Schrift auf manchen Ausgabeprogrammen (IE) nicht vergrößert werden kann, die Zeilenhöhe nicht gerade die Lesbarkeit fördert und der gesamte Text damit zu einer langen Wurst wird, dann wirkt diese Presseaussendung wie Selbstironie.

Das ist natürlich kein Einzelfall und ein zeitgeistiges Symptom.

Ein sinnvoller Vorgang wäre vielmehr, mit der Arbeit anzufangen, die eigene Website nach benutzerfreundlichen Gesichtspunkten zu optimieren und dies seinen Mitgliedern anschließend als Anleitung und Vorbild zu kommunizieren.

Nachfolgend habe ich Erkenntnisse und Beiträge der letzten Jahre zum optimalen Zeilenabstand zusammengetragen und geordnet.

Welcher Zeilenabstand das Lesen angenehmer macht

Ich beschränke mich in meiner Betrachtung vor allem auf die Zeilenhöhe – oft auch Zeilenabstand genannt – in Fließtexten auf Webseiten. Die Schriftgröße, Spaltenbreite und Zeilenhöhe stehen natürlich in Wechselwirkung zueinander.

Handwerkliche Grundlagen

Zumindest für Fließtexte die Zeilenhöhe immer angeben.
Ohne Angabe von line-height sind die Standardanzeigen auf verschiedenen Browsern auch verschieden. Sie variieren von 111 (Firefox) bis 120 Prozent (Safari) Zeilenhöhe.

Auftretende Probleme im Zeilenrhythmus durch die HTML-Elemente sub und sup, also tiefer- und höhergestellter Text, lassen sich übrigens sehr leicht lösen: Superscripts, Subscripts & the Uneven Line Height Problem.
Zeilenhöhe relativ angeben.
Die Zeilenhöhe richtet sich nach der Schriftgröße und braucht daher auch eine relative Angabe. In der Regel wird die CSS-Eigenschaft line-height also nicht mit absoluter Einheit (px, cm, pt) notiert.

Geeignete Notierungen sind Prozent, em, ex oder gar keine Einheit. Eine eineinhalbfache Zeilenhöhe wird zum Beispiel angegeben mit:
- line-height: 150%;
- line-height: 1.5em; oder nur
- line-height: 1.5; – siehe hierzu Unitless line-heights, den legendären Eintrag von Eric Meyer aus 2006, in dem er auf diese Möglichkeit hinweist.
Mit solchen Angaben richtet sich die Zeilenhöhe bei Vergrößerung oder Verkleinerung automatisch an der Schriftgröße aus. Aus usprünglichen Pixelangaben lassen sich auch leicht die Proportionen aus- und umrechnen.

Russ Weakley von MaxDesign veröffentlichte unlängst samt Transkription die Präsentation Line-Height, die Schritt für Schritt den geeigneten Einsatz zeigt.
Hier der zugehörige Blogeintrag: CSS line-height - a simple step-by-step presentation.

Abhängigkeiten und Wechselwirkungen

Die spannende Frage ist nun, welche Relation denn die richtige Zeilenhöhe ist. Naturgemäß gibt es darüber unterschiedliche Meinungen. Vier Faktoren, die zueinander in Wechselwirkung stehen, haben wesentlichen Einfluss auf die Beantwortung dieser Frage:

Die Art der Schrift,
Schriftgröße,
die Länge der Zeile (Spaltenbreite) und eben
die Zeilenhöhe.

Gerade an dieser Frage zeigt sich, dass auch das visuelle Layout im Webdesign eine komplexe Anforderung für sich ist.

Im Wesentlichen hängt die befriedigende Antwort also davon ab, wie die visuelle Gestaltung der Website konzipiert ist.

Schmale oder breite Textspalten?
Fixes oder fluides Layout?
Wenn flexibel, in welchen Mindest- und Maximalbreiten bewegen sich die Fließtexte?
Die Farbgebung. Heller Text auf dunklem Hintergrund braucht tendenziell mehr Zwischenräume.

Auf der Website Typefacts können wir im Beitrag Zeilenabstand gleich ausprobieren, wie sich Änderungen an Zeilenlänge und -abstand auf das Schriftbild und die Lesbarkeit auswirken. Beachten Sie allerdings, dass die Site nicht speziell auf Web-Typografie fokussiert ist und die dort angegebenen Größen in pt (Punkt) nur für Druck-Stylesheets relevant sind!

Die Wechselwirkungen beschreibt Gerrit van Aaken schon 2004 und formuliert auch den Einfluss der Schriftart:

Gerade bei Schriften mit größerer x-Höhe wie Arial oder Trebuchet sollte man für ausreichend Zeilenabstand sorgen. Bitte Abstand halten

Richard Rutter erschuf 2005 den Praktischen Leitfaden zur Web-Typografie und nennt den zweiten Teil Rhythmus und Proportionen. Speziell zur Zeilenhöhe empfehlen sich diese zwei Abschnitte:

Weiters schrieb Rutter 2006 im weihnachtlichen Kalender 24ways.org einen interessanten Eintrag zum vertikalen Rhythmus einer Webseite.

Im Blogeintrag Lead weight behandelt Andy Clarke auch die Zeilenhöhe.
Dieses Blog ist übrigens Teil der Website For A Beautiful Web, die auf Workshops, Bücher und Vortragsreihen hinweist und eine Augenweide für sich ist.

Die WCAG 2.0 empfiehlt eine Zeilenhöhe zwischen dem eineinhalb- bis zweifachen der Schriftgröße. Die Jungs von KingGdesk zeigen hingegen eindrücklich, dass bei einer relativ schmalen Textspalte von 27em eine Zeilenhöhe von 1.2em oder 120% völlig ausreicht: Optimal Line Height.

Fazit

Es lässt sich im Großen und Ganzen eine Faustregel formulieren: Die Zeilenhöhe (Zeilenabstand) in Fließtexten auf Webseiten sollte in den meisten Fällen 140 bis 160 Prozent der Schriftgröße betragen.

Die realistische Spannbreite bewegt sich allerdings – abhängig von einigen Faktoren – zwischen 120 und 200 Prozent der Schriftgröße.