CSS, HTML und Javascript mit {stil}

CSS line-height • Zeilenhöhe

CSS line-height mit baseline (Grundlinie)

line-height ist Höhe einer Zeile. Die Zeilenhöhe eines Textes hängt per Vorgabe von der Schriftgröße ab. Die Zeilenhöhe ist ein wichtiger Faktor für die Lesbarkeit des Textes.

line-height kann mit fünf Typen von Werten notiert werden:

body {
 font-family: Times, serif; 
 font-size: 110%;
 line-height: 1.5;
}
Werte
normal | <number> | <length> | <percentage> | inherit
normal
ist die Voreinstellung. Die Deklaration von normal stellt sicher, dass vorangegangene Deklarationen die Zeilenhöhe nicht beeinflussen.
length
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel). Da die Lesbarkeit von Text von der Schriftgröße abhängt, sind feste Werte wie px nicht empfehlenswert.
percentage (Prozentsatz)
basiert auf der normalen Zeilenhöhe, die als 100% angesetzt wird.
number
ist ein Faktor, mit dem die Schriftgröße multipliziert wird, um die Zeilenhöhe zu berechnen. Funktioniert im Grunde genommen genauso wie Angaben in %, wobei 150% dasselbe ist wie 1.5. Allerdings ist 1.5 kompakter.
inherit (erben von Elternelement)
Das Element erbt die Zeilenhöhe von seinem Elternelement.

Die Angabe eines Faktors – z.B. 1.5 oder als 150% geschrieben – eignet sich am besten als Vorgabe für line-height. 1.5 oder 150% eignet sich sich für den Bodytext, 1.2 oder 120% für Überschriften.

Alle Werte für line-height können auch in der Kurzschrift font verwendet werden. Dabei wird line-height immer zusammen mit font-size geschrieben, und immer getrennt durch einen Schrägstrich:

body { font: 16px/170% Arial, sans-serif; }
 ^             ^    ^    ^
 |             |    |    |
 |             |    |    +-- font-family
 |             |    |
 |             |    +-- line-height
 |             |
 |             +-- font-size
 |
 +-- vererbt line-height

line-height und Inline-Boxen

line-height wirkt als Eigenschaft nicht nur auf den Inhalt von Blockelementen wie p, div, li, sondern auch auf inline-Boxen wie em, strong und a. Ist line-height bei einer Inline-Box größer als der die Zeilenhöhe des Textblocks, dehnt die Inline-Box den verfügbaren Platz innerhalb ihrer Zeile.

Die Höhe einzelner Zeilen wird immer durch die höchste line-height der Inline-Boxen bestimmt.

.demo1 { font-family: Times, serif; font-size:18px; line-height: 150% }
.demo1 em { line-height: 42px; border:1px solid white}
Quisque egestas risus id pretium tristique. Morbi posuere nisl ex, id placerat metus maximus non. Etiam placerat, nibh in placerat egestas, nunc ante sodales urna, quis malesuada lacus eros aliquam neque.
.demo2 { font-family: Times, serif; font-size:18px; line-height: 150% }
.demo2 em { font-size: 36px; }
Quisque egestas risus id pretium tristique. Morbi posuere nisl ex, id placerat metus maximus non. Etiam placerat, nibh in placerat egestas, nunc ante sodales urna, quis malesuada lacus eros aliquam neque.

sup- und sub-Boxen (superscript und subscript) können ebenso die höchste Inline-Box bilden und die betroffenen Zeilen »strecken«.

Quisque egestas risus id pretium tristique. Morbi posuere nisl ex, id placerat metus maximusAus: Lorem Ipsum non. Etiam placerat, nibh in placerat egestas, nunc ante sodales urna, quis malesuada lacus eros aliquam(2, 3, 5) neque.

Damit das nicht passiert, setzt man die Zeilenhöhe von sup- und sub-Elementen auf 0:

sub, sup { line-height: 0 }
font-size und line-heightEinHundgroßerDurchschussEinHundgroßerline-height:20pxline-height:16pxfont-size:18pxfont-size:14px

line-height und Inheritance (Vererbung)

line-height wird vererbt – z.B. von body auf die Elemente p, .demo und footer.

body   { font-size: 18px; line-height: 170%; }
h3     { font-size: 32px; } 
.news  { font-size: 16px; } 
footer { font-size: 12px; }

Aus dem Wert von line-height und der Schriftgröße des Body-Elements wird der Zeilenabstand der erbberechtigen Elemente berechnet.

18 x 170% = 30.6px

Diese Zeilenhöhe wird an alle Elemente vererbt.

Aus dem zweiten Buch der zweifelhaften Geschichten
Quisque egestas risus id pretium tristique. Morbi posuere nisl ex, id placerat metus maximus non. Etiam placerat, nibh in placerat egestas, nunc ante sodales urna, quis malesuada.
Quisque egestas risus id pretium tristique. Morbi posuere nisl ex, id placerat metus maximus non. Etiam placerat, nibh in placerat egestas, nunc ante sodales urna, quis malesuada.

Wird line-height: normal eingesetzt, wird der normale Wert anstelle des berechneten Werts an die Erben weitergegeben – die Browser setzen 120% der Schriftgröße für die Zeilenhöhe an.

Bei der Angabe eines Faktors (line-height:1.5) hingegen erben die Nachkommen den Faktor und keine berechnete Zeilenhöhe und alle Elmente haben dann eine Zeilenhöhe relativ zu ihrer Schriftgröße.

CSS line-height / was ist 1em1em

line-height und Lesbarkeit

Die vorgegebene Zeilenhöhe (Abstand von Grundlinie zu Grundlinie) ist aus dem Print entlehnt und für das Lesen auf dem Monitor fast immer zu gering. Darum vergrößern viele Webdesigner die Zeilenhöhe – meist werden Zeilenhöhen zwischen 130 bis 150 % empfohlen.

Ein optimaler Zeilenabstand hängt nicht nur von der Schriftgröße, sondern auch von der Laufweite des Textes ab: Die Daumenregel besagt, dass für die bessere Lesbarkeit eines Textes die Zeilenhöhe um so größer sein soll, je länger die Textzeilen laufen. Der größere Zeilenabstand hilft dem Auge, die Zeile zu halten. Ein zu großer Zeilenabstand führt dann zu einem Text in Streifen anstelle eines einheitlich Erscheinungsbilds der Seite.

Das Lesen eines Textes auf dem Monitor fällt leichter, wenn der Zeilenabstand größer als 120% ist.

Das Lesen eines Textes auf dem Monitor fällt leichter, wenn der Zeilenabstand größer als 120% ist.

p { line-height: 150%; }

Der Durchschuss oder Abstand von Textpassagen (z.B. in p- oder li-Tags) wird durch CSS margin festgelegt.

Grundliniebaseline1em Typografie