PX zu REM Konverter
Um px in rem umzurechnen, teilen Sie den Pixelwert durch die Schriftgröße des Wurzelelements: rem = px / Basis. Bei der Browser-Standardbasis von 16px ergibt 24px / 16 = 1.5rem. Ändern Sie die Basis unten – 14px für Ant Design, 10px für den 62,5-%-Trick – und rem und em folgen ihr; der Punktwert richtet sich dagegen nach den Pixeln, denn 1px sind immer 0,75pt.
Das em-Feld nimmt an, dass das Element die Basisschriftgröße von oben erbt. In CSS bezieht sich em auf die Schriftgröße des Elements selbst – und auf die des Elternelements, wenn Sie damit font-size setzen.
Massenumrechnung: CSS oder eine Liste von px-Werten einfügen
Jeder px-Wert wird gegen die Basisschriftgröße oben in rem umgeschrieben.
Wie rechne ich px in rem um?
Die Formel lautet rem = px / Basisschriftgröße, umgekehrt px = rem x Basisschriftgröße. Nur die Schriftgröße des html-Wurzelelements zählt, egal wie tief das Element verschachtelt ist – genau das macht die rem-Arithmetik vorhersagbar. Bei der Standardbasis 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem und 40px = 2.5rem.
Runden Sie das Ergebnis nicht. 15px sind bei 16px Basis exakt 0.9375rem; auf 0.94rem gerundet werden daraus 15.04px, und das zerstört die Ausrichtung in einem Raster. Browser rechnen mit Subpixel-Längen und rasten sie beim Zeichnen auf das Gerätepixelraster ein – kopieren Sie also den exakten Wert, den der Konverter liefert. Der Konverter zeigt bis zu sechs Nachkommastellen: exakt bei Basiswerten, die glatt aufgehen, etwa 16px und 10px, und auf ein Millionstel rem genau bei einer Basis wie 14px, die das nicht tut.
px-zu-rem-Tabelle für 16px, 14px und 10px Basis
Derselbe Pixelwert ergibt je nach Basis des Projekts drei verschiedene rem-Werte, deshalb listet diese Tabelle alle drei auf, dazu die Entsprechung in Punkt (CSS definiert 1px als 1/96 Zoll und 1pt als 1/72 Zoll, also 1px = 0.75pt). Die Spalten für 16px und 10px sind exakt. Bei 14px Basis geht die Division meist nicht auf; diese Werte sind auf vier Nachkommastellen gerundet und mit dem Näherungszeichen markiert. Der Konverter oben zeigt mehr Stellen.
| Pixel | rem (Basis 16 px) | rem (Basis 14 px) | rem (Basis 10 px) | Punkt |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem oder em: welche Einheit soll ich nehmen?
Die praktische Aufteilung: rem für alles, was der Textgröße des Lesers folgen soll, em für Werte, die der Schriftgröße des Elements selbst folgen müssen, und px nur dort, wo eine Länge physisch fest bleiben muss. Die Beispielspalte geht von 16px Basis und 16px Elternelement aus.
| Einheit | Bezugsgröße | 20px entspricht | Am besten für | Folgt der Textgröße des Lesers |
|---|---|---|---|---|
| px | Nichts – absolut (1px = 1/96 Zoll) | 20px | Haarlinien-Rahmen, Fokusringe, exakte Icon-Größen | Nein |
| rem | Die Schriftgröße des html-Wurzelelements | 1.25rem | Schriftgrößen, Abstände, Breakpoints, ganze Typo-Skalen | Ja |
| em | Die Schriftgröße des Elements selbst (die des Elternelements bei font-size) | 1.25em | Innenabstand, der mit der umschlossenen Beschriftung wachsen soll | Ja |
| % | Der Wert des Elternelements für diese Eigenschaft | 125% | Fließende Breiten und alte font-size-Bäume | Ja (font-size) |
px oder rem für Innenabstand, Außenabstand und Rahmen?
Nehmen Sie rem für Innen- und Außenabstände, die mitwachsen sollen, wenn der Text größer wird: Button-Padding, Kartenabstände, Sektionsabstände, Raster-Lücken. Für Haarlinien bleibt px. Ein 1px-Rahmen ist genau ein geräteunabhängiges Pixel, während derselbe Rahmen als 0.0625rem bei manchen Zoomstufen auf null abgerundet wird oder unscharf erscheint; dasselbe gilt für 2px-Fokusringe und Trennlinien. Deshalb lässt die Massenumrechnung oben 1px- und 2px-Werte standardmäßig unangetastet und schreibt alles andere um.
Media Queries sind der zweite Ort, an dem sich rem auszahlt. In einer Media Query bezieht sich rem auf die Ausgangsschriftgröße des Browsers und nicht auf Ihre html-Regel: Ein Breakpoint von 48rem sind 768px bei Standardeinstellungen und wächst für Leser, die ihre Textgröße erhöht haben. Breakpoints in px bewegen sich nie.
Wie rechne ich px in rem um – in Figma, VS Code und Tailwind?
Figma misst in px, doch der Dev Mode kann rem ausgeben: Öffnen Sie die Inspect-Einstellungen, wählen Sie „Set unit scale“ und tragen Sie Ihre Basisschriftgröße ein (standardmäßig 1rem = 16px). VS-Code-Erweiterungen wie cssrem rechnen über die Autovervollständigung um und machen die Basis als Einstellung zugänglich – cssrem.rootFontSize, Standardwert 16 –, prüfen Sie also, ob sie zu einem 14px-Projekt passt. Für eine ganze Datei fügen Sie sie oben in das Massenfeld ein und stellen zuerst die Basis ein. Tailwinds Standardskala ist bereits rem-basiert bei 16px Basis: eine Abstandseinheit ist 0.25rem (4px), also ist 16px gleich 4, 24px gleich 6 und 40px gleich 10.
Quellen
Über PX zu REM Konverter
Dieser px-zu-rem-Konverter beantwortet eine Frage: Was wird aus einem Pixelwert Ihrer Designdatei im CSS, bei der Basisschriftgröße, die Ihr Projekt tatsächlich verwendet? Bewegen Sie den Basisregler – 16px ist der Browser-Standard, 14px der von Ant Design, 10px der alte 62,5-%-Trick – und jeder rem- und em-Wert auf der Seite wird daran neu berechnet, sodass Sie sich nie merken müssen, für welche Basis eine Zahl geschrieben wurde.
Als Basis tragen Sie ein, was Ihr Stylesheet auf dem html-Element festlegt – nicht auf body und nicht die Schriftgröße der Komponente, die Sie gerade gestalten. Fehlt eine solche Regel, gilt der Browser-Standard: 16px, sofern der Leser ihn nicht erhöht hat. Wählen Sie in den DevTools den html-Knoten aus und lesen Sie dessen berechnete font-size ab; diese Zahl ist der Divisor für das ganze Stylesheet. Die vier Framework-Schaltflächen tragen sie für Tailwind, Bootstrap, Material UI und Ant Design ein.
Das Besondere hier ist der Massenmodus: Fügen Sie ein Stylesheet, einen Spec-Auszug aus Figma oder eine schlichte Zahlenliste ein und erhalten Sie eine rem-Fassung zurück, samt Zähler der geänderten Werte, bereit zum Kopieren oder als CSV-Download. Unterhalb des Werkzeugs finden Sie die Formel in beide Richtungen, eine Tabelle von 1px bis 96px bei drei Basiswerten mit Punktentsprechungen, einen Einheitenvergleich und zehn ausführlich beantwortete Fragen.
Anwendungsfälle
Anleitung
Stellen Sie die Basisschriftgröße ein: 16px ist der Browser-Standard, 14px entspricht Ant Design, 10px ergibt den 62,5-%-Trick.
Tragen Sie den Pixelwert in das Feld Pixel ein. Die Felder rem, em und pt aktualisieren sich beim Tippen.
Oder rückwärts: Geben Sie einen rem-Wert ein und lesen Sie ab, welche Pixelgröße er bei der aktuellen Basis ergibt.
Tippen Sie einen Wert in der Schnelltabelle von 8px bis 96px an, um ihn zu übernehmen, oder lesen Sie die vollständige Tabelle für 16px, 14px und 10px.
Fügen Sie einen ganzen CSS-Block in die Massenumrechnung ein, um alle px-Werte auf einmal umzuschreiben – 1px- und 2px-Rahmen bleiben erhalten.
Kopieren Sie die erzeugte CSS-Deklaration oder laden Sie die umgerechneten px/rem-Paare als CSV für die Übergabe an das Design herunter.
Profi-Tipps
- Stellen Sie zuerst die Basisschriftgröße ein: Sie bestimmt jeden rem- und em-Wert auf der Seite – die Felder, die Schnellwahl und die Massenumrechnung –, ein Wechsel auf 14px schreibt sie also alle auf einmal neu.
- Lassen Sie 1px- und 2px-Rahmen in px. Subpixel-Rahmen können bei manchen Zoomstufen auf null abgerundet werden – deshalb überspringt die Massenumrechnung sie standardmäßig.
- pt hängt nicht von der Basis ab: 24px sind 18pt, egal ob Ihre Basis 16px oder 10px ist – das Punkt-Feld bleibt stehen, während der Regler wandert.
- Die Massenumrechnung läuft neu, sobald Sie den Basis-Regler bewegen – so sehen Sie dasselbe Stylesheet bei 16px und bei 14px Basis, ohne es zweimal einzufügen.
- Greifen Sie nur dann zu em, wenn ein Wert der Schriftgröße seines eigenen Elements folgen muss, etwa Button-Padding um eine Beschriftung; alles andere bleibt in rem, damit sich nichts multipliziert.
Häufig gestellte Fragen
Teilen Sie den Pixelwert durch die Basisschriftgröße: rem = px / Basis. Der Browser-Standard liegt bei 16px, also ergibt 24px / 16 = 1.5rem und 10px / 16 = 0.625rem. Für rem zählt allein die Schriftgröße des Wurzelelements, egal wie tief das Element verschachtelt ist – und genau das macht die Rechnung über ein ganzes Stylesheet hinweg vorhersagbar.
Bei der Standardbasis 16px gilt 1rem = 16px, 1.5rem = 24px und 2rem = 32px; hier wird multipliziert statt geteilt: px = rem x Basis. Liegt die Basis wie bei Ant Design bei 14px, sind 1rem nur noch 14px und 1.5rem werden zu 21px. Ein rem-Wert ist ohne seine Basis bedeutungslos – nennen Sie sie also immer dazu.
Eine Schriftgröße in px ignoriert die Textgröße, die der Leser im Browser eingestellt hat: Wer seinen Standard auf 20px gesetzt hat, bekommt trotzdem Ihre fest codierten 14px. rem wird an dieser Einstellung gemessen, sodass alle Größen gemeinsam skalieren. WCAG 2.2, Erfolgskriterium 1.4.4, erwartet, dass Text eine Vergrößerung auf 200 % übersteht – eine rem-basierte Typo-Skala schafft das ohne eine einzige zusätzliche Media Query.
rem bezieht sich immer auf die Schriftgröße des html-Wurzelelements. em bezieht sich auf die Schriftgröße des Elements, an dem es notiert ist – außer in der Eigenschaft font-size selbst, wo es sich auf die Schriftgröße des Elternelements bezieht. Deshalb multiplizieren sich verschachtelte Schriftgrößen: 0.9em in 0.9em in 0.9em ergibt 0.729 des Ausgangswerts. rem multipliziert sich nie, und darum ist es die sicherere Wahl für Typo-Skalen und Layout-Abstände.
Nehmen Sie rem für Abstände, die mitwachsen sollen, wenn der Text größer wird – Button-Padding, Kartenabstände, Sektionsabstände. Für Haarlinien bleibt px: Ein 1px-Rahmen bleibt scharf, während die rem-Entsprechung bei manchen Zoomstufen auf null abgerundet wird oder verschwimmt. Genau deshalb lässt die Massenumrechnung auf dieser Seite 1px- und 2px-Werte standardmäßig in px stehen.
Bleiben Sie bei 16px, sofern kein Framework etwas anderes vorgibt, denn das entspricht dem Browser-Standard. Ant Design liefert eine Basis von 14px. Der 62,5-%-Trick setzt html { font-size: 62.5% }, sodass 1rem = 10px gilt und die Rechnung px / 10 lautet: 24px sind 2.4rem. Er folgt weiterhin der Einstellung des Lesers – 62,5 % eines 20px-Standards sind 12.5px –, aber Sie müssen anschließend body { font-size: 1.6rem } setzen, sonst wird jeder Absatz mit 10px gerendert, und Fremdkomponenten für eine 16px-Basis wirken zu klein. Alle drei Basiswerte stehen in der Tabelle oben.
Lesen Sie den Wert im Inspector ab und teilen Sie ihn durch Ihre Basis: Eine 28px-Überschrift ist bei 16px 1.75rem, eine 12px-Bildunterschrift 0.75rem. Der Dev Mode kann rem auch selbst ausgeben – öffnen Sie die Inspect-Einstellungen neben der Sprachauswahl, wählen Sie „Set unit scale“ und tragen Sie Ihre Basisschriftgröße ein (standardmäßig 1rem = 16px). Fügen Sie einen ganzen exportierten Block oben in das Massenfeld ein, um alle Werte auf einmal umzuschreiben.
Ja, und meistens ist es besser. In einer Media Query bezieht sich rem auf die Ausgangsschriftgröße des Browsers und nicht auf Ihre html-Regel: Ein Breakpoint von 48rem entspricht bei Standardeinstellungen 768px und wächst für Leser, die ihren Text vergrößert haben. em verhält sich dort genauso. Breakpoints in px bleiben fest, egal was der Leser eingestellt hat.
Nein. Browser rechnen mit Subpixel-Längen und rasten sie beim Zeichnen auf Gerätepixel ein, sodass 0.9375rem bei 16px Basis exakt 15px ergibt. Auf 0.94rem gerundet sind es 15.04px, und dieser Fehler summiert sich über ein Raster oder einen vertikalen Rhythmus. Kopieren Sie den exakten Wert, den der Konverter ausgibt, und überlassen Sie das Einrasten dem Browser.
CSS definiert 1px als 1/96 Zoll und 1pt als 1/72 Zoll, also gilt 1px = 0.75pt und 16px = 12pt – das ist das Verhältnis hinter der pt-Spalte in der Tabelle. Androids dp ist ein eigenes System, in dem 1dp = 1px bei 160 dpi entspricht; deshalb landet ein Material-Abstand von 16dp im Web nahe bei 16px und nicht bei einer rem-Umrechnung.