CSS-Einheiten richtig einsetzen: px, em, rem, vw und % im Vergleich
Du baust gerade eine neue Landingpage und auf deinem Desktop sieht alles top aus. Kaum öffnest du die Seite auf dem Handy, ragt ein Bild über den Bildschirmrand hinaus oder der Text wirkt winzig klein. Dieses nervige Problem kennt im Webdesign wirklich jeder. Egal ob Azubi im ersten Praktikum oder erfahrener Entwickler. Welche CSS-Einheit du wählst, entscheidet darüber, ob deine Website auf jedem Gerät mitwächst oder ob du am Ende stundenlang Fehler suchst. In diesem Beitrag zeige ich dir, wann sich welche Einheit wirklich lohnt und wie du sie richtig im Alltag einsetzt.
Inhalt
In Kürze:
CSS-Einheiten legen fest, wie groß Schriften, Abstände oder Elemente auf einer Website dargestellt werden.
Absolute Einheiten wie px bleiben immer gleich groß, unabhängig vom Endgerät.
Relative Einheiten wie %, vw oder rem passen sich automatisch an Bildschirm oder Nutzereinstellungen an.
Für Schriftgrößen hat sich rem inzwischen als Standard durchgesetzt.
Neue Einheiten wie dvh oder Container Queries lösen aktuelle Probleme bei mobilen Layouts.
Was sind CSS-Einheiten?
CSS-Einheiten sind digitale Maßangaben, die bestimmen, wie groß Elemente wie Schriften oder Bilder auf einer Webseite dargestellt werden. Man unterscheidet dabei zwischen starren Werten, die immer eine feste Größe behalten, und flexiblen Einheiten, die sich automatisch an die jeweilige Bildschirmgröße anpassen. Diese anpassungsfähigen Maße stellen sicher, dass ein Layout sowohl auf einem großen Computermonitor als auch auf einem kleinen Smartphone optimal lesbar bleibt.
Mit CSS-Einheiten legst du zum Beispiel fest:
die Größe von Schriften
die Breite von Bildern oder Containern
die Abstände zwischen Elementen
die Höhe von Bereichen
Absolute und relative Einheiten im Vergleich
Absolute Einheiten wie Pixel (px) sind fest. Ein Bild mit 300px Breite bleibt exakt so breit, egal wie klein das Display des Besuchers ist. Relative Einheiten wie Prozent (%), Viewport Width (vw) oder rem orientieren sich dagegen immer an einem anderen Wert. Zum Beispiel an der Bildschirmbreite oder an der Größe eines übergeordneten Elements.
Tipp aus der Praxis: In den meisten Projekten mische ich bewusst beide Welten. Feste Werte eignen sich für kleine, unveränderliche Elemente wie Icons. Relative Werte übernehmen alles, was sich an den Bildschirm anpassen soll.
Die wichtigsten CSS-Einheiten im Überblick
| Einheit | Bezieht sich auf | Beispiel | Sinnvoll bei |
|---|---|---|---|
| px | feste Bildschirmpixel | 16px | Border, kleine Icons, feste Rahmen |
| % | das direkte Elternelement | 50% | Layout-Breiten, Spalten |
| vw / vh | Breite bzw. Höhe des Browserfensters | 100vw | Vollbild-Elemente, Hero-Bereiche |
| em | Schriftgröße des Elternelements | 1.2em | einzelne, in sich geschlossene Komponenten |
| rem | Basis-Schriftgröße des gesamten Dokuments | 1rem | Schriftgrößen und Abstände im gesamten Layout |
rem vs. em: Der Klassiker unter den Verwechslungen
em und rem sehen auf den ersten Blick fast gleich aus. Trotzdem verhalten sie sich völlig unterschiedlich.
Bei der Schriftgröße bezieht sich em auf das direkte Elternelement. Hat ein Container eine Schriftgröße von 20px, entspricht 1em darin genau 20px.
Das Problem entsteht bei Verschachtelung. Steckst du mehrere Elemente mit em-Werten ineinander, multiplizieren sich die Werte. Am Ende hast du eine unerwartet große oder winzige Schrift, ohne dass du das irgendwo bewusst so festgelegt hast.
rem funktioniert anders. Der Wert bezieht sich immer auf die Basis-Schriftgröße des gesamten Dokuments, egal wie tief ein Element verschachtelt ist. Damit bleibt rem in jedem Layout berechenbar, auch in sehr komplexen Strukturen. Genau deshalb hat sich rem in der Praxis als Standard für Schriftgrößen durchgesetzt.
Experten-Tipp: Teste in deinem nächsten Projekt einfach, was passiert, wenn du die Basis-Schriftgröße im Browser veränderst. Mit rem wächst der komplette Text harmonisch mit. Mit verschachteltem em wird das Ergebnis dagegen schnell unvorhersehbar.
Welche CSS-Einheit eignet sich wofür?
Schriftgrößen und Abstände: rem, weil sich der Text an die individuellen Einstellungen der Besucher anpasst
Breite von Layout-Spalten und Containern: %, weil sie sich an den verfügbaren Platz anpasst
Bilder: max-width: 100% zusammen mit height: auto, damit ein Bild niemals aus seinem Container herausragt, aber trotzdem beliebig kleiner werden kann
Vollbild-Bereiche wie Hero-Sektionen: vw und vh
Kleine, feste Elemente wie Icons oder Border: px
Info:
Als Grundregel für responsives Webdesign gilt: Nutze so oft wie möglich relative Einheiten und verwende px nur dort, wo ein Element wirklich immer gleich groß bleiben soll.
Typische Stolperfallen aus der Praxis
In bestehenden Kundenprojekten triffst du so gut wie nie auf eine saubere grüne Wiese. Meistens ist der CSS-Code über Jahre gewachsen und px, em, rem und % sind wild gemischt. Für den Umbau hat sich dieses Vorgehen bewährt:
Identifiziere zuerst die großen Hauptcontainer im Layout.
Stelle deren Breite auf relative Einheiten wie % um.
Arbeite dich danach systematisch von außen nach innen zu den kleineren Elementen vor.
Teste nach jedem Schritt auf einem echten mobilen Gerät, nicht nur im Browser-Simulator.
Ein zweites, sehr verbreitetes Problem betrifft die Höhe 100vh. Ein Bereich mit dieser Höhe soll den kompletten Bildschirm füllen. Auf dem Smartphone blendet der Browser aber oft eine Adressleiste ein und wieder aus, dadurch schneidet der Bereich plötzlich Inhalte ab. Trifft es genau deinen Button, kostet dich das im schlimmsten Fall jede Conversion auf dieser Seite.
Für dieses Problem gibt es inzwischen eigene Einheiten: dvh (Dynamic Viewport Height), svh (Small Viewport Height) und lvh (Large Viewport Height). Diese Einheiten berechnen die tatsächlich sichtbare Bildschirmhöhe dynamisch und lösen damit genau dieses Problem.
Container Queries: Der nächste Schritt für flexible Layouts
Bisher haben wir Layouts fast immer an der Breite des kompletten Browserfensters ausgerichtet. Container Queries gehen einen Schritt weiter.
Einheiten wie cqi (Container Query Inline) oder cqw (Container Query Width) orientieren sich ausschließlich an dem Platz, den der direkte Container zur Verfügung stellt. Du baust zum Beispiel eine Produktkarte einmal fertig und setzt sie danach an unterschiedlichen Stellen deiner Website ein. Egal ob in einer schmalen Sidebar oder in einer breiten Hauptspalte, die Karte passt sich völlig eigenständig an den verfügbaren Raum an.
Browserkompatibilität und clamp()
Die klassischen Einheiten px, em, rem, % und vw unterstützen alle modernen Browser vollständig. Hier musst du dir keine Sorgen machen.
Auch die Funktion clamp() läuft mittlerweile stabil in allen gängigen Browsern. Mit clamp() definierst du eine Schriftgröße, die fließend zwischen einem Minimal- und einem Maximalwert wächst, ganz ohne zusätzliche Media Queries.
Selbst die neueren Techniken sind inzwischen unproblematisch: dvh, svh und lvh werden von allen aktuellen Browsern unterstützt, Container Queries ebenfalls. Ein einfacher Fallback davor kostet dich nur eine Zeile und ist bei sehr alten Geräten die sichere Variante.
CSS-Einheiten umrechnen: So einfach geht's
Die meisten Browser nutzen standardmäßig 16px als Basis-Schriftgröße. Damit entspricht 1rem in der Regel genau 16px. Im Arbeitsalltag musst du diese Werte aber nicht im Kopf ausrechnen. Nutze einfach den exklusiven Rechner von SERPIA um PX in REM umzurechen:
px in rem
Tippe in ein Feld – das andere rechnet automatisch mit. Funktioniert in beide Richtungen.
Komma oder Punkt als Dezimaltrennzeichen möglich. Mit Pfeil hoch und runter lässt sich der Wert schrittweise ändern.
font-size: 1.5rem;
Umrechnungstabelle anzeigen
| rem | px |
|---|
em statt rem? Gleiche Rechnung, anderer Bezugspunkt: rem richtet sich immer nach der Schriftgröße des Wurzelelements, em nach der des Elternelements. Verschachtelte em-Werte multiplizieren sich deshalb.
Warum saubere CSS-Einheiten auch fürs Ranking zählen
Man liest oft, relative Einheiten würden eine Seite schneller machen. Das stimmt so nicht, denn ein rem lädt genauso schnell wie ein px. Es gibt aber drei Stellen, an denen deine Einheiten sehr wohl bei Google ankommen.
Springende Layouts kosten Punkte. Google bewertet mit den Core Web Vitals unter anderem, wie stabil eine Seite beim Laden bleibt. Diese Kennzahl heißt Cumulative Layout Shift (CLS) und gilt als gut bei einem Wert unter 0,1. Die häufigste Ursache für Ausschläge sind Bilder ohne Größenangabe, weil der Browser nicht weiß, wie viel Platz er reservieren soll. Der Text rutscht dann nach unten, sobald das Bild endlich geladen ist. Hier sind feste Zahlen ausdrücklich richtig: Gib deinen Bildern im HTML immer width und height mit, die Anpassung an den Bildschirm übernimmt weiterhin dein CSS.
Google sieht die mobile Version. Bei der Indexierung zieht Google in erster Linie die mobile Fassung deiner Seite heran. Ein Element mit fester Breite, das auf dem Handy horizontales Scrollen erzwingt, stört also nicht nur deine Besucher. Es ist genau die Version, die auch bewertet wird. Und wer sich auf einer Seite nicht zurechtfindet, springt schneller wieder ab, was sich in den User Signals niederschlägt.
Barrierefreiheit ist kein Nice-to-have mehr. Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen, dass sich Text auf 200 Prozent vergrößern lässt, ohne dass Inhalte verloren gehen. Wer Schriftgrößen in px festnagelt, verhindert genau das. Zusätzlich gilt in Deutschland seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG), das viele Unternehmen zu barrierefreien Websites, Shops und Apps verpflichtet. Der technische Maßstab dahinter verweist direkt auf die WCAG. Ob dein Angebot betroffen ist, klärt im Zweifel ein Fachanwalt. Die gute Nachricht: Mit rem für Schriftgrößen erledigst du einen der wichtigsten Punkte quasi nebenbei.
Luca Janoschka ist ein leidenschaftlicher Online-Marketing- und SEO-Spezialist. Durch seine Selbstständigkeit sowie Praxiserfahrung in SaaS-Unternehmen und auf Agenturseite konnte er sich in den unterschiedlichsten Marketingdisziplinen weiterentwickeln.
In unserem Blog schreibt er über seine direkten Erfahrungen und gibt Einblicke in die Best Practices rund um Content, Branding, SEO und Neuromarketing.
FAQ: Häufige Fragen zu CSS-Einheiten
-
Eine CSS-Einheit ist eine Maßeinheit, mit der du dem Browser mitteilst, wie groß Abstände, Schriften oder Boxen dargestellt werden sollen. Man unterscheidet zwischen starren, absoluten Einheiten und flexiblen, relativen Einheiten.
-
Du änderst die Schriftgröße über die CSS-Eigenschaft font-size. Dabei weist du dem gewünschten Element einfach einen Wert zu, am besten in der Einheit rem.
-
Weder 11 noch 12 ist der Standard im Web. Die meisten Browser nutzen 16px als Basis-Schriftgröße für Fließtext.
-
Die richtige Schriftgröße richtet sich nach der Lesbarkeit auf verschiedenen Geräten. Für Fließtext gelten mindestens 16px als guter Richtwert, Überschriften dürfen entsprechend größer ausfallen.
-
Width legt die Breite eines Elements fest, height die Höhe. Beide Eigenschaften kannst du mit festen oder relativen Einheiten kombinieren.
