Antwort an „Rolf B“ verfassen

Zeilenabstand variieren

Rolf B 17.10.2025 11:03

Hallo Gunnar Bittersmann,

Eine line-height von 1.4lh ist zulässig, hat aber eine andere Wirkung als eine line-height von 1.4.

body {
   font-size: 16px;
   line-height: 22px: /* um vom konkreten Font unabhängig zu sein */
}

body > p:nth-child(1) {
   line-height: 1.4;
}
body > p:nth-child(2) {
   font-size: 24px;
   line-height: 1.4;
}

body > p:nth-child(3) {
   line-height: 1.4lh;
}
body > p:nth-child(4) {
   font-size: 24px;
   line-height: 1.4lh;
}

<body>
<p>Absatz 1: font-size: 16px, line-height: 1.4 = 22.4px</p>
<p>Absatz 2: font-size: 24px, line-height: 1.4 = 33.6px</p>
<p>Absatz 3: font-size: 16px, line-height: 1.4lh = 30.8px</p>
<p>Absatz 4: font-size: 24px, line-height: 1.4lh = 30.8px </p>
</body>

Die beiden ersten Absätze verwenden die font-size des p-Elements, die Absätze 3 und 4 die line-height des Elternelements als Berechnungsgrundlage.

Jetzt nicht mehr. Berichtigt.

Ich habe nochmal drüberpoliert. Da war einiges unklar. Ich fand die Angabe von line-height:1.4 auch unpassend, es ist eine magic number, die je nach Font falsch sein kann. Ich habe es durch calc(1lh + 1px) ersetzt.

Dabei fällt mir auf: das Beispiel zieht den Parisienne-Font aus Google-Fonts. ARGH!

TODO für heute abend: Parisienne SELF-hosten!

Rolf

--
sumpsi - posui - obstruxi