PX zu REM zu EM Umrechner – Kostenloser CSS-Einheiten-Rechner

Konverter für PX-, REM- und EM-Einheiten

Ein Konverter von px in rem und em wandelt eine CSS-Länge zwischen Pixeln (px), Root-em (rem) und em um. Dabei verwendet er die vom Benutzer festgelegte Schriftgröße des Wurzelelements sowie die vom Benutzer festgelegte Schriftgröße des übergeordneten Elements. Diese drei Einheiten werden in CSS, der Sprache zur Gestaltung von Webseiten, am häufigsten zur Bestimmung von Textgrößen und Abständen verwendet.

Was sind px, rem und em?

Ein Pixel (px) ist eine feste Einheit. Ein Feld mit einer Breite von 200px bleibt 200px breit, unabhängig davon, welche Schriftgröße die Seite verwendet.

rem („root em“) ist eine Einheit, die sich nach der Schriftgröße des Wurzelelements der Seite richtet, normalerweise dem <html>-Tag. Browser setzen diese Standardschriftgröße in der Regel auf 16px, sofern eine Website sie nicht ändert. Beträgt die Schriftgröße des Wurzelelements 16px, entspricht 1rem dann 16px.

em ist eine Einheit, die sich nach der Schriftgröße des Elements richtet, auf das sie angewendet wird. Wenn em die font-size selbst festlegt, bezieht sie sich auf die vom übergeordneten Element geerbte Schriftgröße, also das Element, das sie enthält. Hat ein übergeordnetes Element font-size: 20px, entspricht font-size: 1em innerhalb dieses Elements 20px. Der Umrechner verwendet diesen Fall mit Bezug auf das übergeordnete Element.

Der Hauptunterschied zwischen rem und em liegt darin, worauf sich beide beziehen. rem bezieht sich immer auf das Wurzelelement. em bezieht sich auf die eigene oder geerbte Schriftgröße des Elements, sodass sich sein Wert auf jeder Verschachtelungsebene ändern kann.

So berechnet man px in rem

Um Pixel in rem umzurechnen, teilt man den Pixelwert durch die Stamm-Schriftgröße:

rem = px ÷ Stamm-Schriftgröße

Beispiel

Bei der standardmäßigen Stamm-Schriftgröße von 16px werden 24px zu:

24 ÷ 16 = 1,5rem

Wenn eine Website die Stamm-Schriftgröße auf 10px setzt, ein gängiger Trick durch die Einstellung html { font-size: 62.5%; }, da 62,5 % von 16px 10px entsprechen, werden dieselben 24px zu:

24 ÷ 10 = 2,4rem

So berechnet man rem in px

Für die umgekehrte Umrechnung multipliziert man den rem-Wert mit der Stamm-Schriftgröße:

px = rem × Stamm-Schriftgröße

Bei einer Stamm-Schriftgröße von 16px wird 1.5rem zurückgerechnet zu 1,5 × 16 = 24px.

So berechnet man px in em

Um Pixel in em umzurechnen, teilt man den Pixelwert durch die Schriftgröße des übergeordneten Elements:

em = px ÷ Schriftgröße des übergeordneten Elements

Beispiel

Beträgt die Schriftgröße des übergeordneten Elements 20px, werden 24px zu:

24 ÷ 20 = 1,2em

So berechnet man em in px

Man multipliziert den em-Wert mit der Schriftgröße des übergeordneten Elements:

px = em × Schriftgröße des übergeordneten Elements

Bei einem übergeordneten Element mit 20px wird 1.2em zurückgerechnet zu 1,2 × 20 = 24px.

So berechnet man rem in em und em in rem

Da sich rem und em auf unterschiedliche Schriftgrößen beziehen, benötigt die Umrechnung zwischen ihnen sowohl die Stamm-Schriftgröße als auch die Schriftgröße des übergeordneten Elements:

em = rem × (Stamm-Schriftgröße ÷ Schriftgröße des übergeordneten Elements)

rem = em × (Schriftgröße des übergeordneten Elements ÷ Stamm-Schriftgröße)

Beispiel

Bei einer Stamm-Schriftgröße von 16px und einer Schriftgröße des übergeordneten Elements von 20px wird 2rem zu:

2 × (16 ÷ 20) = 1,6em

Wenn die Stamm-Schriftgröße und die Schriftgröße des übergeordneten Elements gleich sind, entspricht 1rem immer 1em.

Wann die einzelnen Einheiten sinnvoll sind

Pixel eignen sich für Details, deren Größe sich nicht ändern soll, etwa einen 1px-Rahmen oder ein Symbol mit fester Breite.

