https://www.linotype.com/catalog/promotions.html
Webfonts von Linotype.com - Font-Technologie

Die Wahl des richtigen Zeilenabstands


Die Lesbarkeit von Text wird nicht nur durch die Auswahl der richtigen Schrift beeinflusst, auch der Zeilenabstand spielt eine wesentliche Rolle. Wie im Print überlässt der professionelle Webdesigner einen so wichtigen Parameter nicht den Automatismen im Browser und stellt die richtigen Werte manuell ein. Wir zeigen Ihnen, worauf Sie achten müssen.

Der Zeilenabstand ist keine unabhängige Größe, sondern muss immer zusammen mit der Schriftgröße und der Zeilenlänge betrachtet werden. Entscheidend ist, dass der Leser beim Zeilenwechsel die Orientierung behält und die folgende Zeile findet. Daraus folgen zwei einfache Regeln: Kurze Zeilen können enger aufeinander folgen als lange. Wenige Zeilen, wie zum Beispiel in Überschriften, brauchen weniger Abstand als ein langer, sich über viele Zeilen erstreckender Text.


Abbildung 1: Schriftgröße/Zeilenabstand bei der Überschrift: 33/34 Punkt
Schriftgröße/Zeilenabstand beim Fließtext: 16/22 Punkt
Überschrift und Fließtext sind beide gut lesbar, die Überschrift benötigte einen viel geringeren Zeilenabstand als der Fließtext


Und selbstverständlich können Sie den Zeilenabstand nicht beliebig vergrößern, da ab einem bestimmten Wert die Zeilen auseinanderfallen und nicht mehr als zusammenhängend wahrgenommen werden. Ein entspanntes Lesen des Textes ist dann nicht mehr möglich.


Abbildung 2: dieser Text ist inhaltlich und bezüglich der Schriftgröße mit dem Text auf Abbildung 1 identisch, wirkt aber durch einen zu großen Zeilenabstand zerrissen und ist dadurch schlecht lesbar.


Auch wenn letztendlich immer das geübte Auge des Gestalters entscheidet, gibt es doch ein paar Faustregeln, mit denen Sie einem passenden Zeilenabstand näher kommen können. Für die Zeilenlänge gelten in der Regel 50 bis 80 Anschlägen als gut lesbar. Vor allem bei einem flexiblen Seitenlayout im Web sollten Sie darauf achten, dass Zeilen mit mehr als 90 Anschlägen nicht vorkommen. Tipps zur Kontrolle der Zeilenlänge im Webdesign, finden Sie im Artikel Abstände und Weißraum.

Im Fließtext sollte der Zeilenabstand nach einer groben Regel ungefähr das Doppelte der Versalhöhe betragen. Da die Versalhöhe mit dem Schriftgrad nicht identisch ist, müssen Sie diese Größe abschätzen. Gut geeignet ist zum Beispiel der Großbuchstabe „H“, den Sie in Gedanken zweimal übereinander stellen. Die Grundlinie der nächsten Zeile sollte dann mindestens am Ende des zweiten Buchstabens liegen.

Bei Überschriften kann der Abstand durchaus auch mal geringer sein, selbst Unterlängen können schon mal in die nächste Zeilen ragen, wichtigstes Kriterium: Es sieht gut aus und ist noch zu lesen. In jedem Fall sollten Sie zur Festlegung des Zeilenabstandes im CSS die relative Einheit „em“ verwenden. Diese Einheit definiert sich relativ zur Schriftgröße und stellt sicher, das Text, dessen Schriftgröße vom Betrachter im Browser vergrößert wird, mit dem richtigen Zeilenabstand dargestellt wird.

Zum Schluss noch ein paar Wörter zum Zeilenabstand in Abhängigkeit von der verwendeten Schriftart. Serifen helfen meisten dabei, die Zeile beim Lesen zu halten, so dass Serifenschriften einen etwas geringeren Zeilenabstand vertragen als serifenlose.


Abbildung 3: Beide Schriften sind angenehm lesbar, wobei die der obere Absatz aus der Serifenschrift Palatino eText gesetzt wurde und bei einer Schriftgröße von 16 Punkt nur einen Zeilenabstand von 22 Punkt erhielt.
Der untere Absatz aus der serifenlosen Sinova erhielt bei einer Schriftgröße von 16 Punkt einen großzügigeren Zeilenabstand von 24 Punkt.


Auch die x-Höhe, also das Größenverhältnis von Buchstaben mit Oberlänge wie „h“ oder „T“ zu Buchstaben ohne wie „a“ oder eben „x“, macht sich bei der Wahl des richtigen Zeilenabstandes bemerkbar. Schriften mit einer kleinen x-Höhe lassen über den meisten Buchstaben etwas mehr Platz, der als zusätzlicher Zeilenabstand wahrgenommen wird. Für diese Schriften können Sie also den Zeilenstand etwas verringern. Da eine große x-Höhe sich aber positiv auf die Lesbarkeit auswirkt, kommen gerade im Web in der Regel Schriften mit einer große x-Höhe zum Einsatz, die eher einen etwas größeren Zeilenabstand brauchen.


Abbildung 4: Der obere Absatz wurde aus der Stempel Garamond gesetzt, die über eine normale x-Höhe verfügt und somit mit einem Zeilenabstand von 22 Punkt bei 16 Punkt Schriftgröße gut lesbar ist.
Der Absatz darunter liest sich auch gut, aber die hier verwendete Bookmania verfügt über eine relativ große x-Höhe und erhielt deshalb bei einer Schriftgröße von 16 Punkt einen größeren Zeilenabstand von 24 Punkt.