Umrechner für px, rem und em

Der PX-in-REM-Umrechner wandelt Pixelwerte mithilfe der Root-Schriftgröße Ihres Projekts in rem- oder em-Einheiten um – und wieder zurück. Fügen Sie einen einzelnen Wert oder eine ganze Typo-Skala ein. Sie erhalten die umgerechneten Zahlen, einen direkt kopierbaren CSS-Block mit den ursprünglichen Pixelwerten als Kommentare, ein Lineal, das jede Größe im echten Maßstab darstellt, sowie eine Vorschau, wie Ihre rem-Werte reagieren, wenn ein Besucher die Browser-Schriftgröße erhöht.

PX-in-REM-Formel

Die Umrechnung zwischen Pixeln und rem ist eine einzige Division – Sie müssen nur die Root-Schriftgröße des Dokuments kennen.

Bei der Browser-Standard-Rootgröße von 16 px ergibt das 24px ÷ 16 = 1.5rem und 1.5rem × 16 = 24px. Wenn Ihr Stylesheet html { font-size: 62.5%; } festlegt, wird die Rootgröße 10 px, und dieselben 24 px entsprechen 2.4rem.

PX-in-REM-Umrechnungstabelle (Root 16px)

rem vs. em: Warum Verschachtelung alles verändert

rem wird relativ zum Root-Element (html) gemessen und bedeutet daher überall im Dokument dasselbe. em wird relativ zur berechneten Schriftgröße des Eltern-Elements gemessen, sodass sich identische em-Werte bei jeder Verschachtelung multiplizieren. Dieses Diagramm zeigt denselben Multiplikator 1.5, der ausgehend von einer 16-px-Rootgröße drei Ebenen tief angewendet wird:

Die praktische Regel, auf die sich die meisten Teams einigen: Verwenden Sie rem für Schriftgrößen, Layout-Abstände und Breakpoints; verwenden Sie em gezielt für Dinge, die mit ihrer eigenen Komponente skalieren sollen, etwa den Innenabstand eines Buttons oder die Größe eines Symbols neben Text.

Warum rem statt px verwenden?

• Barrierefreiheit. Besucher, die ihre standardmäßige Browser-Schriftgröße auf 20 px setzen, sehen jede auf rem basierende Größe proportional wachsen. Fest in px codierte Größen ignorieren diese Präferenz vollständig.
• Ein Regler für globale Skalierung. Ändern Sie die Root-Schriftgröße in einer Media Query, und Ihre gesamte Typo-Skala sowie der Abstands-Rhythmus verschieben sich gemeinsam – ohne Überschreibungen pro Komponente.
• Konsistenter Abstands-Rhythmus. Wenn Sie Innen- und Außenabstände in rem angeben, bleibt der vertikale Rhythmus an die Typo-Skala gebunden, statt auseinanderzulaufen.
• Design-Token-freundlich. Moderne Designsysteme (und Tailwinds Standardskala) veröffentlichen Größen in rem, sodass die Umrechnung vorhandener px-Werte die Übergabe erleichtert.

Der 62.5%-Trick für die Root-Schriftgröße

Viele Teams fügen diese Regel hinzu, damit 1rem einer übersichtlichen Größe von 10 px entspricht und die Umrechnung im Kopf einfach wird:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* zurück zu lesbaren 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Da 62.5% ein Prozentsatz der Browser-Standardeinstellung und kein fester Pixelwert ist, berücksichtigt er weiterhin die bevorzugte Schriftgröße des Besuchers. Denken Sie daran, body wieder auf ungefähr 1.6rem zurückzusetzen, sonst wird Ihr Standardtext mit 10 px ausgegeben. Setzen Sie das Feld für die Root-Schriftgröße oben auf 10, um anhand dieser Einstellung umzurechnen.

rem in Media Queries

In einer Media Query wird rem anhand der anfänglichen Root-Schriftgröße des Browsers aufgelöst – nicht anhand der html-Schriftgröße, die Sie in CSS festlegen. Daher entspricht @media (min-width: 48rem) immer 768 px, selbst wenn Ihr Stylesheet html { font-size: 10px } deklariert. Dadurch sind rem-Breakpoints sicher und vorhersehbar; außerdem ist dies einer der wenigen Orte, an denen sich em und rem identisch verhalten.

Wann Sie weiterhin px verwenden sollten

