CSS-Einheiten-Umrechner
Rechnen Sie eine CSS-Länge zwischen px, rem, em, vw, vh, pt und Prozent um. Geben Sie den Wert ein, wählen Sie die Einheit, legen Sie die Schriftgrößen des Root- und Elternelements sowie die Viewportmaße fest – und Sie erhalten alle Entsprechungen auf einen Blick.
Zwischen px, rem, em, vw und vh umrechnen
Formel für CSS-Einheiten
Dabei ist:
- \(v\) — die eingegebene Länge in ihrer ursprünglichen Einheit
- \(f(\text{Einheit})\) — der Pixelwert einer Einheit dieses Typs:
- \(px\): 1 \(rem\): Root-Schriftgröße \(em\): Schriftgröße des Elternelements \(vw\): Viewportbreite \(/ 100\) \(vh\): Viewporthöhe \(/ 100\) \(pt\): \(96/72 = 1{,}3333\) \(%\): Schriftgröße des Elternelements \(/ 100\)
Der Rechner wandelt den eingegebenen Wert zunächst in Pixel um und teilt ihn anschließend durch den Pixelfaktor jeder Zieleinheit. Dank dieses zweistufigen Vorgehens stimmen alle sieben Ergebnisse garantiert untereinander überein.
CSS-Einheiten – Rechenbeispiel
Beispiel: Umrechnung von 24px in rem, em, vw, vh und pt bei einer Root- und Eltern-Schriftgröße von 16px und einem Viewport von 1920×1080 (die Standardeinstellungen des Rechners).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Ergebnis: 24px = 1,5rem = 1,5em = 1,25vw = 2,2222vh = 18pt.
So benutzen Sie den CSS-Einheiten-Umrechner
- Geben Sie die Länge in das Feld Wert ein, zum Beispiel 24. Negative Werte sind ebenfalls möglich – praktisch für negative Abstände.
- Wählen Sie im Dropdown CSS-Einheit die Einheit dieses Wertes (px, rem, em, vw, vh, pt oder %).
- Legen Sie die Root-Schriftgröße fest – die Schriftgröße des
<html>-Elements. Browser verwenden standardmäßig 16px. - Legen Sie die Eltern-Schriftgröße fest – die berechnete Schriftgröße des Elternelements, die für die Umrechnung von em und % benötigt wird.
- Geben Sie Viewportbreite und Viewporthöhe des Browserfensters in Pixeln ein; davon hängen die Ergebnisse für vw und vh ab.
- Lesen Sie alle Entsprechungen auf einen Blick unter Umgerechnete Werte ab – zusammen mit der Umrechnungsgrundlage, die zeigt, wie viel Pixel jede Einheit in Ihrer Konfiguration beträgt.
Was sind CSS-Einheiten und warum sind sie wichtig?
CSS-Längen gehören zu zwei Familien. Absolute Einheiten wie px und pt haben eine feste Größe: Die CSS-Spezifikation definiert das Referenzpixel so, dass 1in = 96px = 72pt gilt. Relative Einheiten hängen vom Kontext ab: rem bezieht sich auf die Schriftgröße des Root-Elements, em auf die Schriftgröße des Elternelements, vw und vh auf 1% der Viewportbreite bzw. -höhe, und % (bei font-size) auf die Schriftgröße des Elternelements.
Die Wahl der Einheit bestimmt, wie sich ein Layout verhält. Werte in px bleiben unabhängig von Benutzereinstellungen konstant – das macht sie berechenbar für Rahmen und feine Details, aber starr für Typografie. Werte in rem skalieren mit der Root-Schriftgröße: Vergrößert ein Nutzer die Basisschrift im Browser, wächst alles, was in rem angegeben ist, proportional mit – eine zentrale Voraussetzung für Barrierefreiheit. Werte in em addieren sich in verschachtelten Elementen auf, was in tiefen Markup-Strukturen zu überraschenden Ergebnissen führen kann.
Viewport-Einheiten sorgen dafür, dass Typografie und Abstände auf die Fenstergröße reagieren. Eine Breite von 50vw füllt stets die halbe Bildschirmbreite aus – deshalb kombinieren Hero-Bereiche und fluide Typografie vw oft mit rem mithilfe von clamp(). Da sich vw und vh mit jeder Größenänderung des Fensters ändern, ist ihre Umrechnung in px nur für eine konkrete Viewportgröße aussagekräftig – genau die, die Sie im Rechner eingeben.
Die Ergebnisse sind leicht zu deuten: Jeder Wert ist dieselbe physische Länge, nur in einer anderen Einheit ausgedrückt. Wer ein Design-System von px auf rem umstellt, findet in der Spalte rem den Token-Wert, den er notieren muss; wer mit Design-Tools arbeitet, die Punkte verwenden, oder Druckerzeugnisse vergleicht, erhält in der Spalte pt die direkte Entsprechung.
Annahmen, Grenzen und praktische Hinweise
- Der Umrechner geht vom Standard-Referenzpixel der CSS-Spezifikation aus:
1in = 96px = 72pt. Bei der physischen (Druck-)Ausgabe können je nach Gerät geringe Abweichungen entstehen. - Prozent wird als relativ zur Schriftgröße des Elternelements behandelt – das ist für
font-sizekorrekt. Beiwidth,height,marginundpaddingbezieht sich Prozent dagegen auf die Maße des Elternelements; in diesen Fällen ist ein anderer Referenzwert nötig. - em ist relativ zur Schriftgröße des Elternelements. Innerhalb von Eigenschaften wie
line-heightoderpaddingauf dem Element selbst bezieht sich em dagegen auf die eigene Schriftgröße dieses Elements – passen Sie das Feld „Eltern-Schriftgröße“ entsprechend an. - Die Ergebnisse für vw und vh gelten nur für die von Ihnen eingegebenen Viewportmaße. Probieren Sie mehrere Größen aus (z. B. 1920×1080, 1366×768, 390×844), um zu sehen, wie sich die umgerechneten Werte verschieben.
- Browser wenden in manchen Konfigurationen eine minimale Schriftgröße an, wodurch sehr kleiner Text in rem oder em größer dargestellt werden kann, als die Rechnung ergibt.
- Eine praktische Faustregel: Bei der Standard-Root-Schriftgröße von 16px gilt 1rem = 16px, also px ÷ 16 = rem. Setzen Sie den Root auf 10px, entsprechen die rem-Werte exakt px ÷ 10 – deshalb arbeiten viele Design-Systeme mit einem 10px-Root.
Wenn Sie außerdem zwischen Mess- oder Technik-Einheiten umrechnen möchten, probieren Sie unseren Leistungs-Umrechner, den Datenübertragungsrate-Umrechner oder den allgemeinen Geschwindigkeits-Umrechner aus.
Häufig gestellte Fragen
Wie rechne ich px ohne Rechner von Hand in rem um?
Teilen Sie den Pixelwert durch die Root-Schriftgröße. Beim Browser-Standard von 16px lautet die Formel \( rem = px \div 16 \). Also: 24px = 1,5rem, 32px = 2rem und 12px = 0,75rem. In die andere Richtung wird multipliziert: \( px = rem \times 16 \). Legt das Projekt eine andere Root-Größe fest, etwa 10px beim verbreiteten 62,5%-Trick, ersetzen Sie einfach 16 durch diesen Wert.
Was ist der Unterschied zwischen em und rem, und wann verwendet man welche Einheit?
rem bezieht sich immer auf die Schriftgröße des Root-Elements – 1,5rem bedeutet daher im gesamten Dokument überall dasselbe. em bezieht sich auf die Schriftgröße des Elternelements (bzw. des Elements selbst bei Eigenschaften wie padding und line-height) und addiert sich daher in verschachteltem Markup auf. Eine gängige Empfehlung: Verwenden Sie rem für Schriftgrößen und Abstände, damit die Werte berechenbar bleiben und Benutzereinstellungen respektiert werden; setzen Sie em dort ein, wo etwas mit dem lokalen Text mitwachsen soll, etwa beim Padding von Schaltflächen.
Wie viele Pixel sind 1pt, und wie hängen pt und px mit Zoll zusammen?
CSS definiert das Referenzpixel so, dass \( 1\text{in} = 96\text{px} = 72\text{pt} \) gilt. Demnach entspricht 1pt genau \( 96/72 \approx 1{,}3333 \)px und 1px genau 0,75pt. Deshalb zeigen Textverarbeitungs- und Druckdesign-Programme, die mit Punkten arbeiten, andere Zahlen als CSS: Eine 12pt-Schrift wird auf dem Bildschirm als 16px dargestellt. Der Umrechner verwendet exakt dieses Verhältnis für seine pt-Ergebnisse.
Warum weichen meine em-Werte von dem ab, was der Browser anzeigt?
Dafür gibt es zwei häufige Ursachen. Erstens em addiert sich auf: Hat ein Elternelement font-size 1,25em bezogen auf einen 16px-Root (also 20px) und das Kind 1,5em, ist das Kind 30px groß, nicht 24px. Zweitens bezieht sich em bei Eigenschaften wie padding, margin und line-height auf einem Element auf die eigene Schriftgröße dieses Elements, nicht auf die des Elternelements. Geben Sie in solchen Fällen im Umrechner die berechnete Schriftgröße des Elements selbst als Eltern-Schriftgröße ein.
Sind vw- und vh-Werte auf jedem Bildschirm gleich?
Nein. 1vw entspricht 1% der aktuellen Viewportbreite – derselbe vw-Wert ergibt also bei unterschiedlichen Fenstergrößen unterschiedliche Pixelbeträge. So sind 10vw auf einem 1920px breiten Bildschirm 192px, auf einem 390px-Smartphone dagegen nur 39px. Rechnen Sie vw/vh nur für eine konkrete Viewportgröße in px um – geben Sie die tatsächlich anvisierten Maße in den Rechner ein und führen Sie ihn für weitere Breakpoints erneut aus.
Wie finde ich heraus, welche Root-Schriftgröße eine Website tatsächlich verwendet?
Öffnen Sie die Entwicklertools des Browsers, untersuchen Sie das <html>-Element und sehen Sie sich dessen berechnete font-size im Bereich „Styles“ oder „Computed“ an. Überschreibt keine CSS-Regel den Wert, gilt der Browser-Standard von 16px. Beachten Sie, dass manche Websites den 62,5%-Trick nutzen und den Root auf 10px setzen, sodass 1rem = 10px gilt. Prüfen Sie außerdem, ob eine Browser-Erweiterung oder eine Einstellung zur Mindestschriftgröße den effektiven Wert verändert.
Ist px oder rem besser für die Barrierefreiheit?
Für Schriftgrößen wird in der Regel rem empfohlen, weil es mitwächst, wenn Nutzer die Basisschriftgröße im Browser erhöhen – Text in px bleibt dagegen fix und ignoriert diese Einstellung. Das ist für sehbehinderte Nutzer wichtig und wird von Richtlinien wie den WCAG gefordert. Für Rahmen, Schatten und Haarlinien, die nicht skalieren sollen, ist px weiterhin die richtige Wahl. Ein praktisches Vorgehen: rem für Typografie und Abstände, px für pixelkritische dekorative Details und clamp() mit rem und vw für fluide Typografie.