Rem steht für root em und bezieht sich immer auf die Schriftgröße des Wurzelelements, also von html. Anders als em addiert sich rem in verschachtelten Elementen nicht auf. Bei den üblichen 16 Pixeln Grundgröße sind 1,5rem immer 24 Pixel, egal wo sie stehen.
- Rem (Root Em)
Eine CSS-Einheit, die sich immer auf die Schriftgröße des Wurzelelements html bezieht.
Beispiel: „Alle Überschriften sind in rem angegeben, damit sie überall gleich groß sind.“Abgrenzung zu em: Es bezieht sich auf die Schriftgröße des aktuellen Elements und wächst in Verschachtelungen mit.
Wie rem rechnet
Laut CSS Values 3 entspricht 1rem dem em-Wert des Wurzelelements. Ist dort keine Größe gesetzt, gilt die Grundschrift des Browsers. Erstmals beschrieben wurde die Einheit 2006 in einem Entwurf der CSS-Spezifikation; alle großen Browser kennen sie seit vielen Jahren.
Rem und Barrierefreiheit
Wer im Browser eine größere Grundschrift einstellt, verändert die Größe von html. Angaben in rem wachsen mit, feste Pixelwerte laut MDN in manchen Browsern nicht. Die WCAG verlangen in Erfolgskriterium 1.4.4, dass Text auf 200 Prozent vergrößert werden kann; rem erwähnen sie nicht ausdrücklich, macht das aber leicht.
Rem oder em
Rem eignet sich für Schriftgrößen und Abstände, die auf der ganzen Seite einheitlich sein sollen. Em passt, wo etwas mit der Schrift des Elements wachsen soll, etwa Innenabstände oder Icons neben Text.
html { font-size: 100%; } /* übernimmt die Einstellung der Nutzer */
h1 { font-size: 2.5rem; }
p { margin-block: 0 1.5rem; }