Rechnen Sie rem in Pixel um, mit jeder Basis

rem wird durch eine einzige Multiplikation zu Pixeln: der Wert in rem mal die Basis-Schriftgröße. In der Voreinstellung des Browsers beträgt diese Basis 16 px, ein rem sind also 16 Pixel und 1,5rem sind 24. Die Einheit bezieht sich auf die Schriftgröße des Elements html, also auf die Wurzel des Dokuments – daher der Name root em[1].

Die Umrechnung lohnt sich bei der Arbeit mit einem Entwurf. Der Gestalter liefert Maße in Pixeln, das Stylesheet hält sie in rem, und Sie brauchen eine Zahl, um zu prüfen, ob eine Überschrift mit 1,875rem tatsächlich die 30 Pixel aus dem Entwurf hat.

Die Basis muss nicht 16 px betragen. Die 62,5-Prozent-Technik setzt sie auf 10 px, und eine Leserin kann sie in den eigenen Browsereinstellungen anheben – deshalb nimmt das Feld für die Basis-Schriftgröße jeden Wert von 1 bis 100 an.

Weiter unten finden Sie eine Tabelle mit 26 Werten bei drei Basen, die vollständige Schriftgradskala von Tailwind CSS sowie eine Erklärung, warum die Zahl 16 nur eine Voreinstellung ist. Den Weg in die andere Richtung übernimmt der Umrechner von Pixel in rem.

Die Formel kennt einen Rechenschritt: Pixel = rem × Basis-Schriftgröße. Die Basis-Schriftgröße ist die auf dem Element html gesetzte Schriftgröße, und wenn sie niemand geändert hat, nimmt der Browser 16 px an.

Beispiel für einen Abstand von 1,25rem: bei einer Basis von 16 px ergibt das 1,25 × 16 = 20 Pixel. Derselbe Wert bei einer Basis von 10 px ergibt 12,5 Pixel, und bei einer Leserin, die im Browser 20 px eingestellt hat, wächst er auf 25.

Die 62,5-Prozent-Technik besteht darin, html { font-size: 62.5% } zu schreiben, was eine Basis von 10 px ergibt, denn 62,5 Prozent von 16 sind genau 10. Die Rechnung geht dann im Kopf: 2,4rem sind 24 Pixel. Eine Bedingung gehört dazu – der Fließtext im body braucht eine lesbare Größe zurück, etwa 1.6rem, also 16 Pixel, sonst steht die ganze Seite in Zehn-Pixel-Schrift.

Die Einheit em rechnet genauso, bezieht sich aber auf das Elternelement statt auf die Wurzel des Dokuments – diese Rechnung übernimmt der Umrechner von em in Pixel. Dieselben 16 Pixel sind im Satz 12 typografische Punkte, was der Umrechner von Punkt in Pixel berechnet.

Die Zahl 16 stammt nicht aus der CSS-Spezifikation. Sie ist die Schriftgröße, die ein Browser einem Dokument voreinstellt, und die Leserin kann sie in den Einstellungen ihres Programms ändern. Wer schlechter sieht, kann dort 20 oder 24 px einstellen und erwartet, dass die Seite mitgeht.

Darin liegt der ganze Unterschied zwischen rem und dem Pixel. Ein Element mit font-size: 24px bleibt 24 Pixel hoch, unabhängig davon, was die Leserin gewählt hat. Dasselbe Element als 1.5rem wächst mit der Basis: bei 20 px ergibt es 30 Pixel, bei 24 px sind es 36.

Das Erfolgskriterium WCAG 1.4.4 verlangt, dass sich Text bis auf 200 Prozent vergrößern lässt, ohne dass Inhalt oder Funktion verloren gehen[2]. Ein auf rem aufgebautes Layout skaliert mit der Schriftgröße, die die Leserin einstellt.

Daraus folgt die praktische Aufteilung: Schriftgrade, Abstände und Spaltenbreiten gehören in rem, und das Pixel bleibt dort, wo ein Maß unabhängig vom Text fest bleiben soll – Rahmen, Schatten und Haarlinien.