PX in REM umrechnen – Pixel in rem und zurück
Wandle Pixelwerte in rem um – für responsives, barrierefreies CSS – oder rem zurück in Pixel. Lege deine Root-Schriftgröße fest, nutze die Tabelle oder füge ein ganzes Stylesheet ein, um alle px-Werte auf einmal umzurechnen.
rem = px ÷ Root-Schriftgröße. Mit dem Browser-Standard von 16px gilt: 24px = 1,5rem, 32px = 2rem, 14px = 0,875rem. Gib einen Wert in eines der Felder ein, das andere aktualisiert sich sofort; ändere die Root-Größe, wenn dein html-Element eine andere Schriftgröße nutzt.
So funktioniert: PX-in-REM-Rechner
- Root-Schriftgröße prüfen (Standard 16px).
- Pixel eingeben für rem oder rem eingeben für Pixel.
- Die Tabelle für gängige Größen nutzen.
- CSS einfügen, um alle px-Werte umzurechnen.
- Umgerechnetes CSS kopieren.
Was ist rem?
rem steht für „root em“: eine Länge relativ zur Schriftgröße des html-Elements. Browser verwenden standardmäßig 16px, also gilt 1rem = 16px, solange du nichts änderst. Anders als em, das sich auf das Elternelement bezieht und sich beim Verschachteln aufaddiert, bezieht sich rem immer auf denselben Wert und ist dadurch berechenbar.
| px | rem (Basis 16px) | px | rem (Basis 16px) |
|---|---|---|---|
| 12px | 0,75rem | 32px | 2rem |
| 14px | 0,875rem | 40px | 2,5rem |
| 16px | 1rem | 48px | 3rem |
| 20px | 1,25rem | 64px | 4rem |
| 24px | 1,5rem | 96px | 6rem |
Häufig gesuchte Werte haben eigene Seiten, zum Beispiel 16px in rem, 24px in rem und 32px in rem.
Warum rem statt px?
Erhöht jemand die Standardschrift im Browser – üblich bei Sehschwäche –, wachsen Texte und Abstände in rem mit, während px-Werte gleich bleiben. rem für Schriftgrößen, Padding, Margins und Media Queries hält das Layout proportional und hilft bei WCAG 1.4.4 (Textgröße ändern) und der BITV. Haarlinien und Schatten können in px bleiben.
Der 62,5-%-Trick
Manche Projekte setzen `html { font-size: 62.5%; }`, damit 1rem = 10px gilt und Kopfrechnen leicht fällt. Das überschreibt aber die vom Nutzer gewählte Größe für alles, was nicht neu skaliert wird – viele Teams bleiben daher bei 16px und nutzen einen Umrechner. Trage 10 als Root-Größe ein, um dieses Setup abzubilden.
Ganzes Stylesheet umrechnen
Füge CSS ein, und jede Zahl mit px wird mit deiner Root-Größe in rem umgerechnet. 0px wird zu 0, 1px-Werte bleiben standardmäßig erhalten, damit Rahmen scharf bleiben. Prüfe danach die Media Queries: Dort nutzt rem immer den Browser-Standard, nicht deine html-Schriftgröße.
Verwandte Tools
Ecken rundest du mit dem Border-Radius-Generator, Schatten gestaltest du im CSS Box-Shadow-Generator, und die fertige Datei verkleinert der CSS-Minifier und -Formatierer.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Beliebte Berechnungen
Häufige Fragen
Wie rechne ich px in rem um?
Pixelwert durch die Root-Schriftgröße teilen. Bei 16px: 24 ÷ 16 = 1,5rem.
Wie viele px sind 1rem?
Standardmäßig 16px, weil Browser eine Root-Schriftgröße von 16px nutzen.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die html-Schriftgröße, em auf das Elternelement und addiert sich beim Verschachteln.
Soll ich rem oder px für Schriftgrößen nutzen?
rem ist barrierefreier, weil es die Schriftgröße-Einstellung des Browsers respektiert.
Kann ich eine ganze CSS-Datei umrechnen?
Ja. Füge sie in das Feld ein, und alle px-Werte werden umgerechnet.
Zuletzt aktualisiert: