Was ist der Unterschied zwischen rem und px?

px ist eine absolute Einheit — ein Pixel auf dem Bildschirm, unveränderlich. rem ist eine relative Einheit, die sich auf die Schriftgröße des Root-Elements (html) bezieht. Der Browser-Standard ist 16px, also ist 1rem = 16px. Mit rem passen sich Layouts an die Schriftgrößeneinstellungen des Nutzers an, was die Barrierefreiheit verbessert.

Was ist der Unterschied zwischen rem und em?

rem bezieht sich immer auf die Root-Schriftgröße. em bezieht sich auf die Schriftgröße des Elternelements und kann sich in verschachtelten Elementen summieren: ein Element mit 1,2em innerhalb eines Elements mit 1,2em ergibt 1,44-fache Größe. rem vermeidet diesen Kaskadierungseffekt und verhält sich vorhersehbarer.

Warum nicht einfach überall px verwenden?

Das Hauptproblem mit px bei Schriftgrößen ist, dass Nutzereinstellungen im Browser ignoriert werden. Manche Nutzer erhöhen die Standard-Schriftgröße aus Sehgründen. Mit px werden diese Einstellungen komplett übergangen. rem respektiert die Nutzereinstellungen und skaliert entsprechend — eine WCAG-Anforderung für Barrierefreiheit.

Wann ist px die bessere Wahl?

Für Elemente, die nicht mit der Schriftgröße skalieren sollen: border-width (border: 1px solid ist Standard), box-shadow-Blur-Werte, Schatten-Spreads und feste Größen für dekorative Icons. Für Schriftgrößen, Abstände und Layout-Dimensionen ist rem die bessere Wahl.

Wie rechne ich px schnell in rem um?

Die Formel ist: rem = px ÷ Basis-Schriftgröße. Bei der Standard-Basis von 16px: 24px = 1,5rem, 32px = 2rem, 14px = 0,875rem. Der PixelRemConverter auf ToolboxHubs erledigt diese Umrechnung sofort und zeigt auch eine Konversionstabelle für häufig genutzte Größen.

Pixel zu rem — CSS-Einheiten ein für alle Mal verstehen

Das Designdokument ist geöffnet. Da steht font-size: 18px, padding: 24px, margin-top: 40px. Beim Wechsel in den Code-Editor kommt unweigerlich die Frage: Soll ich das in rem umrechnen? Oder kann ich px lassen?

Diese Unsicherheit kennen viele Entwickler. Wer einmal verstanden hat, wann welche CSS-Einheit sinnvoll ist, schreibt barrierefreieren und wartungsfreundlicheren Code — fast automatisch.

Warum rem existiert

CSS-Einheiten teilen sich in absolute und relative Einheiten. px ist absolut — ein Pixel auf dem Bildschirm, festgelegt, unabhängig von allem anderen.

rem ist relativ. Die Abkürzung steht für "root em" und bezieht sich auf die Schriftgröße des Root-Elements — des html-Tags. Der Browser-Standard beträgt 16px. Ohne eigene Anpassungen gilt also:

1rem = 16px
0,875rem = 14px
1,5rem = 24px
2rem = 32px

"Ich kann das auch mit dem Taschenrechner dividieren, warum brauche ich rem?" — Der Grund ist Barrierefreiheit.

Manche Nutzer erhöhen die Standard-Schriftgröße im Browser, weil sie schlechter sehen oder größeren Text bevorzugen. Bei 20px oder 24px als Basis statt 16px skaliert alles, was in rem angegeben ist, proportional mit. Layouts in px bleiben davon unberührt und ignorieren die Nutzereinstellungen.

Die Web Content Accessibility Guidelines (WCAG) verlangen, dass Textgröße vom Nutzer verändert werden kann. rem ist der natürlichste Weg, diese Anforderung zu erfüllen.

Was wann verwenden

rem empfohlen:

font-size (Fließtext, Überschriften, Button-Beschriftungen)
margin, padding (Abstände im Layout)
width, max-width (Container-Breiten)
gap in Grid und Flexbox

