HandyTools Hub

← Alle Anleitungen

CSS-Einheiten erklärt: px, rem, em, % und wann welche die richtige Wahl ist

2026-08-24

font-size: 16px und font-size: 1rem können identisch rendern — bis sie es nicht mehr tun. Die gewählte Einheit ist keine Geschmacksfrage, sondern eine Auflösungsregel: Sie entscheidet, wogegen die Länge aufgelöst wird, und damit, was passiert, wenn der Browser zoomt, die Root-Schriftgröße sich ändert, das Elternelement seine Größe ändert oder der Viewport es tut. Die meisten CSS-Bugs, die wie „das Layout brach ohne Grund“ aussehen, sind Einheiten-Bugs. Diese Anleitung gibt Ihnen eine Entscheidungstabelle, um gleich die richtige zu wählen.

Absolut vs. relativ

Jede CSS-Länge ist entweder absolut oder relativ:

  • Absolute Einheiten (px und die druckorientierten pt, cm, mm, in) sind fix. 16px sind immer 16 CSS-Pixel. Sie skalieren mit nichts.
  • Relative Einheiten lösen gegen etwas anderes auf: die Root-Schriftgröße (rem), die eigene Schriftgröße des Elements (em), das Elternelement (%), den Viewport (vw, vh, dvh) oder die Schriftmaße (ch, ex).

In dem Moment, in dem Zoom oder Layout sich ändert, bleiben absolute Einheiten stehen und relative bewegen sich. Genau darum geht es in dieser Anleitung — zu entscheiden, welches Verhalten jede Eigenschaft will.

px: Die Design-Basis

Pixel sind die Design-Einheit: Die meisten Designs werden in px übergeben, und 1px ist die Schärfe-Untergrenze für Rahmen, Haarlinien-Trenner und Box-Shadow-Offsets.

border: 1px solid #ddd;        /* immer eine scharfe Linie */
box-shadow: 0 1px 2px rgba(0,0,0,0.1);

Die Falle ist, px auf Text anzuwenden. font-size: 14px ignoriert die Schriftgrößen-Präferenz des Nutzers und die Zoom-Einstellungen des Browsers — weshalb px-Text die klassische Barrierefreiheits-Beschwerde ist. Faustregel: px für Struktur und Effekte, rem für Text.

rem: Die am Root verankerte Skala

rem ist „Root-em“: Ein rem entspricht der font-size des <html>-Elements. Ändern Sie das Root, skaliert jedes rem im Dokument mit:

html { font-size: 100%; }       /* standardmäßig 16px */
.title { font-size: 2rem; }     /* 32px, wenn Root 16px ist */
.body  { font-size: 1rem; }     /* 16px */

Weil es an einen Root-Wert verankert ist, gibt rem Ihnen eine dokumentweite Skala: Heben Sie das Root an, skaliert das ganze Typografie-System. Und weil Browser und Nutzerpräferenzen dieses Root setzen, respektiert rem-Text die Schriftgrößeneinstellungen des Nutzers — der barrierefreie Standard. Deshalb empfehlen moderne CSS-Resets, Text in rem zu bemaßen. (Rechnen Sie zwischen den beiden unterwegs um mit dem Px-zu-Rem-Konverter.)

em: Relativ zum Element — und es potenziert sich

em ist relativ zur eigenen font-size des Elements. Auf dem Element selbst ist es elegant: padding: 0.5em an einem Button skaliert sein Padding mit seinem Text.

Die Gefahr ist die Potenzierung in verschachtelten Elementen. em bei Nachfahren wird gegen die Schriftgröße des nächsten Vorfahren gemessen, und die em der Vorfahren multiplizieren sich:

/* Jede Verschachtelungsebene multipliziert: 16px → 25,6px → 41px → 65px */
div { font-size: 1.6em; }  /* in einem 16px-Elternteil → 25,6px */
div div { font-size: 1.6em; }  /* 41px */
div div div { font-size: 1.6em; }  /* 65px */

Eine Regel, die wie „1,6ד aussieht, wird beim Verschachteln zu „1,6ⁿד. em ist großartig für komponenteninternen Abstand, der mit dem Text dieser Komponente skalieren soll; für eine globale Typoskala ist es gefährlich, wo rem der sicherere Anker ist.

%: Zwei sehr verschiedene Regeln

