CSS-Einheiten verstehen und konvertieren: px, rem, em, vh/vw richtig einsetzen
📷 Christina Morillo / PexelsCSS-Einheiten verstehen und konvertieren: px, rem, em, vh/vw richtig einsetzen
Ein praxisnaher Leitfaden zu CSS-Einheiten — wann px, rem, em oder vh verwendet werden sollte, was die Basis-Schriftgröße damit zu tun hat und wie man die em-Vererbungsfalle vermeidet.
Das 24px-Problem, das niemand erwartet
Eine Figma-Datei landet in Ihrem Posteingang. Alle Massangaben sind in Pixeln — 24px Schriftgrösse, 16px Innenabstand, 48px Aussenabstand. Sie übernehmen die Werte direkt in Ihr CSS. Auf Ihrem Rechner sieht alles perfekt aus.
Dann öffnet ein Kollege, der die Standard-Schriftgrösse seines Browsers auf 20px erhöht hat, die Seite. Ihr 24px-Titel bleibt starr bei 24px, während sich der Rest des Layouts anpasst. Die sorgfältig ausbalancierte Schrifthierarchie bricht auseinander.
Das ist kein Sonderfall. Das ist das unvermeidliche Ergebnis, wenn alle Werte als Absolutangaben hinterlegt werden. Die Lösung: verstehen, welche Einheit wann sinnvoll ist, und einen zuverlässigen Weg haben, zwischen Einheiten zu wechseln.
Genau dafür gibt es den CSS-Einheitenkonverter. Bevor wir zum Werkzeug kommen, bauen wir das notwendige Grundverständnis auf.
Die wichtigsten CSS-Einheiten im Überblick
CSS bietet mehr Masseinheiten, als die meisten Entwickler im Alltag nutzen. Hier ist, was jede davon tatsächlich bedeutet:
px — Pixel
Die Einheit, mit der die meisten CSS gelernt haben. 1px entspricht nominal einem Bildschirmpixel auf einem Standard-Display. Auf hochauflösenden Displays (Retina) skaliert der Browser basierend auf der Gerätepixeldichte — 1px können dann 2 oder 3 physische Pixel sein, aber das rechnet der Browser automatisch.
Die entscheidende Eigenschaft: px ist fest. Es reagiert weder auf Nutzereinstellungen noch auf Elternelemente. Ein 1px-Rahmen ist immer 1px — manchmal genau das Richtige, manchmal das Problem.
rem — Root-Em
rem steht für Root-Em. 1rem entspricht der Schriftgrösse des <html>-Elements, was in den meisten Browsern standardmässig 16px ist — entscheidend ist aber, dass es die vom Nutzer konfigurierte Basis-Schriftgrösse respektiert.
Wenn ein Nutzer die Standard-Schriftgrösse seines Browsers auf 20px stellt, ist 1rem überall auf der Seite 20px. Das gesamte Layout skaliert proportional. Das ist ein echter Gewinn für die Barrierefreiheit.
1.5rem bei 16px Basis ergibt 24px. Die Basis kann sich ändern, die Proportionen bleiben.
em — Em (die tückische Einheit)
em funktioniert ähnlich wie rem, bezieht sich aber auf die Schriftgrösse des aktuellen Elements, nicht des Wurzelelements. Ohne Verschachtelungen funktioniert das gut — sobald Elemente ineinander liegen, wird es kompliziert.
Hat ein Element font-size: 1.2em und liegt in einem Elternelement mit font-size: 1.2em, ist die tatsächliche Grösse des Kindes 1.2 × 1.2 = 1.44em. Bei drei Ebenen: 1.728em. Das ist die em-Vererbungsfalle — mehr dazu weiter unten.
vh / vw — Viewport-Höhe und -Breite
1vh = 1% der Browser-Viewport-Höhe. 1vw = 1% der Viewport-Breite. Sehr nützlich für Vollbild-Bereiche und flüssige Schriftgrössen, die sich an den Bildschirm anpassen.
Achtung: Auf Mobilgeräten erscheint und verschwindet die Adressleiste je nach Scrollposition und verändert so die Viewport-Höhe. 100vh-Elemente können dadurch springen. Die CSS Working Group hat dvh (dynamic viewport height) eingeführt, aber die Browserunterstützung wächst noch.
% — Prozent
Prozent ist kontextabhängig auf eine Art, die auch erfahrene Entwickler gelegentlich überrascht. width: 50% ist 50% der Elternbreite. font-size: 120% ist 120% der vererbten Schriftgrösse. margin-top: 10% bezieht sich auf die Breite des Elternblocks, nicht auf dessen Höhe — ein Verhalten, das viele überrascht.
pt, cm, mm — Druckeinheiten
Physische Masseinheiten, die im Web fast ausschliesslich in Print-Stylesheets verwendet werden. 1pt = 1/72 Zoll. Im normalen Web-CSS kaum relevant.
Das mentale Modell der Basis-Schriftgrösse
Was viele Tutorials überspringen: Browser haben nicht nur eine Standard-Schriftgrösse, sondern eine vom Nutzer veränderbare Standard-Schriftgrösse. Chrome, Firefox und Safari erlauben alle diese Anpassung. Historisch liegt der Standard bei 16px — die meisten Umrechnungstabellen nehmen das als Basis.
Die resultierenden Berechnungen:
1rem = 16px (bei Browser-Standard)
0.75rem = 12px
1.25rem = 20px
1.5rem = 24px
2rem = 32px
Manche Design-Systeme setzen html { font-size: 62.5%; }, um 1rem = 10px zu machen (1.6rem = 16px). Der Rechentrick ist praktisch, aber er bricht leise Komponenten, die den Browser-Standard voraussetzen, und verbessert die Barrierefreiheit nicht wirklich. Wer eine Codebase mit diesem Muster übernimmt, sollte es früh erkennen.
Fazit: rem ist vorhersehbar, weil es immer an einem einzigen Wert verankert ist. Deshalb ist es die richtige Wahl für Typografie und Abstände.
Welche Einheit wofür?
Schriftgrössen → rem
Immer. Es gibt kaum einen guten Grund, font-size in px zu setzen. Wenn jemand seine Browser-Schriftgrösse anpasst, soll die Schrifthierarchie erhalten bleiben. rem erledigt das automatisch.
body { font-size: 1rem; } /* 16px beim Standard */
h1 { font-size: 2.5rem; } /* 40px beim Standard */
h2 { font-size: 2rem; } /* 32px beim Standard */
small { font-size: 0.875rem; } /* 14px beim Standard */
Abstände in Komponenten → rem oder px (je nach Absicht)
Innen- und Aussenabstände erfordern eine Entscheidung. Abstände, die mit dem Text mitwachsen sollen (z.B. vertikales Padding eines Buttons), gehören in rem. Feste optische Abstände (z.B. zwischen Icon und Text) können px bleiben.
.button {
padding: 0.75rem 1.5rem; /* skaliert mit Schriftgrösse */
border: 1px solid currentColor; /* immer 1px */
border-radius: 4px; /* fixer visueller Wert */
}
Vollbild- und Viewport-relative Layouts → vh/vw
Hero-Bereiche, Modals, die einen Prozentsatz des Bildschirms einnehmen sollen, oder Sticky-Sidebars gehören in Viewport-Einheiten. Mobilgeräte und die springende Adressleiste im Hinterkopf behalten.
Print-Stile → pt/cm/mm
Im @media print-Block auf physische Einheiten wechseln. Drucker denken in Zoll und Punkt, nicht in Bildschirmpixeln.
Die em-Vererbungsfalle (mit echtem Beispiel)
Warum em bei Schriftgrössen gefährlich werden kann, zeigt dieses Beispiel.
Angenommen, Sie bauen eine Karten-Komponente:
.card { font-size: 1.2em; }
.card .meta { font-size: 0.9em; }
.card .meta .timestamp { font-size: 0.85em; }
Wenn das Elternelement von .card font-size: 16px hat, ergibt sich Folgendes:
.card→ 16px × 1.2 = 19.2px.card .meta→ 19.2px × 0.9 = 17.28px.card .meta .timestamp→ 17.28px × 0.85 = 14.688px
Keine dieser Zahlen entspricht wahrscheinlich der Absicht. Ohne Taschenrechner ist das kaum zu debuggen.
Die gleichen Stile mit rem:
.card { font-size: 1.2rem; }
.card .meta { font-size: 0.9rem; }
.card .meta .timestamp { font-size: 0.85rem; }
Jeder Wert bezieht sich direkt auf die Basis-Schriftgrösse. Kein Kumulierungseffekt, vollständig vorhersehbar.
rem ist die richtige Wahl, wenn proportionale Skalierung ohne Kaskadeneffekte gewünscht ist. em bleibt nützlich für line-height: 1.5em oder padding: 0.5em bei Buttons, wo der Abstand proportional zur Schriftgrösse des Elements sein soll.
Umrechnungstabelle (Basis 16px)
| px | rem | em (ohne Vererbung) | pt |
|---|---|---|---|
| 10px | 0.625rem | 0.625em | 7.5pt |
| 12px | 0.75rem | 0.75em | 9pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 20px | 1.25rem | 1.25em | 15pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 32px | 2rem | 2em | 24pt |
| 40px | 2.5rem | 2.5em | 30pt |
| 48px | 3rem | 3em | 36pt |
Alle Werte setzen 1rem = 16px voraus. Liegt die Basis-Schriftgrösse woanders, ändern sich alle Umrechnungen. Dafür ist das Tool da.
Der CSS-Einheitenkonverter im Einsatz
Der CSS-Einheitenkonverter löst das, was eine statische Tabelle nicht kann: Was, wenn die Basis-Schriftgrösse nicht 16px ist? Was, wenn der Viewport 1440px breit ist und genaue vw-Werte gefragt sind?
Das Tool bietet:
- Einen Wert eingeben
- Die Ausgangseinheit wählen (px, rem, em, vh, vw, %, pt, cm, mm)
- Die Basis-Schriftgrösse festlegen (Standard 16px, anpassbar)
- Viewport-Dimensionen einstellen (für vh/vw-Umrechnungen)
- Alle Äquivalentwerte sofort ablesen
Das ist der Arbeitsablauf, den ich nutze, wenn ich Figma-Spezifikationen (immer in px) in rem-Werte für ein Design-System übersetze. px-Wert eingeben, rem ablesen, fertig. Auch nützlich, wenn ein Layout in DevTools leicht falsch aussieht — px-Wert eingeben und mit dem erwarteten rem vergleichen.
Tipps für Tailwind-CSS-Nutzer
Tailwind zeigt in der Dokumentation Pixel-Werte, verwendet intern aber rem.
Tailwind verwendet intern rem. text-base ist 1rem, text-lg ist 1.125rem, text-xl ist 1.25rem. Wer font-size manuell passend zu einer Tailwind-Klasse setzen will, sollte rem und nicht den Pixel-Wert aus der Dokumentation verwenden.
Die Abstandsskala ist ebenfalls rem. p-4 entspricht 1rem (16px beim Standard), p-8 ist 2rem (32px). Wenn ein Designer "24px Padding" sagt, ist das in Tailwind p-6 (1.5rem). Der Konverter hilft, solche Werte schnell zuzuordnen.
Individuelle Basis-Schriftgrössen funktionieren problemlos mit Tailwind. Mit html { font-size: 18px } passen sich alle Tailwind-rem-Werte automatisch an. Im Konverter mit Basis 18px prüfen.
Fazit
Die Wahl der CSS-Einheit ist keine Nebensache. Sie entscheidet darüber, ob ein Layout für alle Nutzer funktioniert oder für bestimmte Gruppen auseinanderfällt.
- px — feste visuelle Eigenschaften wie Rahmen und Outlines
- rem — Schriftgrössen und skalierbare Abstände (Barrierefreiheits-Standard)
- em — sparsam einsetzen, wenn proportionale Skalierung zum eigenen Element erwünscht ist
- vh/vw — Viewport-basierte Layouts,
dvhfür mobiles Vollbild - % — containerbezogene Grössen (Vorsicht beim margin-Verhalten)
- pt/cm/mm — ausschliesslich in Print-Stylesheets
Mit dem CSS-Einheitenkonverter als Lesezeichen sparen Sie die Rechenzeit und konzentrieren sich auf das, was wirklich zählt.