px sinnvoll:

border-width (border: 1px solid ist die Standardpraxis)
box-shadow Blur- und Spread-Werte
Feste Größen für dekorative Icons
outline-Details

em mit Bedacht:

Abstände innerhalb einer Komponente, die proportional zur eigenen Schriftgröße sein sollen (z.B. padding: 0,5em 1em beim Button)
Media-Query-Breakpoints für nutzerseitige Zoom-Treue

em verhält sich kumulativ in verschachtelten Elementen. Wenn das nicht explizit gewünscht ist, ist rem die sicherere Wahl.

Die Umrechnungsformel

rem-Wert = px-Wert ÷ Basis-Schriftgröße

Häufige Umrechnungen bei 16px Basis:

px-Wert	rem-Wert
12px	0,75rem
14px	0,875rem
16px	1rem
18px	1,125rem
20px	1,25rem
24px	1,5rem
32px	2rem
40px	2,5rem
48px	3rem
64px	4rem

Ein paar häufige Werte prägt man sich ein, den Rest schlägt man nach oder lässt ein Tool umrechnen.

Der PixelRemConverter

Der PixelRemConverter auf ToolboxHubs nimmt einem die Rechenarbeit ab:

px-Wert eingeben — Sofortige Anzeige des rem-Äquivalents
Basis anpassen — Standard 16px, anpassbar an die tatsächliche Root-Schriftgröße des Projekts
Konversionstabelle nutzen — Übersicht häufiger Größen mit ihren rem-Werten
Rückwärtskonversion — rem zu px ist genauso möglich

Bei der CSS-Implementierung von Designdokumenten lohnt es sich, das Tool geöffnet zu halten.

Praxisbeispiel

Aus einem Figma-Design kommen folgende Werte:

Kartentitel: font-size: 28px
Karteninhalt: font-size: 14px
Karteninnenabstand: padding: 20px
Rahmen: border: 1px solid

Im CSS:

.card-title {
  font-size: 1.75rem;  /* 28px */
}

.card-body {
  font-size: 0.875rem; /* 14px */
}

.card {
  padding: 1.25rem;    /* 20px */
  border: 1px solid #e2e8f0; /* px bleibt px */
}

Der Rahmen bleibt in px, weil ein 1px-Rahmen immer 1px sein soll — unabhängig von Schriftgrößeneinstellungen. Diese Konsistenz im Denken macht den Code wartbarer.

Skalierung durch eine einzige Anpassung

Wenn alle typografischen und Abstands-Werte in rem angegeben sind, reicht eine einzige Änderung am Root-Element, um die gesamte Seite zu skalieren:

html {
  font-size: 14px; /* Mobil: etwas kompakter */
}

@media (min-width: 1024px) {
  html {
    font-size: 16px; /* Desktop: Standard */
  }
}

Kein Schreiben von Hunderten individueller Media Queries für einzelne Elemente. Alles in rem skaliert mit.

Der 62,5%-Trick

In der Community verbreitet ist der Ansatz, html { font-size: 62.5%; } zu setzen, um die Basis auf 10px zu bringen. Dann ist 1,4rem = 14px und 2,4rem = 24px — die Rechnung wird zum "durch 10 teilen".

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem; /* = 16px */
}

Der Nachteil: Wenn Nutzer ihre Browser-Schriftgröße ändern, funktioniert die 62,5%-Logik nicht mehr exakt wie erwartet, da sie sich auf den Browser-Standard bezieht. Für Projekte mit starkem Fokus auf Barrierefreiheit ist es sicherer, beim Standard von 16px zu bleiben.

Fazit

px und rem schließen sich nicht aus — sie haben unterschiedliche Stärken. Für Schriftgrößen und Abstände, die mit dem Nutzer skalieren sollen: rem. Für feste visuelle Details wie Rahmen: px.

Wer dieses mentale Modell einmal verinnerlicht hat, trifft die Wahl automatisch beim Schreiben von CSS. Der PixelRemConverter übernimmt die Rechenarbeit, die Entscheidung trifft der Entwickler.