Größe und Zeilenhöhe

Ob sich ein Text lesen lässt, entscheiden zwei Angaben, seine Größe und die Luft zwischen den Zeilen. Einzeln sind beide banal. Der Ärger kommt erst mit der Vererbung. Das Gewicht der Schrift kommt in der nächsten Lektion, denn es hängt an den Schriftdateien.

01 / 03Größe in rem

font-size gehört in rem, aus demselben Grund wie in Lektion 5.1. rem bezieht sich auf die Wurzel, und die Wurzelgröße ist genau das, was ein Nutzer in den Browsereinstellungen verstellt, wenn er schlecht sieht.

Mit px passiert dort nichts. Die Seite bleibt gleich, egal was jemand einstellt, und das ist kein Feature.

In den Aufgaben des Kurses bleibt es bei Pixelwerten, denn dann steht in der Prüfliste genau die Zahl, die du hingeschrieben hast. Im eigenen Projekt lasse ich die Wurzel, wie der Nutzer sie eingestellt hat, und schreibe Schriftgrößen in rem.

02 / 03Zeilenhöhe ohne Einheit

<div class="ohne-einheit">
  <h2>Zeilenhöhe 1.5, eine große Überschrift über mehrere Zeilen</h2>
  <p>Der Absatz rechnet mit seiner eigenen Größe.</p>
</div>

<div class="mit-einheit">
  <h2>Zeilenhöhe 150 Prozent, dieselbe Überschrift über mehrere Zeilen</h2>
  <p>Der Absatz sieht genauso aus wie oben.</p>
</div>

.ohne-einheit,
.mit-einheit {
  font-size: 16px;
  max-width: 22ch;
  border: 1px solid #d4d4d8;
  padding: 16px;
  margin-bottom: 16px;
}

.ohne-einheit h2,
.mit-einheit h2 {
  font-size: 32px;
  margin: 0 0 8px 0;
}

/* Vererbt wird der Faktor. Die Überschrift rechnet
   1.5 mal 32 und bekommt 48px Zeilenhöhe. */
.ohne-einheit {
  line-height: 1.5;
}

/* Vererbt wird das Ergebnis: 1.5 mal 16 sind 24px.
   Die Überschrift bekommt 24px bei 32px Schrift,
   und ihre Zeilen liegen übereinander. */
.mit-einheit {
  line-height: 150%;
}

In beiden Kästen steht dasselbe, nämlich anderthalbfache Zeilenhöhe. Im oberen ist die Überschrift lesbar, im unteren liegen ihre Zeilen übereinander.

Der Grund ist die Vererbung. Ohne Einheit vererbt sich der Faktor, und jedes Element rechnet ihn mit seiner eigenen Schriftgröße durch. Mit Einheit vererbt sich der ausgerechnete Wert, und der passt nur zu der Schriftgröße, bei der er ausgerechnet wurde.

Im Inspector siehst du das in Zahlen. An der oberen Überschrift steht font-size: 32px und line-height: 48px, also 1.5 mal 32, frisch gerechnet. An der unteren Überschrift steht bei denselben 32 Pixeln Schrift line-height: 24px. Diese 24 sind woanders entstanden, nämlich im Kasten darüber aus 150 Prozent von 16 Pixeln, und sie wandern als fertige Zahl nach unten durch. Bei den beiden Absätzen stehen dagegen in beiden Kästen dieselben 24 Pixel. Deshalb fällt der Fehler oft erst auf, wenn eine Überschrift dazukommt.

Ich schreibe line-height deshalb ohne Einheit, also 1.5 und nicht 150%, 24px oder 1.5em.

Als Richtwerte nehme ich 1.5 bis 1.6 für Fließtext und 1.1 bis 1.2 für große Überschriften.

<h2 class="eng">Eine große Überschrift mit Zeilenhöhe 1.1, die über mehrere Zeilen läuft</h2>
<h2 class="weit">Dieselbe Überschrift mit Zeilenhöhe 1.6, die dadurch auseinanderfällt</h2>

h2 {
  font-family: system-ui, sans-serif;
  font-size: 36px;
  max-width: 18ch;
  margin: 0 0 24px 0;
}

.eng {
  line-height: 1.1;
}

.weit {
  line-height: 1.6;
}

Dass große Schrift weniger Luft braucht, klingt verkehrt herum. Sobald du es siehst, leuchtet es aber sofort ein. Die Zeilenhöhe soll dem Auge helfen, die nächste Zeile zu finden. Bei kurzen, großen Zeilen ist das ohnehin leicht. Zu viel Abstand lässt die Überschrift dagegen in Einzelteile zerfallen.

03 / 03Beide zusammen

Größe und Zeilenhöhe hängen aneinander.

Je größer die Schrift, desto kleiner die Zeilenhöhe. Je länger die Zeile, desto mehr Zeilenhöhe braucht sie, damit das Auge nicht verrutscht.

In Lektion 6.6 kommen beide an einem echten Stück Seite zusammen. In der Aufgabe bekommt erst einmal eine Überschrift Größe und Zeilenhöhe zurück, die ihr ein Reset genommen hat.