Rem wird häufig für Abstände und Typografie verwendet, die auf einer Seite einheitlich bleiben sollen. Da sich rem immer auf die Stamm-Schriftgröße bezieht, ändert sich ein rem-Wert nicht, unabhängig davon, wie tief ein Element verschachtelt ist. Dadurch passen sich rem-basierte Layouts automatisch an, wenn jemand die Standardschriftgröße des Browsers erhöht, was Menschen mit eingeschränktem Sehvermögen unterstützt.

Em eignet sich gut innerhalb einer einzelnen, in sich geschlossenen Komponente, etwa einer Schaltfläche, bei der sich die Innenabstände zusammen mit der eigenen Schriftgröße skalieren sollen. Ein häufiges Problem bei em ist die Aufsummierung: Wenn mehrere verschachtelte Elemente jeweils font-size: 1.2em verwenden, multipliziert jede Ebene die vorherige, sodass die Schriftgrößen schneller als beabsichtigt wachsen.

Nach drei Ebenen ist der Text um etwa 73 % gewachsen, nicht um die 20 %, die ein Entwickler bei einer einzelnen Regel 1.2em erwarten könnte.

Den Umrechner verwenden

1. Geben Sie einen Wert in das Pixel-, rem- oder em-Feld ein.
2. Die beiden anderen Felder werden automatisch aktualisiert.
3. Stellen Sie die Schriftgröße des Wurzelelements so ein, dass sie dem <html>-Element des Projekts entspricht (in den meisten Browsern standardmäßig 16px).
4. Stellen Sie die Schriftgröße des übergeordneten Elements so ein, dass sie der Schriftgröße des Elements entspricht, in dem ein rem- oder em-Wert stehen würde.
5. Verwenden Sie die Kopierschaltfläche neben einem Feld, um dessen Wert zu kopieren.

Das Werkzeug zeigt die drei Werte außerdem nebeneinander an, damit sich ihre relativen Größen optisch vergleichen lassen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen rem und em? rem bezieht sich immer auf die Schriftgröße des Wurzelelements. em bezieht sich auf die Schriftgröße des Elements, auf das es angewendet wird; bei font-size selbst ist das die vom übergeordneten Element geerbte Größe. Ein rem-Wert bleibt auf einer Seite überall gleich; ein em-Wert kann sich ändern, je nachdem, wie tief das Element verschachtelt ist.

Warum verwenden Browser 16px als Standardschriftgröße? 16px ist die übliche Standardtextgröße in den gängigen Browsern, und Nutzer können sie in den Browsereinstellungen ändern. Die Richtlinien zur Barrierefreiheit im Web verlangen, dass sich Text bis auf 200 Prozent ohne Verlust von Inhalt oder Funktionalität vergrößern lässt. Wird Text in rem angegeben, folgt eine Seite der vom Leser gewählten Standardgröße.

Was hat es mit dem 62,5 %-Trick auf sich? Durch die Einstellung html { font-size: 62.5%; } wird die standardmäßige Schriftgröße des Wurzelelements von 16px auf 10px gesetzt, da 62,5 % von 16 gleich 10 ist. Dadurch wird die rem-Berechnung einfacher, weil 1,6rem 16px und 2,4rem 24px entsprechen.

Können px-, rem- und em-Werte negativ sein? Ja, bei Eigenschaften, die negative Längen zulassen, etwa Außenabstände (margin) oder CSS-Transformationen. Innenabstände (padding) können in CSS nicht negativ sein: Negative Werte für padding sind ungültig, daher ignorieren Browser sie.

Sollte jeder Pixelwert in rem umgerechnet werden? Nicht unbedingt. Rahmen und andere feine Details werden normalerweise in Pixeln angegeben, da sie nur selten mit der Schriftgröße skaliert werden müssen und bei Breiten unterhalb eines Pixels ungleichmäßig wirken können. Rem eignet sich für Abstände und typografische Angaben, die mit der vom Benutzer bevorzugten Schriftgröße skalieren sollen.

Beeinflusst die Wahl der Einheit die Seitenleistung? Nein. Browser wandeln jede CSS-Länge während des Layouts in denselben internen Wert um, daher werden px, rem und em gleich schnell dargestellt. Die Wahl zwischen ihnen beeinflusst die Wartbarkeit und die Barrierefreiheit, nicht die Geschwindigkeit.

Referenzen

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units Level 4, schriftbezogene Längen — em entspricht der berechneten Schriftgröße des Elements (bei Verwendung in font-size der geerbten Größe); rem entspricht der Einheit em am Wurzelelement.
2. Mozilla. font-size, MDN Web Docs. MDN: font-size — Ist an übergeordneten Elementen keine Schriftgröße gesetzt, entspricht 1em der Standardgröße des Browsers, meist 16px.
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.1, Erläuterung zu 1.4.4 — Text lässt sich bis auf 200 Prozent ohne Verlust von Inhalt oder Funktionalität vergrößern.
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model Level 4 — Negative Werte für padding-Eigenschaften sind ungültig.