Zeilenhöhe, Schriftgröße und Co.

Die Zeilenhöhe bestimmen Sie über line-height, die Abstände zwischen Buchstaben über letter-spacing und schließlich dient word-spacing zur Definition der Abstände zwischen den Wörtern. Wenn Sie die Zeilenhöhe und die Schrift bei einem Absatz folgendermaßen bestimmen

dann ist der Text 12px groß, die Zeilenhöhe beträgt 16px. Die 4px, die die Zeile höher sind als die Schrift, werden halbiert und auf Ober- und Unterseite der Zeile verteilt. Der Standardwert von line-height ist normal. Wie viel das genau ist, hängt vom Browser ab, meistens ist es ein Faktor von 1.2.Fließtext wird durch einen etwas größeren Abstand besser lesbar, ein Faktor von 1.5 gilt allgemein als angemessen. Bei barrierefreien Angeboten darf es noch etwas mehr sein: Die Richtlinien für zugängliche Internetseiten des W3C (Web Content Accessibility Guidelines 2.0) empfehlen für Webseiten einen Faktor von 1.5 bis 2.Anders verhält es sich bei Überschriften. Hier können Sie auch als bewusstes Stilmittel einen kleineren Wert für die Zeilenhöhe verwenden.

Viele Einheiten zur Auswahl

Bei der Definition der Zeilenhöhe haben Sie die Qual der Wahl, neben festen Werten wie Pixeln stehen auch em, % oder ein einheitloser Wert zur Verfügung. Wenn Sie die Zeilenhöhe in Pixeln definieren, müssen Sie für alle Elemente, denen Sie eine andere Schriftgröße zuweisen, auch eine passende Zeilenhöhe festlegen.Nun zu den anderen möglichen Einheiten. Sehen wir uns die Funktionsweise von Prozent an. Nehmen wir ein Beispiel mit drei Absätzen mit verschiedenen Klassen:

Und benutzen folgende CSS-Angaben:

line-height ist eine Eigenschaft, die an Kindelemente vererbt wird. Wie groß ist also der Zeilenabstand der einzelnen Absätze?Dies kann man sich gut in Firebug ansehen, wenn man bei einem ausgewählten Element im rechten Bereich auf Berechneter Wert klickt: Alle Absätze haben eine Zeilenhöhe von 24px - ganz unabhängig von ihrer Schriftgröße.Der Grund hierfür: Bei body wird als line-height: 150% angegeben und zwar bei einer Schriftgröße von 16px. Jetzt werden 150 Prozent von 16px berechnet, was 24px ergibt. Und diese 24px werden als Wert für die Zeilenhöhe an alle untergeordneten Elemente vererbt. Genauso funktioniert es auch, wenn Sie anstelle von Prozent auf em ausweichen. Wenn sich die Zeilenhöhe hingegen immer der aktuellen Schriftgröße des Absatzes anpassen soll, erreichen Sie dies durch den einheitlosen Wert:

Dann wird 1.5 als Faktor genommen, mit dem die aktuelle Schrift multipliziert wird. Deswegen haben die Absätze immer eine andere berechnete Größe für line-height: Bei einer Schrift von 12px ist die Zeilenhöhe 18px, was sich aus 12 * 1,5 berechnet. Der zweite Absatz hat hingegen eine Schrift von 16px und eine Zeilenhöhe von 24px (16px * 1.5), beim letzten Absatz ist die Zeilenhöhe 30px hoch. Bei einer einheitlosen Zahl wären die Zeilenabstände bei einer größeren Schrift ebenfalls höher.In den Beispielen wurde Pixel als Einheit bei der Schriftgröße gewählt, weil sich damit leichter rechnen lässt - das Ganze funktioniert aber genauso, wenn Sie em als Einheit für die Schriftgröße benutzen.

Ausrichtung an einer Grundlinie

Eine wichtige Rolle spielt die Zeilenhöhe auch bei der Ausrichtung an einer Grundlinie. Dabei geht es darum, alle Elemente einer Webseite an imaginären Linien auszurichten, die den gleichen Abstand zueinander haben. Oft wird dabei die Zeilenhöhe auf einen festen Wert wie 18px gesetzt, der für alle Texte gilt. Dann hat aber beispielsweise ein kleiner dargestellter Text etwa in einer Seitenleiste denselben Zeilenabstand wie der Haupttext, der eine größere Schrift hat. Und das ist eigentlich unschön.