px ↔ rem Umrechner

Der px ↔ rem Umrechner rechnet CSS-Größenangaben zwischen Pixel (px), rem/em und Punkt (pt) um – praktisch für Schriftgrößen, Abstände oder Rahmenbreiten in einem Stylesheet. Du gibst einen Wert samt Einheit sowie die Basis-Schriftgröße deines Projekts ein und siehst sofort alle drei Einheiten nebeneinander. So übersetzt du Pixel-Vorgaben aus einem Design-Entwurf zuverlässig in rem-Werte für dein CSS – und umgekehrt.

So funktioniert der px ↔ rem Umrechner

Trage im Feld Wert die Zahl ein, die du umrechnen willst, und wähle als Einheit, ob es sich um Pixel (px) oder rem / em handelt. Im Feld Basis-Schriftgröße legst du fest, wie viele Pixel einem rem entsprechen – voreingestellt sind 16 px, der Standardwert der meisten Browser für das Wurzelelement.

Das Ergebnis erscheint sofort in allen drei Einheiten – Pixel, rem/em und Punkt –, ganz ohne Klick auf einen Button. Bleibt das Wert-Feld leer, zeigt das Tool stattdessen den Hinweis „Bitte einen Wert eingeben.“

Formel: px, rem und pt umrechnen

Für Pixel und rem/em gilt: rem = px / Basis-Schriftgröße und umgekehrt px = rem × Basis-Schriftgröße. Bei der Standard-Basis von 16 px entsprechen sich also 1 rem und 16 px, 0,5 rem und 8 px.

Die Umrechnung in Punkt ist dagegen fest und unabhängig von der Basis-Schriftgröße: pt = px × 0,75, weil ein Zoll in CSS 96 Pixel und in der Typografie 72 Punkt umfasst. rem und em behandelt der Umrechner gleich, da beide hier relativ zur eingegebenen Basis-Schriftgröße berechnet werden.

Beispiel

Bei den Standardwerten 24 px und einer Basis von 16 px rechnet der Umrechner so: 24 / 16 = 1,5, also 1,5 rem; für Punkt gilt 24 × 0,75 = 18, also 18 pt. Kurz: 24 px = 1,5 rem = 18 pt.

Umgekehrt ergeben 2 rem bei gleicher Basis 2 × 16 = 32, also 32 px, und 32 × 0,75 = 24, also 24 pt.

Wofür brauche ich das?

rem-Werte gelten im Webdesign als barrierefreundlicher als px: Ändert jemand die Standard-Schriftgröße im Browser, skalieren Abstände und Schriftgrößen in rem automatisch mit, feste Pixelwerte bleiben dagegen unverändert. Mit diesem Tool übersetzt du Pixel-Angaben aus einem Design-Entwurf in passende rem-Werte fürs Stylesheet – oder prüfst umgekehrt, wie viele Pixel ein bestehender rem-Wert ergibt.

Die anpassbare Basis-Schriftgröße hilft, wenn ein Projekt einen anderen Wurzelwert setzt: Beim bekannten „62,5 %-Trick“ (html { font-size: 62.5% }) sinkt die Basis von 16 px auf 10 px – trägst du hier 10 ein, rechnet der Umrechner passend dazu.

Häufige Fragen

Was ist der Unterschied zwischen px und rem?

Pixel (px) ist eine feste Größe. rem („root em“) ist relativ zur Schriftgröße des Wurzelelements <html> – meist 16 px. Ändert jemand die Standard-Schriftgröße im Browser, skalieren rem-Werte automatisch mit, px-Werte bleiben starr.

Sind rem und em bei diesem Umrechner dasselbe?

Rechnerisch ja: Beide werden hier relativ zur eingegebenen Basis-Schriftgröße umgerechnet. Im CSS besteht aber ein Unterschied – em bezieht sich auf die Schriftgröße des Elternelements und kann sich bei Verschachtelung aufsummieren, rem immer auf das Wurzelelement.

Welche Basis-Schriftgröße soll ich eintragen?

Im Normalfall 16 px, der Standardwert der meisten Browser. Setzt dein Projekt per CSS eine andere Root-Schriftgröße, etwa 10 px beim „62,5 %-Trick“, trägst du stattdessen diesen Wert ein. Lässt du das Feld leer oder 0, rechnet das Tool automatisch mit 16 px weiter.

Wie rechnet der Umrechner Pixel in Punkt (pt) um?

Fest mit dem Faktor 0,75, unabhängig von der Basis-Schriftgröße: pt = px × 0,75. Das ergibt sich daraus, dass ein Zoll in CSS 96 Pixel entspricht, in der Typografie aber 72 Punkt.

Werden meine Eingaben gespeichert?

Nein. Wert, Einheit und Basis-Schriftgröße bleiben in deinem Browser – der Umrechner rechnet direkt beim Tippen und schickt dabei nichts an einen Server.