px in rem umrechnen (und rem in px)

Von Pixel zu rem, ohne Kopfrechnen

Dieser Rechner wandelt eine Größe in Pixel in rem um und umgekehrt, ausgehend von der Basis-Schriftgröße Ihrer Seite. Außerdem berechnet er em-Werte nach der Größe des Elternelements, rechnet einen ganzen CSS-Block auf einmal um und zeigt eine Umrechnungstabelle von 1 bis 96 px. Alles läuft in Ihrem Browser, es wird nichts übertragen.

So funktioniert es

1. Unter „Basis-Schriftgröße“ lassen Sie 16 stehen oder wählen eine Voreinstellung: 10, 14, 16, 18 oder 20 px.
2. In „px ↔ rem umrechnen“ tippen Sie einen Wert in „Pixel (px)“ oder „rem“. Das andere Feld passt sich sofort an, darunter steht die Formel. „Kopieren“ legt den Wert samt Einheit in die Zwischenablage.
3. Für em tragen Sie die „Größe des Elternelements (px)“ ein und dann den Wert in Pixel oder em.
4. Für ein ganzes Stylesheet fügen Sie den Code in „Umzurechnendes CSS“ ein. Stellen Sie „1px ignorieren“, „Rahmen ignorieren (border, outline)“, „Nachkommastellen“ und „px als Kommentar behalten“ ein und klicken Sie auf „CSS kopieren“.
5. In der Tabelle kopiert ein Klick den jeweiligen Wert.

Basis und Optionen bleiben auf Ihrem Gerät gespeichert.

px, rem und em: der Unterschied

px ist eine feste Größe. rem entspricht der Schriftgröße des Wurzelelements html, also 16 px, solange niemand sie ändert. em entspricht der Schriftgröße des Elternelements und multipliziert sich: Text mit 1.2em in einem Block mit 1.2em ist 1,44-mal so groß wie die Basis, bei 16 px also 23,04 px.

Die Formel lautet rem = px ÷ Basis und zurück px = rem × Basis. Bei Basis 16 sind 20 px genau 1.25rem, 32 px sind 2rem und 1.5rem sind 24 px. Genau diese Rechnung brauchen Sie, wenn das Layout alle Maße in Pixel liefert und Ihr Projekt mit rem arbeitet.

Warum rem für die Barrierefreiheit zählt

Menschen mit Sehschwäche stellen in ihrem Browser oft eine größere Standardschrift ein, etwa 20 statt 16 px. Eine Überschrift mit 24px bleibt bei 24 px und übergeht diese Wahl. Mit 1.5rem wächst sie auf 30 px. rem folgt also der Einstellung der Nutzer, wie es die Regeln zur Barrierefreiheit verlangen, in Deutschland etwa die BITV und seit 2025 das Barrierefreiheitsstärkungsgesetz.

Wann rem, wann em?

• rem für Schriftgrößen, Abstände und Ränder des Layouts: Die ganze Seite hängt an einem Wert.
• em für alles, was mit dem Text der eigenen Komponente wachsen soll, etwa das Padding eines Buttons. Bei einem Elternelement von 20 px sind 30 px genau 1.5em.
• px für feine Rahmen und Schatten, daher die Option „Rahmen ignorieren (border, outline)“.

Beispiel für die gesammelte Umrechnung

Mit Basis 16 und ignorierten Rahmen wird aus padding: 16px 24px; border: 1px solid; font-size: 18px der Code padding: 1rem 1.5rem; border: 1px solid; font-size: 1.125rem. Selektoren, @media-Bedingungen, Kommentare, Zeichenketten und url() bleiben unverändert.

Häufige Fragen

Wie viele Pixel sind 1rem?

1rem entspricht der Basis der Seite, also 16 px, wenn die Größe von html nicht geändert wurde. Mit html { font-size: 62.5% } ist 1rem gleich 10 px, und 14 px werden zu 1.4rem.

Muss ich die Basis ändern, wenn meine Seite 16 px nutzt?

Nein. Ändern Sie sie nur, wenn Ihr Stylesheet html eine andere Schriftgröße gibt, sonst stimmen alle Ergebnisse nicht.

Warum bleibt 1px in Pixel?

Eine 1-px-Linie als 0.0625rem kann auf manchen Bildschirmen unscharf wirken oder ganz verschwinden. „1px ignorieren“ lässt sie unverändert.

Wie viele Nachkommastellen sind sinnvoll?

Vier genügen: 1 px sind bei Basis 16 genau 0.0625rem. Bei Basis 14 ergeben 10 px mit vier Stellen 0.7143rem und mit zwei Stellen 0.71rem, also 9,94 px. Diesen Unterschied sieht niemand.