Pixel, em, rem, Prozent – CSS bietet eine Handvoll Einheiten, und die Wahl der richtigen entscheidet darüber, ob dein Layout sauber skaliert oder bei jeder Schriftgrößen-Änderung aus dem Leim geht. Wer den Unterschied zwischen absoluten und relativen Einheiten versteht, baut Oberflächen, die auf jedem Gerät und bei jeder Nutzereinstellung gut aussehen.
Absolute vs. relative Einheiten
CSS-Einheiten teilen sich grob in zwei Gruppen. Absolute Einheiten wie px haben eine feste Größe, unabhängig vom Kontext. Relative Einheiten wie em, rem und % beziehen sich auf einen anderen Wert – etwa die Schriftgröße des Elternelements oder die Größe des Viewports. Relative Einheiten sind der Schlüssel zu Designs, die sich an Nutzer und Gerät anpassen.
px: die absolute Basis
Ein Pixel (px) ist die direkteste Einheit: 16px sind immer 16px. Das macht px vorhersagbar und ideal für feine Details wie Rahmenstärken (border: 1px) oder exakte Abstände. Der Nachteil: px ignoriert die vom Nutzer im Browser eingestellte Standard-Schriftgröße. Wer aus Barrierefreiheitsgründen größere Schrift gewählt hat, profitiert davon nicht, wenn alles in px festgenagelt ist.
em: relativ zum Elternelement
Die Einheit em bezieht sich auf die Schriftgröße des eigenen oder übergeordneten Elements. Bei einer Elternschrift von 16px entspricht 1.5em genau 24px. Das ist praktisch für Komponenten, die als Ganzes skalieren sollen – etwa ein Button, dessen Innenabstand mit der Schriftgröße mitwächst.
Der Stolperstein bei em ist die Vererbung: em-Werte multiplizieren sich über verschachtelte Elemente hinweg. Setzt du in mehreren Ebenen jeweils 1.2em, wird die Schrift mit jeder Ebene größer, oft ungewollt. Genau hier hilft ein Blick auf die konkrete px-Entsprechung. Mit dem CSS Einheiten Umrechner rechnest du em bei gegebener Basis sofort in px um und siehst, was tatsächlich herauskommt.
rem: relativ zur Wurzel
Die Einheit rem ("root em") löst das Vererbungsproblem von em. Sie bezieht sich immer auf die Schriftgröße des Wurzelelements <html>, unabhängig von der Verschachtelung. Bei der üblichen Standardgröße von 16px ist 1rem = 16px, 1.5rem = 24px – und das überall im Dokument gleich.
Dadurch ist rem die beliebteste Einheit für moderne, responsive Designs: Du legst die Basisgröße einmal an <html> fest, und alle rem-Werte skalieren konsistent mit. Ändert der Nutzer seine Browser-Schriftgröße, passt sich das gesamte Layout harmonisch an. Wenn du gewohnte px-Werte in rem überführen willst, übernimmt der CSS Einheiten Umrechner die Rechnerei.
Prozent: relativ zum Container
Die Einheit % bezieht sich auf den jeweiligen Bezugswert der Eigenschaft – bei Breite und Höhe auf den Elternzeile-Container, bei Schriftgröße auf die geerbte Schrift. Prozent ist die klassische Wahl für flüssige Layouts: width: 50% bedeutet immer die halbe Breite des Containers, egal wie groß der gerade ist. Für Spaltenraster und flexible Bilder ist Prozent unverzichtbar.
Wann welche Einheit?
Eine praxisbewährte Faustregel:
- rem für Schriftgrößen, Abstände und die meisten Maße – konsistent und barrierefrei.
- em für Werte, die bewusst relativ zur Komponente skalieren sollen, etwa Innenabstände innerhalb eines Buttons.
- % für Breiten und flexible Layout-Container.
- px für feine, feste Details wie 1px-Rahmen oder Schatten-Offsets.
Wer diese Einteilung beherzigt, vermeidet sowohl starre, nicht skalierbare Layouts als auch das em-Vererbungschaos.
Ein Wort zu Viewport-Einheiten
Neben diesen vier gibt es noch die Viewport-Einheiten vw und vh, die sich auf die Fenstergröße beziehen – nützlich für vollflächige Bereiche und fließende Typografie über clamp(). Sie ergänzen das Repertoire, ersetzen aber nicht die Basis aus px, em, rem und Prozent.
Verwandte Werkzeuge
Wenn du nur zwischen Pixel und rem hin- und herrechnen willst, ist der Pixel REM Rechner die schnelle Wahl. Für responsive Schriftgrößen über einen Bereich hinweg hilft der CSS Clamp Generator. Beide und viele weitere Frontend-Helfer findest du in der Webtools-Übersicht.
Fazit
Die richtige CSS-Einheit ist keine Geschmacksfrage, sondern eine Entscheidung über Skalierbarkeit und Barrierefreiheit. rem für Konsistenz, em für komponentenrelative Werte, Prozent für Layouts und px für feste Details – mit diesem Schema gelingen robuste Oberflächen. Beim Umrechnen zwischen den Einheiten nimmt dir der CSS Einheiten Umrechner die Arbeit ab.