Wer mit CSS arbeitet, stolpert früher oder später über die Frage: Soll ich Schriftgrößen und Abstände in Pixeln oder in rem angeben? Die Wahl der Einheit wirkt unscheinbar, hat aber großen Einfluss auf Skalierbarkeit, Wartbarkeit und vor allem Barrierefreiheit deiner Website. Dieser Ratgeber erklärt die Unterschiede und zeigt, wann welche Einheit sinnvoll ist.
Was Pixel (px) wirklich sind
Der Pixel ist eine absolute Einheit. font-size: 16px bedeutet: 16 CSS-Pixel, unabhängig von jeder anderen Einstellung. Das klingt verlässlich und vorhersehbar – und genau hier liegt das Problem. Wenn ein Nutzer in seinem Browser die Standard-Schriftgröße erhöht, weil er schlechter sieht, ignorieren in Pixeln definierte Texte diese Einstellung in vielen Fällen. Die Schrift skaliert nicht mit, die Barrierefreiheit leidet.
Was rem bedeutet
Die Einheit rem steht für "root em". Sie bezieht sich immer auf die Schriftgröße des Wurzelelements <html>. Standardmäßig liegt diese bei 16 Pixeln – also entspricht 1rem genau 16px, 1.5rem sind 24px und 0.5rem sind 8px. Der entscheidende Vorteil: Ändert der Nutzer die Browser-Schriftgröße oder passt du den Wert am <html>-Element an, skaliert alles, was in rem definiert ist, automatisch mit.
Die Umrechnung ist simpel: rem = px / 16 beziehungsweise px = rem × 16. Für andere Basiswerte wird statt 16 die jeweilige Root-Schriftgröße eingesetzt. Genau diese Rechnung nimmt dir der Pixel REM Rechner ab – du gibst den Pixelwert ein und erhältst den passenden rem-Wert für deine gewählte Basis, oder umgekehrt.
Und was ist em?
Die Einheit em ähnelt rem, bezieht sich aber nicht auf das Wurzelelement, sondern auf die Schriftgröße des direkten Elternelements. Das macht sie flexibel, aber auch tückisch: Verschachtelst du Elemente mit em-Werten, multipliziert sich der Effekt. Ein in 1.2em gesetzter Text in einem ebenfalls 1.2em großen Container wird real um den Faktor 1,44 vergrößert. em eignet sich daher gut für Komponenten, die relativ zu ihrem Kontext skalieren sollen, etwa Innenabstände in Buttons.
Wann du welche Einheit nutzen solltest
- rem für Schriftgrößen und globale Abstände: Die beste Wahl für Barrierefreiheit, weil sie respektiert, wenn Nutzer die Standardschrift vergrößern.
- em für komponenteninterne Maße: Praktisch, wenn ein Element samt Padding und Innenabständen proportional zu seiner eigenen Schriftgröße wachsen soll.
- px für feine Details: Rahmenbreiten, Schatten-Offsets oder 1-Pixel-Linien, die nicht skalieren müssen, sind in Pixeln am eindeutigsten.
Der 62,5-Prozent-Trick
Ein verbreiteter Kniff: Man setzt html { font-size: 62.5%; }. Dadurch entspricht 1rem nicht mehr 16, sondern genau 10 Pixeln. Die Umrechnung im Kopf wird trivial – 1.6rem sind 16px, 2.4rem sind 24px. Der Ansatz ist bequem, hat aber Nachteile bei vererbten Schriftgrößen und gilt heute als optional. Mit einem zuverlässigen Umrechner ist er ohnehin verzichtbar.
Praktisches Beispiel
Angenommen, dein Design liefert eine Überschrift mit 32px und Fließtext mit 18px bei Standard-Basis von 16px. Umgerechnet sind das 2rem für die Überschrift und 1.125rem für den Text. Definierst du diese in rem, vergrößert sich der gesamte Text proportional, sobald ein Nutzer seine Browser-Schrift hochstellt – ohne dass dein Layout zerbricht.
Für noch flexiblere, mit dem Viewport mitwachsende Schriftgrößen lohnt sich ein Blick auf den CSS Clamp Generator, der responsive Größen mit clamp() erzeugt. Weitere Helfer für die tägliche Frontend-Arbeit findest du in den Webtools.
Häufige Fragen
Ist rem immer besser als px?
Für Schrift und große Layout-Abstände ja, weil rem die Nutzereinstellungen respektiert. Für haarfeine Details wie 1px-Rahmen ist px weiterhin sinnvoll. In der Praxis kombiniert man beide Einheiten gezielt.
Beeinflusst rem auch Abstände wie margin und padding?
Ja, rem funktioniert für jede Längenangabe in CSS, nicht nur für font-size. Das hat den Vorteil, dass auch Abstände mitskalieren, wenn die Root-Schriftgröße verändert wird, was ein einheitlich wirkendes Layout fördert.
Warum sieht meine Seite nach dem Zoomen trotzdem gut aus, obwohl ich px nutze?
Das Seiten-Zoom des Browsers (Strg/Cmd und Plus) vergrößert alles, auch px-Werte. Anders verhält es sich beim reinen Vergrößern der Standard-Schriftgröße in den Browsereinstellungen – dort profitieren nur rem- und em-basierte Texte.