CSS line-height • Zeilenhöhe

CSS line-height, Zeilenhöhe mit baseline (Grundlinie)

line-height bestimmt die Höhe einer Zeile und ist entweder eine Längenangabe wie 1.5em oder wird ohne Maßeinheit z.B. als 1.4 geschrieben. Die Wahl der Zeilenhöhe orientiert sich vor allem an der Länge der Zeile und sorgt für eine gute Lesbarkeit.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Höhe von Textzeilen: line-height

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). Ziemlich neu die das Maß cap. 1cap ist die Höhe der Großbuchstaben der Schrift.
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 und die sicherste Schreibweise.
inherit (erben von Elternelement)
Das Element erbt die Zeilenhöhe von seinem Elternelement.

Der Wert für line-height kann auch in der Kurzschrift font für Schriftgröße, Zeilenhöhe und Schriftfamilie stehen. Dabei wird line-height immer zusammen mit font-size geschrieben, und immer getrennt durch einen Schrägstrich:

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

Die Angabe eines Faktors – z.B. 1.5 für 150% – eignet sich am besten als Vorgabe für line-height und vermeidet die Kämpfe bei Änderungen der Schriftgröße.

Das Sicherste ist line-height ohne Maßeinheit
line-height mit px, em oder % kämpfen mit der Vererbung (Inherit).
Das Sicherste ist line-height ohne Maßeinheit
line-height mit px, em oder % kämpfen mit der Vererbung (Inherit).
.mit { line-height: 110%;}

.ohne { line-height: 1.1; }

h1 { font-size: 26px; }

.textblock { font-size: 1.2em;}

Inherit – das Erben von Eigenschaften des Elternelements – vereinfacht den Aufbau des Seitenlayouts, aber bringt auch Stolperfaller mit.

line-height und Inline-Boxen

line-height wirkt als Eigenschaft nicht nur auf den Inhalt von Blockelementen wie div, p oder li, sondern auch auf inline-Boxen wie em, span 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 }
Zusammenspiel von line-height und font-size
Zusammenspiel font-size und line-height / Durchschuss

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.

Bleisatz – 1em – Breite des M
Breite eines großen M im Bleisatz

line-height und Lesbarkeit

Die vorgegebene Zeilenhöhe (~1.2) 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.

1cap – Höhe der Versalien / großen Buchstaben

Es gibt trotz aller Feinheiten von CSS betreffend der Schriftgestaltung immer noch einen gewichtigen Unterschied zum Satz im Print: der Umgang mit der Zeilenhöhe. Mit der Maßeinheit 1cap soll CSS der Grundline oder baseline des Prints näher kommen.

Der Grundline
auf den Grund gehen

Beim Druck ist die Zeilenhöhe der Abstand von Grundline zu Grundlinie. Mit HTML und CSS liegt die Grundline des Texts in der Mitte einer Zeilenbox. Das erschwert einen registerhaltigen Spaltensatz.