px, rem, em, vh — wann welche CSS-Einheit verwenden
Ein praktischer Leitfaden zur Wahl der richtigen CSS-Einheit für jede Situation: Layout, Typografie, Abstände und responsives Design.
Absolute vs. relative Einheiten
CSS-Einheiten fallen in zwei große Kategorien. Absolute Einheiten haben eine feste Größe, die sich nicht kontextabhängig ändert. Relative Einheiten leiten ihre Größe aus einer Referenz ab: einem Elternelement, der Root-Schriftgröße oder den Viewport-Dimensionen.
| Einheit | Typ | Relativ zu |
|---|---|---|
px | Absolut | CSS-Pixel (geräteunabhängig) |
pt, cm | Absolut | Physische Maßeinheit (Druck) |
rem | Relativ | Font-size von <html> |
em | Relativ | Font-size des aktuellen Elements |
% | Relativ | Dimension des Elternelements |
vh, vw | Relativ | Viewport-Höhe / -Breite |
dvh, dvw | Relativ | Dynamischer Viewport (Browser-UI eingerechnet) |
Für bildschirmbasiertes Design sollten Sie für Typografie und Abstände relative Einheiten bevorzugen. Absolute Einheiten sind für Elemente reserviert, die nie skalieren sollen: Rahmen, Umrisse und dekorative Details.
px — Pixel-Präzision
Ein CSS-Pixel ist kein physischer Bildschirmpixel. Es ist eine geräteunabhängige Einheit, definiert so, dass ein CSS-Pixel ungefähr 1/96 Zoll entspricht. Auf hochauflösenden (Retina) Displays entspricht ein CSS-Pixel 2 oder 3 physischen Pixeln — aus CSS-Sicht bleibt es jedoch immer 1px.
Wann px verwenden
- Rahmen und Umrisse:
border: 1px solid— sollen nie skalieren - Box-Shadow:
box-shadow: 0 2px 8px rgba(0,0,0,.15) - Icon-Größen bei festen Icon-Systemen
- Media-Query-Breakpoints (em ist jedoch sicherer — siehe Entscheidungsleitfaden)
Wann px NICHT verwenden
- font-size — überschreibt die Browser-Voreinstellung des Benutzers, scheitert an WCAG 1.4.4
- line-height — bevorzugen Sie einheitenlos (
1.5) oder rem - padding und margin wenn sie mit der Schriftgröße skalieren sollen
Barrierefreiheitsregel: Wenn ein Benutzer seinen Browser auf 200% Textgröße einstellt, ignorieren px-basierte Schriften das. rem-basierte Schriften berücksichtigen es. Das ist keine Option — es ist eine WCAG 2.1 Stufe AA-Anforderung.
rem — wurzelrelative Skalierung
rem steht für root em. Es ist immer relativ zur font-size des <html>-Elements. Der Browser-Standard ist 16px, also 1rem = 16px, sofern Sie das nicht ändern.
/* Standard: 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small { font-size: .75rem; } /* 12px */Da rem an der Wurzel verankert ist, summiert es sich nicht, wenn Elemente verschachtelt sind — anders als em. Das macht es zur Standardwahl für Schriftgrößen und Abstände in einem Projekt.
Der 62.5%-Trick
html { font-size: 62.5%; } zu setzen macht 1rem = 10px, was Kopfrechnen vereinfacht (1.6rem = 16px). Heute gilt das als Anti-Pattern, weil:
- Es die Browser-Schriftgröße des Benutzers überschreibt, bevor das CSS lädt
- Drittanbieter-Komponenten, die auf der 16px-Basis basieren, falsch dargestellt werden
- Moderne CSS-Tools (
clamp(), Custom Properties) Basis-10-Rechnen überflüssig machen
Verwenden Sie rem mit der Standard-16px-Basis. Teilen Sie mental durch 16 oder nutzen Sie einen px-to-rem Konverter.
em — kontextrelative Größe
em ist relativ zur font-size des aktuellen Elements. Wenn kein font-size am Element gesetzt ist, wird es vom Elternelement geerbt — deshalb kann em sich beim Verschachteln summieren.
/* Summierungsbeispiel */
.parent { font-size: 1.2em; } /* 19.2px wenn Elternteil 16px */
.child { font-size: 1.2em; } /* 23.04px — 1.2 × 19.2px */Wann em glänzt
Em ist die richtige Einheit, wenn Abstände oder Größen proportional zur eigenen font-size der Komponente skalieren sollen, nicht zur globalen Wurzel:
.btn {
font-size: 1rem;
padding: .5em 1.2em; /* skaliert mit btn font-size */
}
.btn-large {
font-size: 1.25rem;
/* padding skaliert automatisch */
}Wann em vermeiden
- Globale Schriftgrößen — rem verwenden, um Summierung im DOM zu vermeiden
- Layout-Dimensionen — rem, % oder Viewport-Einheiten verwenden
vh und vw — Viewport-Einheiten
vh (Viewport-Höhe) und vw (Viewport-Breite) entsprechen je 1% der entsprechenden Viewport-Dimension. Ideal für Layouts, die den Bildschirm füllen sollen.
.hero {
height: 100vh;
width: 100vw;
}Das 100vh-Problem auf Mobilgeräten
Bei mobilen Browsern beanspruchen Adressleiste und Navigations-Chrome Platz — werden aber nicht von 100vh abgezogen. Das führt dazu, dass ein 100vh-Element über den sichtbaren Bereich hinausragt und eine ungewollte Scrollleiste erscheint.
Die moderne Lösung: dvh
Die dvh-Einheit (dynamic viewport height) wurde eingeführt, um dieses Problem zu lösen. Sie aktualisiert sich, wenn die Browser-UI erscheint oder verschwindet:
.hero {
height: 100vh; /* Fallback für ältere Browser */
height: 100dvh; /* dynamisch — berücksichtigt einklappbares Browser-Chrome */
}Fügen Sie immer den vh-Fallback ein. Weitere nützliche Viewport-Einheiten: svh, lvh, vmin und vmax.
Schnelle Konvertierungstabelle (Basis 16px)
Wenn Sie den Pixel-Wert kennen, aber das rem-Äquivalent benötigen, teilen Sie durch 16:
| px | rem | em (1:1) |
|---|---|---|
| 8 | 0.5rem | 0.5em |
| 12 | 0.75rem | 0.75em |
| 14 | 0.875rem | 0.875em |
| 16 | 1rem | 1em |
| 18 | 1.125rem | 1.125em |
| 20 | 1.25rem | 1.25em |
| 24 | 1.5rem | 1.5em |
| 32 | 2rem | 2em |
| 48 | 3rem | 3em |
| 64 | 4rem | 4em |
Ein ganzes Stylesheet konvertieren? Nutzen Sie den CSS-Einheiten-Konverter.
Entscheidungsleitfaden
Im Zweifelsfall nutzen Sie diese Tabelle als Schnellreferenz:
| Eigenschaft / Anwendungsfall | Empfohlene Einheit |
|---|---|
| Schriftgröße | rem |
| Padding / Margin (global) | rem |
| Padding innerhalb einer Komponente | em |
| Rahmen, Umrisse, Box-Shadow | px |
| Layout-Spalten / -Breiten | % oder fr (CSS Grid) |
| Hero- / Vollbild-Abschnitte | dvh mit vh-Fallback |
| Media-Query-Breakpoints | em (barrierefreier) oder rem |
| Zeilenhöhe | Einheitenlos (1.5) oder rem |
| Responsive Schriftgröße (fluid) | clamp() mit rem-Werten |
Fluid-Typografie mit clamp() ist ein leistungsstarkes Pattern. Nutzen Sie den Font Size Clamp Generator, um diese Werte visuell zu erstellen.