rem vs px vs em für Schriftgrößen

Eine Dokumentations-Website wird mit einer harmlosen Regel ausgeliefert: li { font-size: 0.875em }. Listenelemente der obersten Ebene werden mit 14px dargestellt, genau wie beabsichtigt. Dann verschachtelt jemand eine Liste, und die inneren Elemente werden mit 12,25px dargestellt. Eine FAQ-Seite mit drei Verschachtelungsebenen landet ganz unten bei 10,7px. Niemand hat diese Zahlen getippt — bei font-size löst sich em gegen die Schriftgröße des Elternelements auf, sodass jede Verschachtelungsebene erneut mit 0,875 multipliziert.

Die praktische Faustregel für Schriftgrößen: Verwende rem für fast alles, behalte px für Details, die nicht mit dem Text mitskalieren sollen (Rahmen, manchmal Schatten), und reserviere em für die seltene, wirklich lokale Beziehung — ein Icon, dessen Größe sich nach dem Text daneben richtet. rem löst sich gegen die Wurzel-Schriftgröße auf, respektiert also die Browser-Einstellung des Lesers und summiert sich nie auf. em summiert sich durch Verschachtelung auf, was genau der Listen-Bug oben ist. px ignoriert die Einstellung des Lesers vollständig.

Dieser Artikel ist Teil unseres Leitfadens zur Schriftgrößenskala: Sobald eine Skala die Größen generiert, bleibt die Frage, welche Einheit sie ins Stylesheet trägt.

Wie löst sich jede Einheit tatsächlich auf?

• px ist fest: 16px wird immer mit derselben berechneten Größe dargestellt, unabhängig von jeder Schrift-Präferenz. Der Seiten-Zoom vergrößert es trotzdem — Zoom skaliert alles —, aber die font-size-Einstellung des Browsers hat keine Wirkung darauf.
• rem („root em”) löst sich gegen die berechnete Schriftgröße des Wurzelelements auf, das standardmäßig 16px beträgt und der Browser-Einstellung des Lesers folgt. 1.5rem sind 24px bei einer Standard-Wurzel und 30px bei einer 20px-Wurzel — eine Konstante pro Seite, dieselbe in jeder Verschachtelungstiefe.
• em, auf font-size angewandt, löst sich gegen die berechnete Schriftgröße des Elternelements auf — was es zu einer Kette macht. 0.875em in 0.875em in 0.875em ergibt 14 → 12,25 → 10,72px. Dieselben drei Listenebenen, als 0.875rem deklariert, werden in jeder Tiefe mit 14px dargestellt.

Diese Verkettung ist der schärfste praktische Unterschied zwischen rem und em, und deshalb sind „relative Einheiten” keine einheitliche Kategorie: Die eine ist relativ zu einem stabilen Anker, die andere relativ zu dem, was zufällig darüber im Baum steht.

Warum respektiert rem den Nutzer, px aber nicht?

Browser stellen eine Standard-Schriftgröße bereit — typischerweise 16px —, und Menschen, die größeren Text brauchen, erhöhen sie, manche auf 20px, manche weit darüber hinaus. Diese Einstellung ändert die Wurzel-Schriftgröße, sodass jeder rem-Wert ihr folgt; jeder px-Wert verwirft sie stillschweigend. Der Unterschied ist wichtig, weil die Einstellung nicht dasselbe wie Zoom ist: Der Seiten-Zoom ist eine seitenspezifische Anpassung, die das gesamte Layout skaliert, Bilder eingeschlossen, während die font-size-Präferenz eine dauerhafte, browserweite Aussage über die Augen des Lesers ist. Ein px-Stylesheet überschreibt diese Aussage, ohne dass es jemand bemerkt — die Seite bleibt einfach klein.