% ist die überladenste Einheit, weil ihre Bedeutung von der Eigenschaft abhängt:

  • Bei font-size ist % relativ zur geerbten Schriftgröße: font-size: 150% = 1,5 × Schriftgröße des Elternteils (gleiches Verhalten wie 1.5em).
  • Bei Layout-Eigenschaften (width, margin, padding, top/left) ist % relativ zum Containing Block — und Prozentsätze von Breite vs. Höhe unterscheiden sich (Höhen-Prozentsätze sind oft ohne explizite Elternhöhe nicht auflösbar).
.child { width: 50%; }       /* halbe Breite des Elternteils */
.parent { font-size: 120%; } /* 1,2 × Schriftgröße des Großelternteils */

% für Breiten/Margins ist also das Brot-und-Butter des fluiden Layouts, und % für font-size ist effektiv em — wählen Sie danach, was Sie tatsächlich meinen.

Viewport-Einheiten: vw, vh, dvh

Viewport-Einheiten folgen dem Browserfenster: 1vw = 1 % der Viewport-Breite, 1vh = 1 % der Viewport-Höhe, vmin/vmax das Kleinere/Größere der beiden.

.hero { height: 100vh; }     /* volle Fensterhöhe */
.fluid { font-size: clamp(1rem, 4vw, 2.5rem); }  /* fluide Typografie, begrenzt */

Zwei praktische Hinweise:

  • 100vh und Mobil. Auf Telefonen frisst die Adressleiste einen Teil des „Viewports“, 100vh kann also überschießen und abschneiden. dvh (dynamische Viewport-Höhe) folgt dem sichtbaren Viewport und ist die moderne Lösung: height: 100dvh.
  • Fluide Typografie. vw-basierte font-size mit clamp() ergibt Typografie, die mit der Bildschirmbreite skaliert, aber in Grenzen bleibt — der moderne Ersatz für mehrere Breakpoint-Hack-Zeilen.

ch, ex und der Rest

ch entspricht der Breite des Zeichens 0 in der aktuellen Schrift — ideal für monospace-artige Bemaßung: width: 80ch an einem <code>-Block ergibt eine angenehme Zeilenlänge in Zeichen. ex ist die Höhe eines x; selten nützlich. Andere (cm, mm, in, pt) zählen nur für Print-Stylesheets.

Eine Einheit wählen: Eine Entscheidungstabelle

Was Sie bemaßenEinheitWarum
Text (font-size)remRespektiert Nutzereinstellungen; skaliert mit dem Root
Rahmen, Schatten, scharfe LinienpxFix und scharf bei jedem Zoom
Abstand in einer Komponente, der mit ihrem Text skaliertemSkaliert mit dieser Komponente — aber Vorsicht bei Verschachtelung
Breiten / fluides Layout% (oder flex/grid)Folgt dem Container
Vollbild-Heroes, Overlaysvw/dvhFolgt dem sichtbaren Viewport
Monospace-Zeilenlängench„Zeichen“ ist die richtige Einheit für Textspalten

Die sauberste moderne Strategie: rem für Typografie, px für Rahmen und Schatten, % oder Grid/Flex-Tracks für Layout, em nur innerhalb eigenständiger Komponenten und dvh für alles, was den Bildschirm füllen muss.

Kurzreferenz

  • Absolute Einheiten (px, pt, cm, mm) sind fix; relative lösen gegen Elternteil, Root oder Viewport auf.
  • rem = Root-Schriftgröße — dokumentweite Skala, respektiert Nutzereinstellungen. Standard für Text.
  • em = eigene Schriftgröße des Elements; potenziert sich in verschachtelten Elementen (1,6ⁿ), großartig in Komponenten, riskant für eine globale Skala.
  • % ist überladen: bei font-size bedeutet es „× geerbte Schriftgröße“ (wie em); bei width/margin „× Containing Block“.
  • 1vw/1vh = 1 % der Viewport-Breite/-Höhe; nutzen Sie dvh für mobiles Vollbild (Adressleisten).
  • ch = Breite von 0; ideal für Zeilenlängen in Monospace.
  • Strategie: rem-Typografie + px-Effekte + %/Flex/Grid-Layout + em in Komponenten + dvh für Vollbild.

Um ein Design von px auf rem zu bringen, ohne zu rechnen, konvertiert der Px-zu-Rem-Konverter jeden Wert und zeigt die Skala. Einheiten sind die stille Schicht unter jedem Layout, jeder Grid und jedem Verlauf, den Sie schreiben — bringen Sie die Auflösungsregel in Ordnung, und das Layout hält bei jeder Zoomstufe, die Sie nie getestet haben.

Verwandte Tools