Die line-height-Eigenschaft

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Alle Textelemente auf einer Webseite verfügen über die Eigenschaft line-height. Diese erstreckt sich vom obersten Punkt des höchsten Buchstabens in einer Zeile bis zum obersten Punkt des höchsten Buchstabens in der folgenden Zeile. Standardmäßig erzeugt der Browser immer automatisch einen Abstand, der groß genug ist, dass übereinander stehende Zeilen optisch auseinander gehalten werden können und gut lesbar sind. Hat die Schrift in einem Absatz etwa eine Größe von 12 Punkt, drückt der Browser die Zeilen um weitere zwei Punkt auseinander, was einer line-height von insgesamt 14 Punkt entspricht.

Wenn Sie line-height für ein Element wie einen Absatz oder eine Überschrift einsetzen, weisen Sie den Browser also an, den Zeilenabstand entweder zu vergrößern oder zu verkleinern. Der Zeilenabstand wird in der Typografie Durchschuss genannt, ein Begriff, der noch aus der Zeit stammt, als zum Drucken einer Papierseite noch jede einzelne Zeile in Blei gegossen und hinterher mit den anderen Zeilen zu einer Druckvorlage zusammengefügt wurde. Um zwischen den Zeilen einen für die Lesbarkeit ausreichenden Abstand zu schaffen, wurden kleine Metallstreifen, sogenannte Regletten, dazwischengefügt und die Zeilen damit »durchschossen«.

Ein gut skalierter Durchschuss sorgt für zusätzlichen Weißraum und ist ein gutes Stilmittel, um das Designniveau einer Webseite typografisch deutlich anzuheben. Ein Beispiel:

Mit Hilfe dieser Stilregel wird eine Zeilenhöhe von 1.5em – das entspricht der anderthalbfachen Schriftgröße – erzeugt, zu sehen in der folgenden Abbildung.

Abbildung: Vergrößerter Durchschuss mit line-height.

Beachten Sie, dass sich relative Werte in line-height anders verhalten als bei den meisten anderen Schrifteigenschaften: Relative Werte in line-height benutzen als Ausgangswert immer die Schriftgröße jenes Elements, für das sie definiert werden, und nicht etwa die Werte ihres übergeordneten Elements (wie zum Beispiel bei font-size)!

Nehmen wir zum Beispiel einen p-Absatz mit einer Schriftgröße von 12 Pixel und umschließen wir ihn mit einem <div>-Tag, dessen Schriftgröße mit 18 Pixel definiert wird. Wenn Sie jetzt die line-height im p-Absatz mit 2em festlegen, wird für die Berechnung der Zeilenhöhe die doppelte M-Höhe von 12 Pixel (also die doppelte Schriftgröße von p selbst) genommen. Die Schriftgröße des übergeordneten Elements div hat dabei keinen Einfluss auf die Berechnung.

Die Eigenschaft line-height bietet darüber hinaus eine weitere Besonderheit, die wir uns genauer anschauen wollen: Sie ist die erste CSS-Eigenschaft in diesem Buch, der auch relative numerische Werte ohne Maßeinheit zugewiesen werden können. So im folgenden Beispiel:

Die Zeilenhöhe wird mit demselben Ausgangswert wie in unserem letzten Beispiel berechnet, line-height entspricht also auch hier der doppelten Schriftgröße von p.

Wenn sie für dasselbe Element definiert werden, führen also relative Werte mit und ohne Maßeinheit zum gleichen Ergebnis. Trotzdem gibt es einen wichtigen Unterschied zwischen ihnen. Dieser tritt in ihrer Vererbung auf.

Um uns diesen Unterschied deutlich zu machen, nehmen wir wieder einen p-Absatz, der in einen div-Bereich eingebettet ist. div erhält eine Schriftgröße von 12px, p eine font-size von 22px. Zusätzlich definieren wir für div eine line-height von 1.5em. Wir schauen uns an, was passiert: Zuerst wird die Zeilenhöhe von div berechnet. Sie entspricht 18 Pixel. Dieser Wert wird nun als absoluter Wert an das untergeordnete Element p weitervererbt. Für p beträgt die Zeilenhöhe dadurch automatisch ebenfalls 18 Pixel, unabhängig von der Größe der Schrift in p.

Wir nehmen einen zweiten div-Bereich mit einem untergeordneten p-Absatz und verwenden die gleichen Schriftgrößen wie zuvor. Nun legen wir die line-height für div mit einem relativen Wert ohne Maßangabe fest, und zwar mit 1.5. Wieder wird zuerst die Zeilenhöhe von div berechnet. Auch hier entspricht sie mit 18 Pixel der anderthalbfachen Schriftgröße. An p vererbt wird aber diesmal der numerische Wert selbst und nicht die damit bereits berechnete absolute Zeilenhöhe von div. Die line-height von p wird anhand seiner eigenen Schriftgröße neu berechnet. Heraus kommt die wesentlich größere Zeilenhöhe von 33 Pixel.

Die folgende Abbildung veranschaulicht unser Beispiel. Die div-Bereiche enthalten jeweils den p-Absatz mit dem Text. Für den oberen div-Bereich wurde die Zeilenhöhe mit 1.5em festgelegt, für den unteren Absatz mit 1.5. Man sieht deutlich, wie im ersten Absatz die geringere Zeilenhöhe von div an p vererbt wurde und im zweiten Absatz die Zeilenhöhe anhand der größeren Schrift in p mit dem vererbten Wert aus div neu berechnet wurde.

Der erste Absatz wird von einem <div>-Tag mit einer line-height von 1.5em umschlossen. Die für den div-Bereich gültige und an den p-Absatz vererbte Zeilenhöhe errechnet sich als die doppelte Schriftgröße des div-Elements. Da in dem p-Absatz aber eine wesentlich größere Schrift verwendet wird (16 pt) als in dem div-Bereich (8 pt), reicht die vererbte Zeilenhöhe (8 × 1,5 = 12 pt) nicht aus, um einen großen Zeilenabstand zu erzeugen.

Abbildung: Vererbung von relativen Maßangaben und numerischen Werten für line-height.

Der zweite Absatz wird von einem <div>-Tag umschlossen, dessen line-height mit dem numerischen Wert 1.5 definiert ist. Dadurch wird nicht etwa die Zeilenhöhe von div an p vererbt, sondern allein der Multiplikator 1,5. Die Zeilenhöhe für p wird mit dem numerischen Wert und der Schriftgröße von p neu berechnet. Das Resultat ist ein deutlicher Zeilenabstand, der der anderthalbfachen Schriftgröße von p entspricht und für eine bessere Lesbarkeit sorgt.

Es empfiehlt sich also, relative Werte ohne Maßeinheit für line-height anzuwenden, weil sie den relativen Charakter eher bewahren und somit vor fehlerhaften Darstellungen schützen. Relative Werte mit Maßeinheiten (oder absolute Werte in Punkten oder Pixel) wiederum eignen sich besser für effektorientierte Designs, in denen etwa Textzeilen ineinander fließen oder gestapelt werden.