• Haarlinien und Trennlinien – ein 1-px-Rand sollte 1 px bleiben; eine Skalierung erzeugt unscharfe Teilpixel-Linien.
• Feste Assets – Sprite-Versätze, präzise Schattenversätze und Bilder mit bekannter intrinsischer Größe.
• Canvas- und Druckausgabe – wenn eine physische Messung oder Gerätepixelmessung tatsächlich gemeint ist.

So verwenden Sie diesen Umrechner

1. Richtung auswählen: px → rem, rem → px, px → em oder em → px.
2. Werte eingeben: eine Zahl oder eine ganze, durch Kommas oder Leerzeichen getrennte Skala (bis zu 20 auf einmal). Nachgestellte Einheiten wie 24px werden akzeptiert und ignoriert.
3. Root-Schriftgröße festlegen: Lassen Sie für Browser-Standards den Wert 16 eingestellt oder wählen Sie ein Preset für 10 (62.5%-Trick), 12, 14, 18 oder 20.
4. Umrechnen anklicken: Lesen Sie die Ergebnistabelle, das Größenlineal im echten Maßstab, die Barrierefreiheitsvorschau und den CSS-Block.
5. CSS kopieren: Eine Schaltfläche kopiert jede font-size-Deklaration und bewahrt den ursprünglichen Pixelwert in einem Kommentar.

Häufig gestellte Fragen

Wie rechne ich px in rem um?

Teilen Sie den Pixelwert durch die Root-Schriftgröße. Bei der Browser-Standard-Rootgröße von 16 px gilt: 24 px ÷ 16 = 1.5rem. Für die umgekehrte Richtung multiplizieren Sie den rem-Wert mit der Root-Schriftgröße: 1.5rem × 16 = 24 px.

Wie viele px sind 1rem?

1rem entspricht der Root-Schriftgröße der Seite. In jedem gängigen Browser beträgt sie standardmäßig 16 px, daher entspricht 1rem 16 px, sofern das html-Element oder die Browsereinstellungen des Besuchers dies nicht ändern.

Was ist der Unterschied zwischen rem und em?

rem ist immer relativ zur Root-Schriftgröße des html-Elements, daher ist 1.5rem überall im Dokument gleich groß. em ist relativ zur Schriftgröße des eigenen Elternelements, sodass sich verschachtelte Elemente multiplizieren: 1.5em innerhalb eines weiteren 1.5em ergibt das 2.25-Fache der Grundgröße.

Was ist der 62.5-Prozent-Trick für die Root-Schriftgröße?

Wenn Sie html { font-size: 62.5%; } festlegen, wird die Root 10 px statt 16 px groß, sodass 1rem 10 px entspricht und die Kopfrechnung einfach wird: 24 px sind 2.4rem. Die Größe skaliert weiterhin mit der bevorzugten Browser-Schriftgröße des Besuchers, weil 62.5% relativ und kein absoluter Pixelwert ist.

Sollte ich px oder rem für Schriftgrößen verwenden?

Verwenden Sie rem für Schriftgrößen, Abstände und Media Queries, damit das Layout wächst, wenn ein Besucher seine standardmäßige Browser-Schriftgröße erhöht. Verwenden Sie px für Werte, die nicht skaliert werden sollen, etwa Haarlinien, ein Pixel breite Trennlinien und manche Schattenversätze.

Müssen rem-Werte ganze Zahlen sein?

Nein. Browser verarbeiten gebrochene rem-Werte problemlos und berechnen Teilpixelgrößen intern. Wenn Sie übersichtliche Zahlen bevorzugen, wählen Sie eine Root-Schriftgröße, die Ihre Skala gleichmäßig teilt, etwa 10 px oder 8 px, oder verwenden Sie die Dezimalgenauigkeitsoption dieses Umrechners.

Funktioniert rem für padding, margin und Media Queries?

Ja. rem ist überall gültig, wo CSS eine Längeneinheit akzeptiert, einschließlich padding, margin, width, gap und border-radius. In Media Queries wird rem anhand der anfänglichen Rootgröße von 16 px aufgelöst und nicht anhand Ihrer benutzerdefinierten html-Schriftgröße, daher entspricht ein 48rem-Breakpoint immer 768 px.

Zusätzliche Ressourcen

• CSS-Längeneinheiten – MDN
• Schriftgrößenbezogene Längen – W3C CSS Values