Pixel mit der richtigen Root-Schriftgröße in rem umrechnen

Um CSS-Pixel in rem umzurechnen, teilen Sie den Pixelwert durch die Schriftgröße des Root-Elements: Wert in rem = Wert in px ÷ Root-Schriftgröße in px. Bei einer Root-Schriftgröße von 16 px entsprechen 24 px genau 1,5 rem. Bei einer Root-Schriftgröße von 20 px entsprechen dieselben 24 px genau 1,2 rem.

Das Werkzeug PX in REM umwandeln führt diese Division aus. Das Feld für die Root-Schriftgröße ist mit 16 vorbelegt, liest aber Ihr Stylesheet nicht aus. Prüfen Sie deshalb die Basis, bevor Sie Schriftgrößen oder Abstände umrechnen.

Die Root-Schriftgröße Ihrer Seite ermitteln

Ein rem bezieht sich auf die Schriftgröße des Root-Elements, normalerweise html. 16 px sind üblich, aber nicht allgemeingültig: Die Styles der Website und die Browsereinstellungen können diesen Wert verändern. MDN erklärt diesen Bezug der Einheit rem.

1. Öffnen Sie die Seite Ihres Projekts im Browser. Untersuchen Sie das Element html mit den Entwicklerwerkzeugen.
2. Suchen Sie im Bereich für die berechneten Styles nach font-size und notieren Sie den Pixelwert. Nehmen Sie nicht den Wert von body oder der Überschrift, die Sie umrechnen möchten.
3. Alternativ führen Sie in der Konsole derselben Seite getComputedStyle(document.documentElement).fontSize aus. Die Antwort „20px“ bedeutet, dass Sie im Umrechner die Basis 20 verwenden.
4. Prüfen Sie den Wert erneut, wenn eine responsive Regel oder eine Einstellung die Root-Schriftgröße verändert. Die Messung beschreibt die Seite in ihrem aktuellen Zustand.

Diese Methode verwendet die tatsächlich angewendeten Styles, wie die Dokumentation zu getComputedStyle erläutert.

Umrechnen und den Wert anwenden

1. Geben Sie 24 in das Feld „CSS-Pixelwert“ ein, ohne px hinzuzufügen.
2. Geben Sie die ermittelte Basis ein, zum Beispiel 16. Die Basis muss größer als null sein; der umzurechnende Wert darf null, aber nicht negativ sein.
3. Starten Sie die Umrechnung mit „In rem umwandeln“. Das Werkzeug zeigt „24px ÷ 16px = 1.5rem“ an. Übernehmen Sie für eine CSS-Deklaration nur 1.5rem, zum Beispiel „font-size: 1.5rem;“.
4. Prüfen Sie die Darstellung auf Ihrer Seite. Beträgt die Root-Schriftgröße 20 px, verwenden Sie das Ergebnis 1.2rem, um 24 px zu erhalten. Mit 1.5rem würden sich dann 30 px ergeben.

Im Deutschen schreibt man in einer Erklärung 1,5; CSS-Code erfordert dagegen einen Dezimalpunkt: 1.5rem. Die Pixel dieser Umrechnung sind CSS-Pixel, nicht die physischen Pixel des Bildschirms. Wenden Sie keinen zusätzlichen Faktor für die Pixeldichte an. MDN erläutert diesen Unterschied.

Den Unterschied zwischen rem und em verstehen

Mit rem lässt sich eine gemeinsame Bezugsgröße für verschiedene Komponenten verwenden. em orientiert sich an der Schriftgröße des Elements; in einer font-size-Deklaration an der des Elternelements. Textgrößen in em können sich daher bei verschachtelten Elementen multiplizieren. Wählen Sie em, wenn die Abhängigkeit von der Komponente gewünscht ist, und rem, wenn Sie einen Bezug zum Root-Element benötigen. Das Modul CSS Values and Units definiert diese Einheiten.

Fehler bei Basis und Genauigkeit vermeiden

Ändern Sie die Root-Schriftgröße nicht nur, damit eine Rechnung aufgeht: Dadurch würden sich auch bereits vorhandene Abmessungen in rem ändern. Korrigieren Sie stattdessen die eingegebene Basis und rechnen Sie erneut.

Das Ergebnis wird auf höchstens sechs Nachkommastellen gerundet. So ergeben 17 px bei einer Root-Schriftgröße von 18 px den Wert 0.944444rem. Unnötige Nullen am Ende werden nicht beibehalten.

Ein sehr kleiner Wert kann in der Anzeige verschwinden: 0.000001 px ÷ 16 ergibt nach dem Runden 0rem. Das bedeutet nicht, dass der mathematische Quotient null ist. Prüfen Sie dies, bevor Sie einen sehr kleinen Wert in Ihrem CSS ersetzen. Nicht endliche Zahlen und Ergebnisse außerhalb des unterstützten Zahlenbereichs werden abgelehnt.

Auch die Textvergrößerung prüfen

Die Verwendung von rem garantiert keine Barrierefreiheit. Testen Sie den Zoom bis 200 % sowie die Textvergrößerung und die Schrifteinstellungen: Überschriften, Schaltflächen und Felder müssen lesbar und bedienbar bleiben. Achten Sie auf abgeschnittenen oder überlappenden Text in starren Containern. Eine Größe in px ist nicht automatisch unzugänglich: Der Seitenzoom vergrößert auch sie. Das WCAG-Erfolgskriterium 1.4.4 verlangt eine Größenänderung ohne Verlust von Inhalt oder Funktionalität, nicht die zwingende Verwendung einer bestimmten Einheit.

Häufige Fragen

Wie vielen rem entsprechen 16 px?

1rem bei einer Root-Schriftgröße von 16 px; 0.8rem bei einer Root-Schriftgröße von 20 px. Für die Antwort muss die Basis bekannt sein.

Muss ich alle px-Werte in rem umrechnen?

Nein. Wählen Sie die Einheit nach dem gewünschten Verhalten: der Root-Schriftgröße oder der Schriftgröße der Komponente folgen oder eine von der Schrift unabhängige CSS-Länge beibehalten.

Warum weicht mein Ergebnis vom Umrechner ab?

Prüfen Sie die berechnete Schriftgröße von html, die CSS-Regeln, die Ihre Deklaration überschreiben, und die Rundung. Der Umrechner berechnet ausschließlich anhand der beiden eingegebenen Werte.