WCAGs Kriterium zur Textvergrößerung (1.4.4) verlangt, dass Text auf 200 % vergrößert werden kann, ohne dass Inhalt oder Funktionalität verloren gehen. Der Vollseiten-Zoom bringt die meisten Seiten dorthin, sodass eine px-Größenangabe nicht automatisch durchfällt — aber erst eine rem-basierte Hierarchie sorgt dafür, dass auch die eigene Standard-Einstellung des Lesers wirkt, statt ihn auf jeder Website zum Zoomen zu zwingen. Der intuitive Fall ist einfacher als der Compliance-Fall: Der Leser hat dem Browser einmal gesagt, wie groß Text für ihn sein muss. rem gibt die Botschaft weiter; px verwirft sie.

Wie sieht eine Skala in px und rem aus?

Hier eine modulare Skala einer reinen Quarte (Verhältnis 1,333, zwei Töne pro Intervall) auf einer 16px-Basis — die px-Werte zuerst gerundet, dann mit 16px pro rem umgerechnet, was der übliche Token-Workflow ist:

Lies die letzte Spalte gegen die zweite: Bei einem erhöhten Standard würde sich die px-Spalte überhaupt nicht bewegen, während die rem-Spalte die gesamte Hierarchie um 25 % größer reproduziert — jede Größe um denselben Faktor skaliert, die Proportionen intakt. Der Leser bekommt eine größere Version deiner Typografie, keine verzerrte.

Öffne diese Skala im Scale Composer — 16px-Basis, reine Quarte, zwei Töne: dieselben sechs Schritte wie in der Tabelle. Ändere dann die Basis auf 20, und du siehst die rechte Spalte live — das, was jede Größe für einen Leser wird, der seinen Standard erhöht hat.

Wann ist em die richtige Einheit?

Wenn ein Maß dem Text direkt daneben folgen soll, welche Größe dieser Text auch immer gerade hat. Der klassische Fall ist ein Inline-Icon: Gib ihm eine Breite und Höhe von 1em, und es passt zu seinem Text in einem Button, einer Überschrift oder einer Bildunterschrift, ganz ohne kontextspezifische Überschreibungen. Komponenten-lokales Padding kann genauso funktionieren — ein in em gepolsterter Button behält seine Proportionen, wenn dieselbe Komponente in einer kleinen und einer großen Variante ausgeliefert wird. Der Test ist die Lokalität: Wenn der Bezugspunkt des Werts „der Text hier” ist, kodiert em diese Beziehung direkt. Für font-size selbst verwende es bewusst und höchstens eine Ebene tief — Ketten von em-Schriftgrößen sind genau das, was den Bug mit verschachtelten Listen entstehen lässt.

Wann ist px die richtige Einheit?

Wenn ein Mitskalieren mit dem Text falsch wäre. Ein 1px-Haarlinienrahmen existiert, um Bereiche zu trennen; wenn ein Leser seine Textgröße verdoppelt, ist die Haarlinie, die ihre Aufgabe bei 1px erfüllt, meist immer noch bei 1px richtig — hochskaliert wird sie zu einem Gestaltungselement, das niemand wollte. Schatten fallen oft in dieselbe Kategorie: Sie kodieren Höhe, nicht Lesegröße, auch wenn manche Systeme sie bewusst mitskalieren. Das Prinzip spiegelt das rem-Argument von der anderen Seite: rem für alles, was mit dem Text des Lesers wachsen soll, px für die wenigen Dinge, deren Aufgabe davon unabhängig ist.

Sieh deine Skala mit den Augen eines Lesers

Nimm die Faustregel zur Probefahrt: Öffne dieselbe Skala mit einer 20px-Basis — die letzte Spalte der Tabelle, live — und vergleiche sie mit der 16px-Version. Alles behält seine Form; nur die Größe ändert sich. Prüfe dann dein eigenes Produkt: Wenn seine Schriftgrößen in px deklariert sind, ist genau diese größere, unverzerrte Version das, was Leser mit erhöhtem Standard nicht bekommen.