em vs rem vs px: welche Einheit wofür

Wovon die Einheit abhängt

px ist ein CSS-Pixel, unabhängig von jeder Schriftgröße. em ist die berechnete Schriftgröße des Elements selbst – bei font-size die des Elternelements. rem ist die Schriftgröße des html-Elements, im Standard 16 Pixel, vom Nutzer im Browser änderbar. Die Grundlagen zu Längenwerten stehen in Längenwerte.

Das Aufsummieren von em

li { font-size: 1.2em; } macht eine Liste in einer Liste 1,44-mal so groß, eine dritte Ebene 1,73-mal – jede Ebene multipliziert. Genau dafür wurde rem eingeführt: 1.2rem ist auf jeder Ebene gleich. Für Abstände innerhalb einer Komponente ist em dagegen erwünscht: padding: 0.5em an einer Schaltfläche wächst mit ihrer Schrift.

Nutzereinstellungen und Zugänglichkeit

Wer im Browser eine größere Standardschrift einstellt, vergrößert alles in rem und em, aber nichts in px. Schriftgrößen in px ignorieren diese Einstellung. Zoom hingegen skaliert alle Einheiten. Deshalb: Schrift in rem, Layout-Breakpoints in em (sie folgen dann der Schriftgröße), Rahmen und Linien in px.

Die Ausnahme bei font-size

Ein em misst die berechnete Schriftgröße des eigenen Elements – außer bei font-size selbst: dort bezieht es sich auf die Schriftgröße des Elternelements. Deshalb ergibt font-size: 1.5em; padding: 1em einen Innenabstand von 1,5 Schriftgrößen des Elternelements, nicht von einer. Bei line-height gilt eine dritte Regel: Eine Zahl ohne Einheit wird vererbt und bei jedem Kind neu ausgerechnet, ein em-Wert dagegen wird einmal berechnet und als Länge weitergegeben.

Wo em die bessere Wahl bleibt

Aus der Kritik am Aufsummieren wird gern der Schluss gezogen, em sei überholt. Das trifft für Schriftgrößen meistens zu und für alles andere nicht. Bei Abständen, Rahmenradien und Mindestbreiten innerhalb eines Bausteins ist der Bezug auf die Schriftgröße des Bausteins genau das Gewünschte: Ein Knopf mit padding: 0.6em 1.2em behält seine Proportionen, wenn er einmal klein in einer Werkzeugleiste und einmal groß auf einer Startseite steht. Eine einzige Angabe der Schriftgröße genügt dann, um den ganzen Baustein zu skalieren.

Mit rem wäre dieselbe Angabe an den Wurzelwert gebunden und würde beim Vergrößern der Schrift des Bausteins gleich bleiben – der Knopf bekäme größere Beschriftung im gleich engen Kasten. Eine brauchbare Aufteilung lautet deshalb: die Schriftgrößen in rem, damit sie nicht aufeinander aufbauen, und die Maße innerhalb eines Bausteins in em, damit sie der Schrift folgen. Für Haarlinien und alles, was auf ein Gerätepixel ausgerichtet sein soll, bleibt die absolute Angabe richtig.

Der Wurzelwert und die Zoom-Falle

rem misst an der Schriftgröße des Wurzelelements. Ohne eigene Angabe ist das der Vorgabewert des Browsers, in aller Regel sechzehn Pixel, und genau dieser Wert lässt sich in den Einstellungen ändern. Eine verbreitete Technik setzte früher html { font-size: 62.5% }, damit ein rem gerade zehn Pixeln entspricht und sich leichter rechnen lässt. Der Bezug auf den Vorgabewert bleibt dabei erhalten, weil der Prozentwert ihn nur skaliert.

Gefährlich wird es erst, wenn stattdessen eine absolute Größe am Wurzelelement steht. Dann ist die Einstellung des Nutzers ausgehebelt, und wer größere Schrift braucht, muss die ganze Seite vergrößern statt nur den Text. Beim Vergrößern der ganzen Seite skaliert der Browser übrigens auch absolute Angaben mit – der oft gehörte Satz, feste Pixel verhinderten das Vergrößern, stimmt in dieser Form nicht. Verhindert wird nur das getrennte Anheben der Textgröße, und das ist die Einstellung, auf die sehbeeinträchtigte Leser tatsächlich angewiesen sind.

Die Einheiten, die es sonst noch gibt

Neben den dreien kennt CSS weitere relative Einheiten, die selten gebraucht werden und an ihrer Stelle nützlich sind. Eine misst an der Höhe des Kleinbuchstabens x der aktuellen Schrift, eine an der Breite der Ziffer null – beide sind für typografische Feinheiten gedacht, etwa für eine Zeilenlänge, die unabhängig von der gewählten Schrift ungefähr gleich viele Zeichen fasst. Dazu kommen die Anteile am Anzeigebereich in Breite und Höhe.

Die absoluten Einheiten aus CSS 1 – Zentimeter, Millimeter, Zoll, Punkt und Pica – sind auf dem Bildschirm über einen festen Umrechnungsfaktor an das Pixel gebunden und deshalb dort keine echten Längen. Im Druck sind sie es sehr wohl, und für ein Druck-Stylesheet ist der Punkt die naheliegende Wahl. Auf dem Bildschirm bringen sie keinen Vorteil und sind allein aus Gewohnheit noch verbreitet.

Wann welche

• Schriftgrößen: rem.
• Abstände, die mit der Schrift der Komponente wachsen sollen: em.
• Rahmen, Linien, Schatten, kleine feste Maße: px.
• Media-Query-Breakpoints: em.
• Fließende Größen zwischen zwei Grenzen: clamp() mit rem und vw.

Häufige Fragen