PX-in-REM-Umrechner

So nutzen Sie den PX-in-REM-Umrechner

1. Legen Sie die Root-Schriftgröße (px) fest. Sie beträgt in allen gängigen Browsern 16, sofern Ihr Stylesheet sie nicht ändert. Die Buttons unter dem Feld schalten auf 16 px, 10 px (der Trick html { font-size: 62.5%; }) oder 18 px um.
2. Arbeiten Sie mit em, stellen Sie die Schriftgröße des Elternelements für em (px) ein: die berechnete Schriftgröße des Elements, das Ihr gestaltetes Element enthält.
3. Tippen Sie unter Einen Wert umrechnen in Pixel (px), REM oder EM. Die beiden anderen Felder aktualisieren sich während der Eingabe, und die Zeile darunter zeigt die verwendete Division.
4. Die Umrechnungstabelle listet gängige Größen auf. Ersetzen Sie die Pixelwerte durch Ihre eigenen Design-Tokens (Abstandsskala, Schriftgrößenskala …) und fügen Sie das Ergebnis mit Tabelle kopieren in eine Tabellenkalkulation oder ein Designdokument ein.
5. Um bestehenden Code zu migrieren, fügen Sie ihn in Umzurechnendes CSS ein, wählen Sie die Optionen und klicken Sie auf px in rem umrechnen. Beispiel laden zeigt ein kleines Stylesheet. Übernehmen Sie das Umgerechnetes CSS mit Kopieren.

Die Formeln

• rem = px ÷ Root-Schriftgröße. Mit den standardmäßigen 16 px gilt: 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ Schriftgröße des Elternelements. In einer Überschrift mit 20 px sind 10px = 0,5em.
• px = rem × Root-Schriftgröße bzw. px = em × Schriftgröße des Elternelements.

Hinweis: Im CSS-Code selbst steht immer ein Dezimalpunkt, also 1.5rem, nicht „1,5rem“.

rem oder em: Was sollten Sie verwenden?

rem („root em“) bezieht sich immer auf die Schriftgröße des html-Elements. 1.5rem bedeutet also überall auf der Seite dasselbe. Das ist die sicherste Wahl für Schriftgrößen, Abstände, maximale Breiten und Layout-Lücken.

em bezieht sich auf die Schriftgröße des Elements selbst (bei font-size auf die des Elternelements). Die Werte multiplizieren sich: Eine dreifach verschachtelte Liste mit 0,9em landet bei 0,9 × 0,9 × 0,9 = 73 % der Basisgröße. Damit eignet sich em gut für Dinge, die mit ihrem eigenen Text skalieren sollen (das Padding eines Buttons, ein Icon neben einer Beschriftung), ist aber riskant für die globale Typografie.

Warum rem für die Barrierefreiheit wichtig ist

Viele Menschen erhöhen in den Browsereinstellungen die Standardschriftgröße (zum Beispiel von 16 auf 20 oder 24 px), statt jede Seite zu zoomen. Größen in px ignorieren diese Einstellung, Größen in rem oder em folgen ihr. Verwenden Sie rem für Text und Abstände, wächst das gesamte Layout mit der Wahl der Leserinnen und Leser mit. Das unterstützt das WCAG-2.2-Erfolgskriterium 1.4.4 (Text bis 200 % vergrößern).

Aus demselben Grund sollten Sie html { font-size: 16px; } nicht in px festlegen: Verwenden Sie einen Prozentwert (100% oder 62.5%, wenn 1rem = 10px sein soll), damit die Einstellung der Nutzer weiterhin greift.

Was der CSS-Umrechner ändert

Er ersetzt Zahlen mit px in Deklarationen durch den Wert geteilt durch die Root-Schriftgröße. Kommentare, Zeichenketten und url()-Werte bleiben unberührt.

• Rahmen- und Outline-Breiten in px belassen: border, border-*-width, outline, outline-offset und column-rule bleiben in px, damit dünne Linien scharf bleiben. border-radius wird trotzdem umgerechnet.
• 1px-Werte beibehalten: Jeder Wert zwischen −1px und 1px bleibt unverändert.
• Media Queries in em umrechnen (Basis 16px): In @media-Bedingungen beziehen sich rem und em immer auf die ursprüngliche Schriftgröße des Browsers, nie auf Ihre html-Regel. Deshalb teilt das Tool dort unabhängig von Ihrer Root-Größe durch 16 und schreibt em. Ist die Option deaktiviert, behalten Media Queries ihre px-Werte.