Wie man Pixel in rem in CSS umwandelt (Einfache Anleitung)

Haben Sie jemals eine wunderschöne, pixelgenaue Website erstellt, nur um dann festzustellen, dass sie völlig zerschossen aussieht, sobald ein Benutzer die Standard-Schriftgröße seines Browsers erhöht? Ja, ich auch. Das ist meistens genau der Moment, in dem wir Entwickler auf die harte Tour lernen, dass das Hardcodieren von Pixeln (px) für absolut alles ein Rezept für einen Albtraum in Sachen Barrierefreiheit ist.

Hier kommt die Einheit rem ins Spiel.

Wenn Sie es gewohnt sind, strikt in Pixeln zu denken, kann sich der Wechsel zu rem ein wenig so anfühlen, als ob man versucht, eine Fremdsprache im Vorbeigehen zu lernen. Aber keine Sorge – sobald es „Klick“ macht, erleichtert das Konzept Ihr Leben als Entwickler ungemein.

Lassen Sie uns aufschlüsseln, wie man px in rem umrechnet, ohne ein Mathematikstudium zu benötigen.

Warum reden wir überhaupt über rem?

Stellen Sie sich Pixel wie eine absolute Maßeinheit vor. Stellen Sie sich vor, Sie bauen ein Haus und sagen Ihrem Bauunternehmer: „Machen Sie dieses Fenster exakt 100 Zentimeter breit.“ Dieses Fenster wird 100 Zentimeter breit sein, egal was mit dem Rest des Hauses passiert. Das ist ein Pixel.

Stellen Sie sich nun rem als eine relative Maßeinheit vor. Anstatt feste Zentimeter zu verwenden, sagen Sie dem Bauunternehmer: „Machen Sie dieses Fenster genau 3-mal so breit wie unsere Standard-Fundamentziegel.“ Wenn Sie sich später entscheiden, größere Ziegel zu verwenden, skaliert das Fenster automatisch proportional mit.

In CSS steht rem für „root em“. Es bedeutet schlicht „relativ zur Schriftgröße des HTML-Wurzelelements“. Da Benutzer in ihren Browsereinstellungen die Standard-Schriftgröße für eine bessere Lesbarkeit ändern können (und dies auch tun), bedeutet die Verwendung von rem, dass Ihre gesamte Website nahtlos skaliert wird, um ihren Vorlieben zu entsprechen. Ihr Layout bricht nicht auseinander, und Ihr Text bleibt perfekt lesbar. Eine Win-Win-Situation.

Die Standard-Rechnung: Wie man umrechnet

Hier ist die goldene Regel, die Sie sich merken müssen: Standardmäßig setzt fast jeder moderne Webbrowser seine Root-Schriftgröße auf 16px.

Das bedeutet, sofern Sie es in Ihrem CSS nicht ausdrücklich überschreiben, entspricht 1rem gleich 16px.

Um einen beliebigen Pixelwert im Kopf in einen rem-Wert umzurechnen, verwenden Sie einfach diese Grundformel:

Ziel-Pixelwert ÷ Basis-Pixelwert (16) = rem-Wert

Nehmen wir an, Sie betrachten ein Figma-Design und benötigen eine Überschrift mit 24px. Sie teilen einfach 24 durch 16.

24 ÷ 16 = 1,5
In Ihrem CSS schreiben Sie also: font-size: 1.5rem;

Benötigen Sie eine kleinere Bildunterschrift mit 14px?

14 ÷ 16 = 0,875
Sie schreiben also: font-size: 0.875rem;

Ich verstehe schon. Divisionen im Kopf zu machen, während man tief in der Codierung steckt, ist ein totaler Dämpfer. Wenn Sie die mentale Akrobatik lieber ganz überspringen möchten, empfehle ich Ihnen, ein Tool wie diesen Pixel in Rem Umrechner in einem Tab offen zu halten. Sie geben einfach Ihre Pixel ein, und das Tool erledigt die Arbeit sofort für Sie.

Der „62,5%-Trick“ (Das Rechnen kinderleicht machen)

Wenn Sie nun nicht für jede einzelne Zeile CSS einen Taschenrechner benutzen wollen, haben sich Entwickler einen cleveren kleinen Hack namens 62,5%-Trick ausgedacht.

Und so funktioniert es: Sie setzen die Schriftgröße des html-Elements ganz oben in Ihrem Stylesheet auf 62.5%:

html {
  font-size: 62.5%;
}

Warum 62,5%? Weil 62,5% der standardmäßigen 16px genau 10px ergeben.

Dadurch haben Sie Ihren „Standard-Fundamentziegel“ im Wesentlichen auf genau 10px neu definiert. Plötzlich wird die Rechnung lächerlich einfach. Anstatt durch 16 zu teilen, teilen Sie einfach durch 10 (was lediglich bedeutet, das Komma um eine Stelle nach links zu verschieben).

Sie wollen 24px? Schreiben Sie einfach 2.4rem.
Sie wollen 14px? Schreiben Sie einfach 1.4rem.
Sie wollen 36px? Schreiben Sie einfach 3.6rem.

Es fühlt sich an wie Magie. Denken Sie nur daran: Wenn Sie in ein bestehendes Projekt einsteigen, bei dem die Root-Schriftgröße unangetastet blieb, müssen Sie sich weiterhin auf die Standard-Rechnung (Teilen durch 16) verlassen.

Das ultimative px zu rem Cheat Sheet

Egal, ob Sie manuell durch 16 teilen oder einfach eine Kurzübersicht für Ihren zweiten Monitor benötigen, hier ist ein Cheat Sheet für die gängigsten Schriftgrößen (ausgehend von der Standard-Browsergröße von 16px):

Was Sie wollen (px)	Was Sie schreiben (rem)	Die Rechnung
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Basisgröße)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

Ein letzter Tipp, bevor Sie gehen

Sie müssen rem nicht für buchstäblich alles verwenden. Es ist fantastisch für Schriftgrößen, Abstände (Margins), Innenabstände (Padding) und Layoutbreiten. Für winzige dekorative Dinge wie einen dünnen 1px-Rahmen (border: 1px solid black) ist es jedoch völlig in Ordnung – und meistens sogar besser –, bei Standard-Pixeln zu bleiben!

Gehen Sie nun hinaus und coden Sie verantwortungsbewusst. Ihre Benutzer (und deren Augen) werden es Ihnen danken.