PX ↔ REM ↔ EM ↔ PT Umrechner
Rechnen Sie CSS-Einheiten in beide Richtungen um — mit einstellbarer Basisgröße wechseln px, rem, em und pt gemeinsam.
817 Aufrufe
So funktioniert es
rem = px ÷ Basisgröße (standardmäßig 16px, also 24px = 1.5rem); em funktioniert nach demselben Prinzip, bezieht sich aber auf die geerbte Schriftgröße des Elements selbst — das Feld „Kontextgröße" im Rechner; pt ist die Druckeinheit, wobei 1pt = 1,333px (96dpi ÷ 72). Tippen Sie in ein beliebiges Feld, die übrigen folgen automatisch.
Konkretes Beispiel: Auf einer 16px-Basis wird eine 1.25rem-Überschrift bei 20px dargestellt. Verschachteln Sie ein 0.875em-Label in einer Komponente, deren eigene Schriftgröße 1.125rem (18px) beträgt, so ergibt sich 15,75px — weil em sich gegen das unmittelbare Elternelement bezieht, nicht gegen die Wurzel.
Was Sie wissen sollten
- rem bezieht sich auf das Wurzelelement, nicht auf einen festen Browser-Standard. Die Annahme von 16px gilt nur, solange niemand sie geändert hat. Erhöht ein Nutzer die Standard-Schriftgröße seines Browsers in den Bedienungshilfen — bei Menschen mit Sehschwäche eine gängige Einstellung —, skaliert jeder rem-basierte Wert proportional mit. Pixelwerte tun das nicht: Ein 16px-Absatz bleibt 16px, egal welche Browsereinstellung der Nutzer gewählt hat.
- Genau deshalb empfehlen Barrierefreiheits-Richtlinien rem für Schriftgröße und Abstände. Ein in rem aufgebautes Layout respektiert die vom Nutzer gewählte Textgröße durchgängig — Überschriften, Fließtext und die Abstände dazwischen wachsen gemeinsam, sodass das Design proportional bleibt, statt bei größerem Text auseinanderzubrechen.
- em bezieht sich auf die eigene Verschachtelung, wodurch sich Werte aufsummieren. Ein 1.5em-Wert innerhalb eines bereits 1.5em großen Elements ergibt das 2,25-Fache der Wurzel — nützlich für Komponenten, die mit ihrem eigenen Schriftgrößen-Kontext skalieren sollen (etwa Button-Innenabstände), riskant für alles, was mehrere Ebenen tief verschachtelt ist.
- Der alte „62,5-%-Trick" — die Wurzel auf 10px setzen, damit 1rem = 10px für einfaches Kopfrechnen — funktioniert weiterhin, sollte in neuen Projekten aber vermieden werden: Die meisten Komponentenbibliotheken gehen von einer 16px-Wurzel aus, und sie zu überschreiben kann in Drittanbieter-Code zu unerwarteten Größen führen.
- pt ist gegenüber px definiert, nicht umgekehrt. CSS legt das Verhältnis auf 1in = 96px = 72pt fest, also ist 1pt = 96/72 = genau 1,333px. Das spielt vor allem beim Export eines Designs für Druck oder PDF eine Rolle, wo pt die native Einheit ist — die Umrechnung hält Bildschirm- und Druckgrößen konsistent.
Häufig gestellte Fragen
Warum unterscheidet sich mein em-Wert vom rem-Wert?
em multipliziert mit der nächstgelegenen gesetzten Schriftgröße und verschachtelt sich dabei: ein 1.5em innerhalb eines 1.5em-Elements entspricht dem 2,25-Fachen der Basisgröße. rem bezieht sich immer auf die Basis — diese Vorhersagbarkeit hat sich durchgesetzt.
Ist 1pt wirklich 1,333px?
In CSS ja, per Definition: 1in = 96px = 72pt. Druck-PDFs und CSS stimmen bei diesem Verhältnis überein, die physische Größe hängt jedoch von der tatsächlichen Bildschirm-DPI ab.
Warum empfehlen Barrierefreiheits-Richtlinien rem statt px für Text?
Weil rem mit der Schriftgrößen-Präferenz des Nutzers skaliert und px nicht. Wer die Standard-Textgröße seines Browsers erhöht — eine gängige Anpassung bei Sehschwäche — sieht jede rem-basierte Schriftgröße und jeden Abstand proportional mitwachsen, während pixelbasierter Text bei seiner ursprünglichen Größe verharrt. Genau das ist der Fehlerfall, den Barrierefreiheits-Audits bemängeln.
Was passiert mit rem-Werten, wenn ein Nutzer die Standard-Schriftgröße seines Browsers ändert?
Sie skalieren automatisch. Bleibt die Wurzel-Schriftgröße auf dem Browser-Standard und stellt ein Nutzer diesen etwa auf 20px statt 16px, entspricht jedes 1rem in Ihrem CSS jetzt 20px statt 16px — ganz ohne Codeänderung. Das funktioniert nur, wenn die Wurzel-Schriftgröße selbst nicht fest in px gesetzt, sondern unverändert oder relativ definiert ist.
Sollte ich überhaupt px verwenden?
Ja, für Dinge, die wirklich niemals mit dem Text skalieren dürfen: Haarlinien-Rahmen, Icons mit fester Größe oder 1px-Schatten. Die praktische Faustregel der meisten Teams lautet: rem für Schriftgröße und Layout-Abstände, em für komponentenbezogene Innenabstände, und px nur für Details, die unabhängig von der Textgrößen-Einstellung des Nutzers visuell konstant bleiben sollen.
Ähnliche Tools
Problem melden
PX ↔ REM ↔ EM ↔ PT Umrechner
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!