Kostenloser PX zu REM Konverter
Konvertieren Sie Pixel in rem und zurück mit konfigurierbarer Basis-Schriftgröße.
Referenztabelle
| PX | REM |
|---|
Funktionsweise
REM steht für „Root EM" und ist relativ zur Schriftgröße des Wurzelelements. Standardmäßig verwenden Browser 16 px. Die Formel ist einfach: rem = px ÷ Basis und px = rem × Basis. Ändern Sie die Basis-Schriftgröße oben, falls Ihr Projekt eine andere Wurzelgröße verwendet.
Häufig gestellte Fragen
Warum rem statt px verwenden?
REM-Einheiten skalieren mit der Browser-Schriftgrößen-Einstellung des Nutzers, was die Barrierefreiheit verbessert. Wenn ein Nutzer seine Standard-Schriftgröße erhöht, passen sich rem-basierte Layouts automatisch an, während Pixel-Werte fest bleiben.
Was ist der Unterschied zwischen em und rem?
EM ist relativ zur Schriftgröße des Elternelements und kann sich in verschachtelten Elementen aufaddieren. REM bezieht sich immer auf die Schriftgröße des Wurzelelements (<html>), was es vorhersehbarer macht.
Welche Basis sollte ich verwenden?
Die meisten Projekte verwenden den Browser-Standard von 16 px. Manche Entwickler setzen html { font-size: 62.5%; } (10 px) für einfacheres Rechnen. Verwenden Sie die Root-Schriftgröße Ihres Projekts.
Was rem eigentlich ist
„Rem“ steht für root em. Die W3C-Spezifikation CSS Values Level 3 definiert es als „gleich dem berechneten Wert von font-size auf dem Wurzelelement“, also auf dem <html>-Element. Browser setzen <html> standardmäßig auf 16px, sofern nicht überschrieben, sodass auf einer schmucklosen Seite 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, 2rem = 32px gilt.
Wenn ein Stylesheet html { font-size: 20px } deklariert, dann gilt 1rem = 20px für den Rest des Dokuments. Wenn der Nutzer seinen Browser-Standard auf 24px erhöht hat (eine häufige Anpassung bei Sehschwäche), gilt 1rem = 24px selbst ohne Stylesheet-Überschreibung, und das ist der gesamte Barrierefreiheitsgrund für rem in einem Satz.
Warum rem wichtig ist: der Barrierefreiheitsgrund
Browser bieten Nutzern zwei verschiedene Skalierungsmechanismen, und sie verhalten sich in Bezug auf Einheiten unterschiedlich:
- Browser-Zoom (Cmd/Strg + oder Pinch), skaliert den gesamten Viewport gleichmäßig. Ein 16px-Element bei 200 % Zoom nimmt denselben Bildschirmplatz ein wie ein 32px-Element bei 100 % Zoom. Sowohl
pxals auchremskalieren unter Zoom identisch, daher rechtfertigt Zoom allein rem nicht. - Browser-Voreinstellung für die Standardschriftgröße: vergraben in den Browser-Einstellungen (Firefox
about:preferences, Chromes Schriftarten-Anpassung). Wenn der Nutzer „Standardschriftgröße“ von 16 auf 24 ändert (sehr häufig bei Nutzern mit Sehschwäche), beginnt das<html>-Element bei 24px zu rechnen. Jederrem-Wert skaliert automatisch um 1,5×; jeder festepx-Wert bleibt exakt gleich.
Deshalb respektiert ein in rem aufgebautes Layout die Barrierefreiheitseinstellung des Nutzers und ein in px aufgebautes nicht. WCAG 2.2 Erfolgskriterium 1.4.4 (Textgröße ändern, Stufe AA) verlangt, dass Text auf mindestens 200 % vergrößert werden kann, ohne Verlust von Inhalt oder Funktionalität. Browser-Zoom allein erfüllt dies technisch, aber rem-basierte Layouts erfüllen es sauberer, weil sie den feiner abgestuften Mechanismus der Standardschriftgröße respektieren, den Menschen mit Sehschwäche tatsächlich tagtäglich anpassen.
Die em-Multiplikationsfalle, die rem motiviert
Vor rem war die einzige Möglichkeit, in CSS skalierbare Typografie zu erhalten, em, das sich auf die font-size des Eltern-Elements bezieht, nicht auf die Wurzel. Das klassische Problem: Verschachtelte Elemente mit em-basierten Schriftgrößen multiplizieren sich auf.
.list { font-size: 1.2em; }
.list .list { font-size: 1.2em; } /* renders at 1.44× the grandparent */
.list .list .list { font-size: 1.2em; } /* now 1.728× */Drei verschachtelte Listen blähen sich auf fast die doppelte Textgröße auf, was fast nie beabsichtigt ist. rem löst dies, indem es sich jedes Mal an der Wurzel verankert, drei verschachtelte Elemente mit 1.2rem sind alle 19,2px, unabhängig von der Verschachtelungstiefe. Deshalb verwenden die meisten modernen Stylesheets rem für font-size und reservieren em für komponenteninterne Proportionen (Symbolgrößen, die zum Schaltflächentext passen sollen, Innenabstand in einer Schaltfläche, der mit ihrer Beschriftung skaliert).
Der 62,5-%-Trick, bequeme Mathematik, fragwürdige Barrierefreiheit
Ein Muster, das Jonathan Snook in seinem Artikel vom Mai 2011 populär machte: html { font-size: 62.5% } setzen. Weil 62,5 % × 16 = 10 ergibt, macht dies standardmäßig 1rem = 10px, bequeme Kopfrechnung. 1.6rem = 16px, 2.4rem = 24px, 4.8rem = 48px. Designer mochten es, weil es die umständliche „durch 16 teilen“-Rechnung aus jedem Wert entfernt.
Die Barrierefreiheitskritik (damals geäußert und in späteren Texten bekräftigt): Die Wurzelschriftgröße auf 62,5 % zu setzen, verkleinert faktisch das, was der Nutzer in seinen Browser-Einstellungen gewählt hat. Ein Nutzer, der seinen Standard wegen einer Sehschwäche auf 24px gesetzt hat, würde Fließtext bei 15px sehen, was den ganzen Sinn von rem zunichtemacht. Die moderne Entgegnung lautet, die Wurzel auf 62,5 % zu setzen, aber die Fließtext-Schriftgröße ausdrücklich mit 1.6rem zu deklarieren (zurück zu 16px), sodass die Nutzerüberschreibung weiterhin korrekt kaskadiert. Viele Teams überspringen den Trick völlig und leben mit der etwas weniger eleganten Mathematik.
Wann rem, wann px verwenden, Comeaus Einordnung
Josh W. Comeaus Artikel „px or rem?“ (Mai 2022, aktualisiert Mai 2025) bietet die nützlichste Ein-Frage-Heuristik für diese Entscheidung. Fragen Sie: „Sollte sich dieser Wert vergrößern, wenn der Nutzer die Standardschriftgröße seines Browsers erhöht?“ Wenn ja, verwenden Sie rem. Wenn nein, verwenden Sie px.
Nach diesem Test:
- Verwenden Sie rem für: font-size, vertikale Außen-/Innenabstände (die an den Schriftrhythmus gebunden sind), Schaltflächenbreiten und andere inhaltsgeformte Container, maximale Zeilenlängen, Breakpoints (damit sich das Layout bei der richtigen vergrößerten Größe für Nutzer mit Sehschwäche verschiebt).
- Verwenden Sie px für: Rahmen (eine 1px-Haarlinie sollte eine Haarlinie bleiben), horizontalen Innenabstand/Dekoration, Schattenradien, Bildgrößen, wenn das Bild eine feste Pixelabsicht hat, feine Symbolabmessungen.
Der Ein-Frage-Test liefert über Tausende von Entscheidungen in einer Codebasis hinweg konsistente Antworten, was der eigentliche Gewinn ist, die resultierenden Stylesheets verhalten sich so, wie Nutzer es sowohl bei Zoom als auch bei der Anpassung der Schriftgröße erwarten.
Tailwind CSS 4 setzt überall auf rem
Tailwind CSS v4.0 (Januar 2025) lieferte eine vollständig rem-basierte Standardskala. Jedes Typografie-Token (text-xs 0.75rem bis text-9xl 8rem) und jedes Abstands-Token (p-1 0.25rem, p-4 1rem, m-8 2rem) ist von Haus aus in rem. Tailwind 4 belässt die <html>-Wurzel bewusst beim Browser-Standard von 16px (sie wenden den 62,5-%-Trick ausdrücklich nicht an), sodass die Barrierefreiheitseinstellungen des Nutzers sauber kaskadieren. Zig Millionen Projekte liefern inzwischen standardmäßig rem-basierte Designsysteme aus, was das stärkste Argument dafür ist, dass das Ökosystem konvergiert ist.
Umrechnungstabelle bei der Standard-Wurzel von 16px
| Pixel | Rem | Häufige Verwendung |
|---|---|---|
| 8 px | 0,5 rem | Die Hälfte der Basiseinheit, kleiner Abstand |
| 12 px | 0,75 rem | Bildunterschrift / Kleingedrucktes |
| 14 px | 0,875 rem | Sekundärtext |
| 16 px | 1 rem | Standard-Fließtext |
| 18 px | 1,125 rem | Leicht hervorgehobener Fließtext |
| 20 px | 1,25 rem | Einleitungsabsatz |
| 24 px | 1,5 rem | H4-Überschrift; großer UI-Text |
| 32 px | 2 rem | H3-Überschrift |
| 48 px | 3 rem | H2- / Hero-Überschrift |
| 64 px | 4 rem | H1- / Display-Überschrift |
Wo rem in den modernen Werkzeugkasten passt
Rem ist der richtige Standard für Schrift und schriftverankerte Abstände, aber es ist nicht die Antwort auf jedes Layout-Problem. Der moderne Werkzeugkasten umfasst außerdem:
- clamp() für fluide Typografie,
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem)setzt einen rem-Mindest- und -Höchstwert mit einer Viewport-gesteuerten Mitte. CSS Einheiten Konverter - Viewport-Einheiten (
vw,vhund die neuerensvh/lvh/dvhfür Mobilgeräte), für Hero-Bereiche und randlose Elemente, die mit dem Viewport statt mit der Schrift skalieren sollen. - Container-Query-Einheiten (
cqw,cqh), für komponentengetriebenes Design, bei dem dieselbe Komponente in unterschiedlichen Breiten erscheinen kann.
Für alles andere (Fließtext, Überschriften, Innenabstände, Schaltflächenbreiten, Breakpoints) ist rem der Weg des geringsten Widerstands und der barrierefreieste Standard.
Weitere Fragen
Was, wenn mein Projekt eine abweichende Basisschriftgröße verwendet?
Ändern Sie das Feld Basisschriftgröße oben auf den Wert, zu dem das html { font-size: … } Ihres Projekts auflöst. Die Umrechnung bleibt rem = px ÷ base, unabhängig von der Basis. Wenn Ihre Codebasis 18px verwendet, wird aus 32px 1.78rem; bei 10px (der 62,5-%-Trick) wird daraus 3.2rem. Beachten Sie, dass das Überschreiben der Wurzelschriftgröße Auswirkungen auf die Barrierefreiheit für Nutzer hat, die ihren Browser-Standard anpassen, siehe die Diskussion zum 62,5-%-Trick oben.
Warum rendert 0,625rem nicht exakt zu 10px?
Mathematisch tut es das, bei der Standard-Wurzel von 16px, 0.625 × 16 = 10. Aber Browser rendern mit Subpixel-Genauigkeit und rasten finale Werte möglicherweise auf ganze Geräte-Pixel ein, sodass ein 0.625rem-Rahmen je nach Monitor-DPR gelegentlich leicht anders erscheinen kann als ein fest kodierter 10px-Rahmen. Für pixelgenaue 1-Pixel-Haarlinien verwenden Sie 1px direkt; für alles andere ist der rem-basierte Wert in Ordnung.
Kann ich rem und px im selben Stylesheet mischen?
Ja, und Sie sollten es. Verwenden Sie rem für Dinge, die mit der Schriftgrößen-Einstellung des Nutzers skalieren sollen (Typografie, vertikaler Rhythmus, Breakpoints), und px für Dinge, die das nicht sollen (Rahmen, Symboldetails, dekorative Schatten). Comeaus Frage „sollte das skalieren?“ ist der praktische Filter; die Antwort lässt sich fast jedes Mal sauber der einen oder anderen Einheit zuordnen.
Konvertieren Build-Werkzeuge px automatisch zu rem?
Ja, PostCSS-Plugins wie postcss-pxtorem und postcss-rem-to-responsive-pixel können px-Werte in Ihrem geschriebenen CSS während des Build-Schritts zu rem umschreiben, mit konfigurierbaren Schwellenwerten (z. B. „alles ≥ 12px umwandeln“). Sie sind nützlich beim Migrieren einer bestehenden px-lastigen Codebasis. Ein Live-Konverter wie diese Seite ist weiterhin nützlich für Einzelfälle, das Nachschlagen von Design-Spezifikationen und das Erlernen der Mathematik von Hand.
Werden Daten an einen Server gesendet?
Nein. Die Umrechnung ist eine einzige Division, reine JavaScript-Arithmetik, die lokal in Ihrem Browser läuft. Nichts von Ihrer Eingabe verlässt die Seite; das Werkzeug funktioniert offline, sobald es geladen ist.