PX-REM-EM-Umrechner
px in rem und em umrechnen mit einstellbarer Root-Schriftgröße – live, mit Tabelle gängiger Werte, kostenlos ohne Anmeldung.
Der Umrechner wandelt CSS-Einheiten ineinander um: px, rem, em und pt. Du gibst einen Wert ein, wählst die Einheit und stellst die Root-Schriftgröße ein, meist 16 px. Die Ergebnisse erscheinen sofort und lassen sich kopieren. Für em gilt die Schriftgröße des Elternelements, die du separat festlegen kannst. Alles läuft lokal im Browser.
Leer lassen: gleich der Root-Größe.
Pixel
24px
rem
1.5rem
em
1.5em
Punkt
18pt
Häufige Werte bei 16 px Root-Größe
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 56px | 3.5rem | 42pt |
| 64px | 4rem | 48pt |
| 72px | 4.5rem | 54pt |
| 80px | 5rem | 60pt |
| 96px | 6rem | 72pt |
px, rem und em im Überblick
Pixel (px) sind feste Größen. rem und em sind relative Einheiten, die von einer Schriftgröße abhängen. Das macht Layouts flexibler, wenn Nutzer ihre Standardschrift vergrößern oder Komponenten in verschiedenen Kontexten wiederverwendet werden.
| Einheit | Bezugsgröße | Formel für px |
|---|---|---|
| px | Bildschirmpixel (CSS-Pixel) | Wert |
| rem | Schriftgröße von html | Wert × Root-Größe |
| em | Schriftgröße des Elternelements | Wert × Eltern-Größe |
| pt | Punkt (1/72 Zoll) | Wert × 96 ÷ 72 |
So gehst du vor
- Wert und Einheit eintragen. Das Ergebnis erscheint ohne Klick.
- Root-Schriftgröße anpassen, falls dein Projekt nicht 16 px nutzt.
- Die passende Zeile kopieren und ins Stylesheet einfügen.
Beispiel
Ein Button soll 12 px Innenabstand oben und unten haben. Bei 16 px Root-Größe sind das 0.75rem. Ändert eine Person ihre Browserschrift auf 20 px, wird daraus
automatisch 15 px und der Button bleibt proportional. Für fließende Größen zwischen zwei
Bildschirmbreiten hilft der clamp()-Rechner, für ganze
Skalen der Typografie-Skala-Generator.
Häufige Fragen
Wie rechne ich px in rem um?
Teile den Pixelwert durch die Root-Schriftgröße. Bei den üblichen 16 px ergibt 24 px genau 1,5 rem. Umgekehrt multiplizierst du den rem-Wert mit der Root-Schriftgröße.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schriftgröße des html-Elements. em bezieht sich auf die Schriftgröße des Elternelements und kann sich deshalb verschachteln und aufsummieren. rem ist berechenbarer, em passt sich lokal an Komponenten an.
Warum rem statt px verwenden?
Wer in den Browsereinstellungen eine größere Standardschrift wählt, sieht rem-Werte mitwachsen, feste px-Werte dagegen nicht. Das hilft Menschen mit eingeschränktem Sehvermögen und unterstützt die Barrierefreiheit.
Was bedeutet html { font-size: 62.5% }?
Damit wird die Root-Schriftgröße auf 10 px gesetzt, denn 62,5 % von 16 px sind 10 px. Dann entspricht 1 rem genau 10 px und die Umrechnung fällt leicht. Stelle hier 10 als Root-Schriftgröße ein, um die Werte zu sehen.
Wie viele Punkte (pt) sind ein Pixel?
In CSS gilt 1 pt = 1,333 px, also 1 px = 0,75 pt. Punkte stammen aus dem Druck und kommen im Web selten vor, sind aber bei Druckstilen nützlich.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.