📏 Px-zu-Rem-Konverter

Das Umrechnen von Pixelwerten aus einem Mockup in skalierbares CSS gehört zu den repetitivsten Aufgaben der Frontend-Entwicklung. Dieser Konverter erledigt beide Richtungen während der Eingabe: Pixel eingeben, rem erhalten, oder rem eingeben, px erhalten — mit einer Basis-Schriftgröße, die Sie steuern. Eine erzeugte Referenztabelle deckt jeden Wert von 1px bis 64px ab, sodass eine ganze Abstandsskala ohne Taschenrechner übersetzt werden kann.

Verwendung

• Basis-Schriftgröße festlegen: Bei 16 für den Browser-Standard belassen oder die tatsächliche Wurzelgröße Ihres Projekts eintragen.
• Eines der beiden Felder bearbeiten: Tippen Sie in das px-Feld, um rem zu aktualisieren, oder in das rem-Feld, um px zu aktualisieren. Es gibt keinen Konvertieren-Button.
• rem oder em wählen: Das Dropdown neben dem rem-Feld ändert nur die Beschriftung; die Mathematik nutzt dieselbe Basis.
• Tabelle prüfen: Die Tabelle für 1–64px wird gegen Ihre Basis neu erzeugt und ist direkt zum Übernehmen bereit.

Die Konvertierungsmathematik

Das ganze Tool beruht auf einer Division und einer Multiplikation. Um Pixel in rem umzurechnen, teilen Sie durch die Basis:

rem = px ÷ Basis

Bei einer Basis von 16px gilt 32px ÷ 16 = 2rem und 12px ÷ 16 = 0,75rem. In die andere Richtung multiplizieren Sie:

px = rem × Basis

So ergibt 1,5rem × 16 = 24px und 0,875rem × 16 = 14px. Der Konverter wendet dieselben zwei Operationen an, egal ob Sie mit rem oder em arbeiten, weshalb das Einheiten-Dropdown die Zahlen nicht verändert.

Der Unterschied zwischen den Einheiten liegt im Bezug, nicht in der Arithmetik. Ein rem ist immer die Wurzel-Schriftgröße. Ein em ist die Schriftgröße des Elternelements des aktuellen Elements; ein Padding von 1em in einer Komponente, deren Elternteil 20px groß ist, ergibt also 20px, nicht 16px. Rechnen Sie einen Padding-Wert unter Annahme einer 16px-Basis in em um, während das Elternelement 20px groß ist, ist das gerenderte Ergebnis falsch. Bei rem gibt es diese Unklarheit nicht.

Eine Basis-Schriftgröße wählen

Sechzehn ist für nahezu jedes Projekt die sichere Antwort, doch in der Praxis tauchen drei weitere Basen auf:

Basis	Gesetzt durch	1rem entspricht	Hinweise
16px	Browser-Standard	16px	Für barrierefreiheitsorientierte Arbeit passend
10px	html { font-size: 62.5% }	10px	Einfaches Kopfrechnen; mit vergrößertem Text testen
20px	Eine eigene Wurzelregel	20px	Manche Design-Systeme nutzen einen 20px-Body
18px	Eine eigene Wurzelregel	18px	Häufig bei leseintensiven Websites

Welche Sie auch wählen: Bestätigen Sie sie, indem Sie die berechnete Schriftgröße des html-Elements in den Entwicklertools Ihres Browsers prüfen. Die Basis zu raten ist die häufigste Ursache für Umrechnungen, die um ein Weniges danebenliegen.

Gängige Werte auf einen Blick

Pixel	rem bei Basis 16	rem bei Basis 10
8px	0,5	0,8
12px	0,75	1,2
16px	1	1,6
18px	1,125	1,8
20px	1,25	2
24px	1,5	2,4
32px	2	3,2
48px	3	4,8
64px	4	6,4

Das Muster lässt sich leicht fortsetzen: Bei Basis 16 ist jeder 4px-Schritt 0,25rem, 28px sind also 1,75rem und 36px sind 2,25rem. Bei Basis 10 ist jedes 1px gleich 0,1rem.

Eine echte Spezifikation umrechnen

Nehmen Sie eine kleine Kartenkomponente aus Figma: 20px Padding, eine 24px-Überschrift, 15px Fließtext, ein 40px-Avatar und ein 12px-Abstand. Bei einer 16px-Basis liefert der Konverter 1,25rem für das Padding, 1,5rem für die Überschrift, 0,9375rem für den Text, 2,5rem für den Avatar und 0,75rem für den Abstand. Das CSS liest sich sauber:

.card { padding: 1.25rem; gap: 0.75rem; }
.card h2 { font-size: 1.5rem; }
.card p { font-size: 0.9375rem; }
.avatar { width: 2.5rem; height: 2.5rem; }

Jetzt dieselbe Spezifikation gegen eine 10px-Wurzel: Das Padding wird 2rem, die Überschrift 2,4rem, der Text 1,5rem, der Avatar 4rem und der Abstand 1,2rem. Beachten Sie, dass der Fließtext bei 15px mit 0,9375rem bei Basis 16 weniger ordentlich ausfällt — genau bei solchen Werten geht eine Kopfrechnung schief, und das Tool verdient seinen Platz. Wenn ein Designer Ihnen eine Spezifikation voller krummer Zahlen wie 15px und 22px gibt, tragen Sie die Basis einmal ein und lassen die Tabelle den Rest erledigen.

Randfälle und Präzision

• Gebrochene Pixel: 15,5px ÷ 16 = 0,96875, gerundet auf vier Nachkommastellen. Den Sub-Pixel-Wert verarbeiten Browser problemlos.
• Sehr kleine Werte: 1px bei Basis 16 ist 0,0625rem. Das ist gültiges CSS, doch ein 1px-Rahmen bleibt oft bewusst in px, um eine echte Haarlinie zu sein.
• Leere Eingabe: Das Leeren eines Feldes leert auch das zugehörige Feld, statt die Leerstelle als null zu behandeln.
• Ungültige Basis: Null, negative und nicht numerische Eingaben zeigen einen Fehler und stoppen die Umrechnung.
• Rundungsdrift: Wiederholtes Hin- und Herrechnen kann die letzte Dezimale verschieben; rechnen Sie einmal vom Ausgangswert um, statt Bearbeitungen zu verketten.

Warum rem bei Barrierefreiheit px schlägt

Pixel sind absolut. Ein Nutzer, der die Standard-Schriftgröße des Browsers auf 20px erhöht, um bequemer zu lesen, verändert eine 16px-Überschrift nicht — sie bleibt 16px und wirkt nun klein gegen den größeren Fließtext. rem-Einheiten übernehmen diese Vorliebe, eine auf 1,5rem gesetzte Überschrift wird bei einer 20px-Wurzel zu 30px und behält ihr Größenverhältnis. Die WCAG behandelt Text, der sich nicht ohne Verlust vergrößern lässt, als Mangel, und px-Typografie ist der übliche Auslöser. Auch in rem gebaute Abstandsskalen wachsen mit dem Text, sodass Ränder bei vergrößerter Schrift nicht zu einem gedrängten Layout zusammenfallen. Ein paar Haarlinien-Rahmen und einmalige Schatten in px zu belassen ist eine vertretbare Ausnahme; Schrift und Layout-Abstände gehören in rem.

Verwandte Tools

• Einheiten-Konverter
• Seitenverhältnis-Rechner
• Farbkontrast-Prüfer
• Border-Radius-Generator