PX vs REM vs EM: Der komplette Leitfaden zu CSS-Einheiten
Hier die kurze Antwort auf px vs rem vs em, noch vor jeder Erklärung. Nehmen Sie rem für nahezu alle Größenangaben (Schriftgrößen, Padding, Margins, Gaps, Border-Radius, Breakpoints), weil es mit der Schriftgrößeneinstellung im Browser des Lesers skaliert. Nehmen Sie px für die wenigen Dinge, die niemals skalieren sollen, etwa einen 1px-Rahmen oder einen präzisen Schattenversatz. Nehmen Sie em für den seltenen lokalen Fall, in dem ein Wert mit der eigenen Schriftgröße des Elements wachsen soll, zum Beispiel ein Button-Padding, das der Textgröße des Buttons folgt.
Diese Regel deckt 90 % der Entscheidungen ab. Die übrigen 10 % sind der Ort, an dem die Schwierigkeiten lauern: die em-Verschachtelungsmathematik, die jeden beim ersten Mal überrascht, der Media-Query-Bug, der Layouts beim Zoomen zerlegt, und die Fälle, in denen px tatsächlich die barrierefreiere Wahl ist. Dieser Leitfaden geht alle drei durch, mit lauffähigem CSS für jeden Fall, sowie einem Spickzettel pro Eigenschaft, den Sie beim Schreiben Ihrer Styles offen halten können.
Was px, rem und em tatsächlich bedeuten
Jede der drei Einheiten misst sich an einem anderen Bezugspunkt, und darin liegt der ganze Unterschied.
px ist eine absolute Einheit. Ein px ist ein CSS-Pixel und behält diese Größe, egal was es umgibt. border: 1px solid ist ein Pixel, Punkt. Der Haken: „absolut” bedeutet auch, dass es die Vorlieben des Nutzers ignoriert. Warum das wichtig ist, dazu später mehr.
rem bezieht sich auf die Schriftgröße des Wurzelelements. Die Wurzel ist <html>, und Browser setzen deren Schriftgröße standardmäßig auf 16px. Also entspricht 1rem bei einer Standardkonfiguration 16px, überall auf der Seite, unabhängig von der Verschachtelung. Diese Konstanz ist der Reiz: ein einziger Ankerwert, keine Überraschungen.
em bezieht sich auf die Schriftgröße des aktuellen Elements (oder seines Elternelements, bei Eigenschaften außer font-size). Da sich dieser Bezug beim Verschachteln von Elementen ändert, verschieben sich em-Werte je nach Kontext. Dieselben 1.5em können an einer Stelle 24px ergeben und an einer anderen 30px.
Der Anker, den Sie sich merken sollten, ist 16px = 1rem. Wenn Sie sich sonst nichts einprägen, prägen Sie sich das ein. Wenn Sie einen konkreten Wert umrechnen müssen, übernimmt der px-zu-rem-Konverter die Division gegen jede von Ihnen gewählte Basis.
px vs rem vs em auf einen Blick
| Einheit | Bezogen auf | Skaliert mit Nutzer-Schriftgröße? | Typische Verwendung | Verhalten bei Verschachtelung |
|---|---|---|---|---|
px | Nichts (absolut) | Nein | Rahmen, Schattenversätze, Haarlinien | Immer gleich groß |
rem | Schriftgröße der Wurzel <html> | Ja | Schriftgröße, Abstände, Breakpoints | Immer gleich groß |
em | Schriftgröße des aktuellen Elements | Ja | Lokale, an eine Komponente gebundene Werte | Kumuliert — kann driften |
Die beiden Spalten, die die meisten Diskussionen entscheiden, sind „Skaliert mit Nutzer-Schriftgröße” und „Verhalten bei Verschachtelung”. rem gewinnt bei beiden: Es respektiert die Vorliebe des Lesers und bleibt vorhersehbar. em teilt den ersten Vorteil, gibt aber den zweiten auf.
Wie jede Einheit berechnet wird
Die Mathematik ist schlichtes Rechnen. Was die Leute aus dem Tritt bringt, ist die Frage, durch welche Zahl man teilt oder mit welcher man multipliziert.
rem verwendet die Schriftgröße der Wurzel:
rem = px ÷ root-font-sizeBei der Standard-Wurzel von 16px gilt 24px ÷ 16 = 1.5rem. Um zurückzurechnen, multipliziert man: 1.5rem × 16 = 24px. Jedes rem auf der Seite verwendet dieselbe 16 (oder den Wert, den Sie für die Wurzel festlegen), und deshalb ist rem vorhersehbar.
em verwendet die eigene Schriftgröße des aktuellen Elements:
em = px ÷ current-element-font-sizeWenn die font-size eines Elements 20px beträgt, dann sind 1em auf diesem Element 20px, 0.5em sind 10px, und ein 1.5em-Padding ergibt 30px. Ändern Sie die Schriftgröße des Elements, und jeder daran gebundene em-Wert ändert sich mit. Diese lokale Kopplung ist der Sinn von em und zugleich seine Falle.
Die em-Verschachtelungsfalle
Wenn Sie Elemente verschachteln, die alle em für die Schriftgröße verwenden, multiplizieren sich die Werte den Baum hinunter. Jede Ebene erbt die berechnete Schriftgröße ihres Elternelements und legt ihren eigenen em-Faktor darauf.
.menu { font-size: 1.2em; } /* Elternelement ist 16px → 19.2px */
.menu .item { font-size: 1.2em; } /* Elternelement ist 19.2px → 23.04px */
.menu .item .sub { font-size: 1.2em; } /* Elternelement ist 23.04px → 27.648px */Jede Ebene ist „120 % ihres Elternelements”, was harmlos klingt. Aber weil das Elternelement bereits gewachsen ist, beträgt die dritte Ebene 1.2 × 1.2 × 1.2 = 1.728em relativ zu den ursprünglichen 16px, also etwa 27.6px statt der 19.2px, die Sie vielleicht aus der Regel isoliert abgelesen hätten. Verschachteln Sie eine Liste in einer Liste in einer Komponente, und der Text bläht sich auf eine Weise auf, die schwer nachzuvollziehen ist.
rem umgeht das vollständig. 1.2rem sind 19.2px, ob sie nun am Anfang des Dokuments oder zwölf Ebenen tief sitzen, weil sie sich immer an der Wurzel messen, niemals am Elternelement. Wenn ein Wert eine Größe ergibt, die Sie nicht erwartet haben, lautet die erste Frage, ob es sich um em (elternrelativ, kumuliert) oder rem (wurzelrelativ, stabil) handelt. Wenn Sie ein verirrtes rem debuggen und seine Pixelgröße schnell sehen wollen, löst der rem-zu-px-Konverter das sofort auf.
Wann Sie rem verwenden sollten
Greifen Sie standardmäßig zu rem. Es ist die richtige Einheit für Schriftgrößen, Padding, Margins, Gaps, Border-Radius und Media-Query-Breakpoints, also für alles, was skalieren soll, wenn ein Leser seine Textgröße anpasst.
Dieser letzte Punkt ist das Barrierefreiheitsargument, und es ist nicht hypothetisch. Die Screenreader- und Sehschwäche-Umfragen von WebAIM zeigen durchweg, dass ein großer Anteil der Nutzer die Standard-Schriftgröße im Browser oder Betriebssystem anpasst, viele davon deutlich über die üblichen 16px hinaus. Ein in rem dimensioniertes Layout ehrt diese Änderung: Erhöht man den Standardwert auf 20px, wächst jeder rem-basierte Wert proportional mit. Ein in px dimensioniertes Layout ignoriert sie vollständig, und der Text bleibt auf seiner fest verdrahteten Größe fixiert, egal wie sehr der Leser ihn größer braucht.
:root {
font-size: 16px; /* 1rem = 16px */
}
h1 { font-size: 2rem; } /* 32px, skaliert mit Nutzerpräferenz */
p { font-size: 1rem; } /* 16px */
.card { padding: 1.5rem; } /* 24px */
.card { border-radius: 0.5rem; } /* 8px */Weil hier jeder Wert an derselben Wurzel verankert ist, reskaliert eine einzige Änderung der Wurzel-Schriftgröße die gesamte Oberfläche proportional. Das hält auch ein Designsystem kohärent: Abstände und Typografie bewegen sich gemeinsam, statt auseinanderzudriften.
Der 62,5-%-Trick
Es gibt eine beliebte Abkürzung, um die rem-Arithmetik trivial zu machen. Setzen Sie die Wurzel-Schriftgröße auf 62.5%, was 62.5% × 16px = 10px ergibt:
html {
font-size: 62.5%; /* jetzt 1rem = 10px */
}
body {
font-size: 1.6rem; /* lesbare 16px Fließtextgröße wiederherstellen */
}
h1 { font-size: 2.4rem; } /* 24px */
p { font-size: 1.6rem; } /* 16px */Mit einer 10px-Wurzel reduziert sich das Kopfrechnen auf „teile den Pixelwert durch 10”: 24px → 2.4rem, 12px → 1.2rem. Der einzige Haken ist, dass Sie eine lesbare Fließtextgröße mit body { font-size: 1.6rem } wiederherstellen müssen, da eine rohe 10px-Basis den Standardtext viel zu klein lässt. 62.5% als Prozentwert statt 10px zu verwenden hält es relativ, sodass ein Leser, der seinen Browser-Standard skaliert, weiterhin proportionales Wachstum erhält. Wenn Sie diese Basis übernehmen, setzen Sie die Wurzel-Schriftgröße im Konverter auf 10, damit sie zu Ihrem Stylesheet passt.
Wann Sie em verwenden sollten
Verwenden Sie em, wenn ein Wert mit der eigenen Schriftgröße des Elements skalieren soll, nicht mit der Wurzel. Der klassische Fall ist ein Button:
.btn {
font-size: 1rem; /* gegen die Wurzel dimensioniert */
padding: 0.75em 1.5em; /* Padding folgt der Textgröße des Buttons */
}
.btn--large {
font-size: 1.25rem; /* eine Änderung skaliert alles neu */
}Weil das Padding in em angegeben ist, skaliert der .btn--large-Modifier den Text und sein Padding gemeinsam aus einer einzigen Deklaration, sodass der Button in jeder Größe proportional bleibt. Dieselbe Logik gilt für ein in em dimensioniertes Icon, damit es zur Textzeile passt, in der es sitzt, oder für Letter-Spacing, das mit der Schrift wachsen soll.
Die Strategie, die sich in der Praxis bewährt, ist rem für das globale Gerüst, em für lokale Proportionen. Setzen Sie die Schriftgröße in rem, damit sie der Wurzel und der Nutzerpräferenz folgt; setzen Sie die wenigen Werte, die diesem Element folgen sollen, in em. Halten Sie em nur von allem fern, was tief verschachtelt, sonst schleicht sich die Verschachtelungsfalle von vorhin wieder ein.
Wann Sie px verwenden sollten
Manche Werte sollten tatsächlich nicht skalieren, und px ist für sie richtig: eine 1px-Haarlinie als Rahmen, ein präziser box-shadow-Versatz, ein 2px-Fokusring. Das sind Renderdetails, kein Inhalt. Ein Rahmen, der auf 1.25px „skaliert”, wenn der Nutzer seinen Text vergrößert, gewinnt nichts dadurch und kann als unscharfe Linie erscheinen. px hält ihn scharf.
.divider { border-bottom: 1px solid; } /* sollte 1px bleiben */
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* fester Versatz */
.input:focus { outline: 2px solid; } /* gestochen scharfer Fokusring */Die überraschende Feinheit: wann px barrierefreier ist
Die meisten „immer rem verwenden”-Ratschläge lassen einen kontraintuitiven Punkt aus. Die barrierefreie Wahl ist nicht „rem überall”. Sie ist „skaliere, was skalieren soll, fixiere, was nicht skalieren soll”.
Ein 1px-Rahmen ist ein festes Detail. Es in rem zu zwingen, damit es wächst, wenn der Nutzer den Text vergrößert, hilft der Lesbarkeit nicht, sondern macht eine Haarlinie nur unscharf. Für diese Eigenschaften ist px die barrierefreiere Wahl, gerade weil es an Ort und Stelle bleibt.
Der Fehler, den die Leute tatsächlich machen, ist der umgekehrte: px für die Dinge zu verwenden, die reagieren sollten, wie Schriftgrößen und Breakpoints. Genau dort schadet px der Barrierefreiheit. Die Regel dreht sich also nicht um die Einheit, sondern um die Eigenschaft. Fragen Sie, ob der Wert Inhalt ist, mit dem der Leser interagiert (dann skalieren Sie ihn mit rem), oder ein festes Renderdetail (dann fixieren Sie ihn mit px). Die Einheit ergibt sich aus der Antwort.
Die Media-Query-Falle
Vor dieser Falle warnt fast kein Leitfaden, dabei zerlegt sie echte Layouts. Media-Query-Breakpoints, die in px geschrieben sind, reagieren nicht so auf den Schriftgrößen-Zoom des Browsers, wie Sie es sich erhoffen würden.
Stellen Sie sich einen Breakpoint bei width: 600px vor, an dem eine Seitenleiste zusammenklappt. Ein Nutzer mit eingeschränktem Sehvermögen setzt seinen Browser-Standard auf 24px, um bequem zu lesen. Ihr Inhalt braucht nun mehr horizontalen Platz, denn der größere Text will früher umbrechen. Aber ein px-Breakpoint weiß nicht, dass der Text gewachsen ist; er schaltet immer noch bei genau 600px Viewport um, sodass das Layout im falschen Moment wechselt und Inhalt eingequetscht wird oder überlappt.
Vergleichen Sie die beiden Ansätze:
/* px-Breakpoint — ignoriert die Schriftgrößen-Präferenz des Nutzers */
@media (min-width: 600px) {
.sidebar { display: block; }
}
/* em/rem-Breakpoint — reagiert auf die Schriftgröße des Nutzers */
@media (min-width: 37.5em) {
.sidebar { display: block; }
}37.5em sind 600px bei den standardmäßigen 16px (600 ÷ 16 = 37.5). Der Unterschied ist verhaltensbezogen: Wenn der Nutzer seine Standard-Schriftgröße verdoppelt, verdoppelt sich der em-Breakpoint effektiv mit, sodass das Layout bei einer Viewport-Breite umschaltet, die proportional zum Text ist, also genau dann, wenn der Inhalt es braucht. Der px-Breakpoint bleibt eingefroren.
Eine Eigenheit, die man kennen sollte: In Media-Query-Bedingungen beziehen sich sowohl em als auch rem auf die Standard-Schriftgröße des Browsers, nicht auf eine html-Überschreibung, sodass sie sich dort identisch verhalten. Beide Einheiten beheben den Bug; px verursacht ihn.
Die Entscheidungstabelle pro Eigenschaft
Wenn Sie unsicher sind, beantwortet diese Tabelle es. Sie ist der schnellste Weg, die Entscheidung zu treffen, ohne die Logik jedes Mal neu herzuleiten.
| Eigenschaft | Empfohlene Einheit | Warum |
|---|---|---|
font-size | rem | Skaliert mit der Schriftgrößen-Präferenz des Nutzers |
padding / margin | rem | Abstände skalieren gemeinsam mit dem Text |
border | px | Haarlinien sollten gestochen scharf und fest bleiben |
box-shadow-Versatz | px | Ein präzises Renderdetail, kein Inhalt |
border-radius | rem | Hält die Eckenrundung proportional zur Skalierung |
| Media Query | em / rem | Breakpoints müssen auf den Schriftgrößen-Zoom reagieren |
width / max-width | rem (oft ch für Text) | Skalierbare Layoutbreiten; ch begrenzt die Zeilenlänge |
line-height | einheitenlos | Ein einheitenloser Multiplikator wird korrekt vererbt |
Die line-height-Zeile verdient eine Anmerkung, weil sie ein häufiger Bug ist. Schreiben Sie immer line-height: 1.5, ohne Einheit. Ein einheitenloser Wert ist ein Multiplikator, den jedes Element gegen seine eigene Schriftgröße berechnet, sodass verschachtelte Elemente lesbar bleiben. Schreiben Sie stattdessen line-height: 1.5em oder 24px, dann wird die berechnete Länge vererbt, was bedeutet, dass ein Kind mit größerer Schriftgröße die Zeilenhöhe des Elternelements behält und sein Text zu kollidieren beginnt. Einheitenlos vermeidet das ganze Problem.
Umrechnung zwischen px und rem
Die Arithmetik ist klein genug, um sie im Kopf zu machen, sobald Sie den Anker festhalten: 16px = 1rem. Durch 16 teilen, um zu rem zu kommen, mit 16 multiplizieren, um zurück zu px zu kommen.
| px | rem (16px-Basis) |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
Wenn Sie den 62,5-%-Trick verwenden, wird die Basis zu 10px und die Mathematik ist noch einfacher: einfach durch 10 teilen oder mit 10 multiplizieren, also 24px = 2.4rem. Die einzige Regel ist, immer gegen die Basis umzurechnen, die Ihr Stylesheet tatsächlich festlegt.
Für alles andere, etwa krumme Werte, eine eigene Wurzel oder das Stapelumrechnen eines Figma-Exports, überspringen Sie das Kopfrechnen und nutzen Sie den px-zu-rem-Konverter oder den rem-zu-px-Konverter. Bei beiden können Sie jede Wurzel-Schriftgröße festlegen und in beide Richtungen in Echtzeit umrechnen. Und wenn Sie danach ein Stylesheet voller gemischter Einheiten aufräumen, normalisiert der CSS-Formatierer die Abstände und Einrückung für Sie.
Häufige Fehler
Einige Muster verursachen die meisten einheitenbezogenen Probleme:
Die Wurzel-Schriftgröße in px setzen. html { font-size: 16px } zu schreiben (statt den Standard zu belassen oder 100% / einen Prozentwert zu verwenden) überschreibt die Schriftgrößen-Präferenz des Nutzers im Browser komplett. rem-Werte berechnen sich weiterhin dagegen, aber der Leser kann die gesamte Seite nicht mehr skalieren. Belassen Sie die Wurzel beim Standard oder verwenden Sie einen Prozentwert.
px und rem ohne System mischen. Manche Schriftgrößen in px, manche in rem, Abstände zwischen beiden aufgeteilt: Das Ergebnis ist ein Layout, das ungleichmäßig skaliert, wenn ein Nutzer seinen Text anpasst. Wählen Sie rem als Standard und reservieren Sie px für die bewussten Ausnahmen aus der Entscheidungstabelle.
em für globale Abstände verwenden. em auf weit verschachtelten Containern führt die Verschachtelungsfalle wieder ein, sodass ein padding tief im Baum etwas ergibt, das niemand beabsichtigt hat. Halten Sie globale Abstände in rem; heben Sie sich em für lokale, komponentengebundene Werte auf.
line-height eine Einheit geben. Wie oben behandelt, wird line-height: 24px oder 1.5em als berechnete Länge vererbt und bricht bei Elementen mit unterschiedlichen Schriftgrößen. Verwenden Sie immer einen einheitenlosen Multiplikator.
FAQ
Ist rem besser als px?
Für die meisten Größenangaben ja: rem ist besser als px, weil es mit der Schriftgrößen-Präferenz im Browser des Nutzers skaliert, die px ignoriert. Aber „besser” hängt von der Eigenschaft ab. px ist die richtige Wahl für feste Details wie 1px-Rahmen und Schattenversätze, die scharf bleiben sollen. Verwenden Sie rem für die Inhaltsgrößen, px für die Renderdetails.
Was ist 1rem in Pixeln?
1rem entspricht der Wurzel-Schriftgröße in Pixeln, die in praktisch allen Browsern standardmäßig 16px beträgt. Also 1rem = 16px, 1.5rem = 24px und 2rem = 32px bei einer Standardkonfiguration. Wenn ein Stylesheet html { font-size } überschreibt, etwa auf 10px über den 62,5-%-Trick, dann entspricht 1rem stattdessen diesem Wert.
Sollte ich rem oder em für font-size verwenden?
Verwenden Sie rem für font-size in nahezu jedem Fall. rem misst sich an der Wurzel, sodass es vorhersehbar bleibt, egal wie tief ein Element verschachtelt ist. em misst sich an der Schriftgröße des Elternelements, was sich den Baum hinunter kumuliert und verschachtelten Text unerwartet aufblähen lässt. Reservieren Sie em für lokale, an eine einzelne Komponente gebundene Werte.
Wann sollte ich px statt rem verwenden?
Verwenden Sie px für Werte, die nicht mit der Schriftgröße des Nutzers skalieren sollen: 1px-Rahmen, präzise box-shadow-Versätze, Fokusring-Outlines und andere feste Renderdetails. Das sind gestochen scharfe Designdetails statt Inhalt, daher ist das Fixieren in px die barrierefreiere Wahl. Alles Inhaltsbezogene sollte weiterhin rem verwenden.
Warum brechen Media Queries, wenn ich px verwende?
Media-Query-Breakpoints in px reagieren nicht auf den Schriftgrößen-Zoom des Browsers. Wenn ein Nutzer seine Standard-Schrift vergrößert, braucht sein Inhalt mehr Platz, aber ein px-Breakpoint schaltet weiterhin bei derselben Viewport-Breite um, sodass das Layout im falschen Moment wechselt. Verwenden Sie em- oder rem-Breakpoints, die mit der Schriftgröße des Nutzers skalieren.
Was ist der 62,5-%-Schriftgrößen-Trick?
Der 62,5-%-Trick setzt html { font-size: 62.5% }, was die Wurzel-Schriftgröße auf 10px bringt (62,5 % von 16). Mit einer 10px-Basis wird die rem-Mathematik zu „durch 10 teilen”: 24px = 2.4rem, 12px = 1.2rem. Entwickler setzen dann body { font-size: 1.6rem }, um lesbaren 16px-Fließtext wiederherzustellen.
Ist es in Ordnung, px, rem und em zu mischen?
Ja, das Mischen von px, rem und em ist korrekt, wenn jede der Eigenschaft folgt, zu der sie passt: rem für Typografie und Abstände, px für feste Details, em für lokale, komponentengebundene Werte. Was Probleme verursacht, ist das Mischen ohne System, etwa manche Schriftgrößen in px und manche in rem. Wählen Sie rem als Standard und behandeln Sie px und em als bewusste Ausnahmen.
Welche Einheit sollte ich für Padding und Margin verwenden?
Verwenden Sie rem für Padding und Margin, damit Abstände gemeinsam mit dem Text skalieren, wenn der Nutzer seine Schriftgröße anpasst. Das hält ein Layout proportional und barrierefrei. Reservieren Sie em für Padding, das der eigenen Schriftgröße eines Elements folgen soll, etwa ein Button, dessen Padding mit seinem Text wächst, und vermeiden Sie em auf tief verschachtelten Containern, wo es kumuliert.