Schriftgröße
font-size

Einheit em oder rem?

Die Einheit em bewirkt eine relative Größenänderung der Schrift zum jeweiligen Element oder dessen Elternelementen. Die Einheit rem hingegen bezieht sich direkt auf die Festlegung der Größe im root-Element.

Beide Einheiten sind aus der Perspektive der Barrierefreiheit bei sorgfältigem Einsatz zulässig. Die empfohlene Auswahl hängt weithin von den Präferenzen von Autor*innen beim Erstellen von CSS-Anweisungen ab:

• Wer unmittelbar aus dem Wert für font-size eine Vorstellung über die erwartbare Schriftgröße erhalten will, wählt die Einheit rem.
• Wer lieber den Kontext der browsereigenen Darstellung berücksichtigen möchte oder gerne und sicher Größenangaben aus dem Kontext im Überblick behält, kann auch die Einheit em verwenden.

Browserverhalten bei em und rem

Im folgenden Code wird zunächst zum Vergleichen ein Absatz mit der Basisschriftgröße realisiert (A.). Darauf folgt ein Bereich, der für Kindelemente im Prinzip eine um den Faktor 1,41 vergrößerte Schrift darstellen sollte. Der vergrößerte Bereich enthält nun einen Absatz mit einer Anweisung zur Vergrößerung in der Einheit rem (B.) und einen weiteren Absatz mit der Vergrößerung in der Einheit em (C.).

<p>A. Basis Schriftgröße</p>
<div style="font-size: 1.41em;">
  <p style="font-size: 1.41rem;">
    B. Vergrößerung mittels rem
  </p>
  <p style="font-size: 1.41em;">
    C. Vergrößerung mittels em
  </p>
</div>

Dieser Code sollte in etwa wie im folgenden Screenshot dargestellt werden:

Chrome und Firefox ignorieren erwartungsgemäß den Vergrößerungsfaktor für die Region, wenn die Einheit rem verwendet wird (B.). Die Einheit em berücksichtigt hingegen Größenvorgaben aus dem Elternelement. Der verschachtelte Absatz C. weist daher die zweifache Basisschriftgröße auf. (1,41em × 1,41 em = 2em)

Du kannst das Verhalten deines aktuellen Browsers in folgendem Abschnitt überprüfen: