PX-zu-REM-Konverter

Den Pixelwert durch die Root-Schriftgröße dividieren: rem = px ÷ Root. Mit der Browser-Standard-16px-Root: 16px ÷ 16 = 1rem, 24px ÷ 16 = 1,5rem und 40px ÷ 16 = 2,5rem. Beliebigen px-Wert in den Umrechner oben eingeben, das rem-Feld aktualisiert sich sofort — kein Kopfrechnen nötig. Beim 62,5%-Trick (10px Root) einfach durch 10 dividieren: 24px = 2,4rem.

Den rem-Wert mit der Root-Schriftgröße multiplizieren: px = rem × Root. Bei der Standard-16px-Root: 1rem × 16 = 16px, 1,5rem × 16 = 24px und 0,875rem × 16 = 14px. Das rem-Feld im Umrechner bearbeiten und das px-Feld folgt sofort. Der Umrechner ist vollständig bidirektional — den bekannten Wert eingeben und die anderen aktualisieren sich automatisch.

1rem entspricht der Root-(html-)Schriftgröße. In allen gängigen Browsern — Chrome, Safari, Firefox, Edge — beträgt diese standardmäßig 16px, also 1rem = 16px, sofern die Root nicht geändert wurde. Bei einer Root von 10px (62,5%-Trick) entspricht 1rem stattdessen 10px. Nutzer können außerdem die Standard-Textgröße in den Browser-Einstellungen ändern, was den Wert von 1rem für sie verändert — deshalb ist rem für barrierefreie Schriftgrößen besser als px geeignet.

0,875rem entspricht 14px bei der Standard-16px-Root (0,875 × 16 = 14). Dies ist einer der am häufigsten verwendeten rem-Werte in CSS-Frameworks — Tailwinds Klasse text-sm ist 0,875rem (14px). Bei einer 10px-Root (62,5%-Trick) würde 0,875rem 8,75px entsprechen.

px ist eine absolute, feste Einheit — 16px sind immer 16 Pixel, unabhängig von Nutzereinstellungen oder Bildschirmgröße. rem ist relativ: es ist ein Vielfaches der Schriftgröße des Root-Elements (html), also 1rem = 16px standardmäßig, skaliert aber, wenn der Nutzer die Basis-Textgröße in den Barrierefreiheits-Einstellungen des Browsers erhöht. Das macht rem-basierte Layouts zugänglicher — Text wächst proportional, wenn der Nutzer größere Schrift anfordert, während px-basierter Text fixiert bleibt und zu klein zum Lesen werden kann.

px ist fest. rem ist relativ zur Root-(html-)Schriftgröße — ein einheitlicher Anker für die gesamte Seite. em ist relativ zur Schriftgröße des eigenen Elternelements und addiert sich bei verschachtelten Elementen: Ein Elternelement mit 20px und ein Kind mit 1,5em ergibt 30px für das Kind. Dasselbe Kind mit 1,5rem ergibt 24px (1,5 × die 16px-Root), unabhängig vom Elternelement. Bei einer 16px-Root ohne Verschachtelung sind 16px, 1rem und 1em gleich — der Unterschied tritt erst auf, wenn sich Elternschriftgrößen ändern.

rem ist aus Barrierefreiheitsgründen besser für Schriftgrößen. Wenn jemand die Standard-Textgröße seines Browsers erhöht — ein häufiger Bedarf für Nutzer mit Sehbeeinträchtigungen —, skalieren alle rem-basierten Schriftgrößen mit, während px-Werte fixiert bleiben. WCAG-2.1-Richtlinie 1.4.4 (Textgröße ändern) verlangt, dass Text auf 200% vergrößert werden kann, ohne dass Funktionen verloren gehen — rem macht das mühelos. px nur für Dinge verwenden, die nicht skalieren sollen, wie 1px-Rahmen oder Icons fester Größe.

Der 62,5%-Trick setzt die Root-(html-)Schriftgröße auf 62,5% — was beim Browser-Standard von 16px gleich 10px ist. Damit wird die rem-Arithmetik trivial einfach: 1,6rem = 16px, 2,4rem = 24px, 3,2rem = 32px. Jeder rem-Wert entspricht sauber einem Vielfachen von 10. Das 10px-Preset hier auswählen und Umrechner sowie Referenztabelle berechnen sich sofort neu, sodass die saubere Zuordnung sichtbar wird. Der Nachteil: Die Root-Größe überschreibt den Browser-Standard des Nutzers, was die Barrierefreiheit leicht einschränkt.

Bei der Standard-16px-Root: 10px = 0,625rem, 12px = 0,75rem, 13px = 0,8125rem, 14px = 0,875rem, 16px = 1rem, 18px = 1,125rem, 20px = 1,25rem, 24px = 1,5rem, 28px = 1,75rem, 32px = 2rem, 40px = 2,5rem, 48px = 3rem. Die Referenztabelle im Tool listet alle gängigen Werte auf und ermöglicht das Kopieren mit einem einzigen Klick — schneller als jedes Mal manuell zu berechnen.

Tailwind CSS verwendet standardmäßig rem-Einheiten für die meisten Größenwerte mit einer 16px-Root. Tailwinds Abstandsskala: 1 Einheit = 0,25rem = 4px. Also space-4 = 1rem = 16px, space-6 = 1,5rem = 24px, space-8 = 2rem = 32px. Für Typografie: text-sm = 0,875rem (14px), text-base = 1rem (16px), text-lg = 1,125rem (18px), text-xl = 1,25rem (20px), text-2xl = 1,5rem (24px). Dieser Umrechner ermöglicht die schnelle Überprüfung beliebiger px-Werte im Verhältnis zu Tailwinds rem-basiertem System.

Ja, vollständig. Der Umrechner läuft komplett in JavaScript im Browser — keine Serverkommunikation, keine API-Aufrufe, keine hochgeladenen Daten. Er funktioniert offline, sobald die Seite einmal geladen wurde. Eingegebene Werte verlassen das Gerät nie. Als Lesezeichen speichern und im Flugzeug, im Tunnel oder überall ohne Internetverbindung nutzen, wo man gerade programmiert. Nichts wird auf einem Server gespeichert.

Beliebigen Wert in das Feld Root-Schriftgröße eingeben — oder die Preset-Schaltflächen für 16px (Browser-Standard) oder 10px (62,5%-Trick) verwenden. Jede rem-, em- und pt-Umrechnung in der Tabelle und im aktiven Eingabefeld berechnet sich sofort neu. Wenn das CSS html { font-size: 18px; } setzt, 18 als Root eingeben und alle Umrechnungen sind für die spezifische Projektskala korrekt.