CSS-Einheiten – Ein Vollständiges Cheat Sheet

erstellt am: 19.10.2025 | Kategorien: Allgemein / Webentwicklung | Schlagworte: css • Einheiten • Responsive

Oh je die ganzen CSS Einheiten. Das ist mittlerweile echt viel. Dieses Cheatsheet hilft vielleicht.

Überblick: Einheiten-Kategorien

Kategorie	Beschreibung	Beispiele
Absolute Längeneinheiten	fester Maßstab, unabhängig von Text- oder Viewportgröße	px, cm, mm, Q, in, pt, pc
Relative Längeneinheiten (typografisch)	abhängig von Schriftgröße oder Rootgröße	em, rem, ex, ch, cap, ic, lh, rlh
Relative Längeneinheiten (Viewport-bezogen)	abhängig vom Browserfenster oder Container	vw, vh, vmin, vmax, svw, svh, lvw, lvh, dvw, dvh, vi, vb
Prozentuale Einheiten	relativ zum jeweiligen Eltern-Container	%
Zeit-Einheiten	für Animationen und Transitions	s, ms
Winkel-Einheiten	für Rotation, Grad- oder Bogenmaße	deg, rad, grad, turn
Auflösungs-Einheiten	für Medienabfragen und Rasterdichten	dpi, dpcm, dppx
Frequenz-Einheiten	selten, z. B. für Audio-CSS (deprecated)	Hz, kHz
Flex-Einheit	für CSS Grid und Flexbox-Fraktionen	fr

Absolute Längeneinheiten

Einheit	Beschreibung	Verhältnis zu px (bei 96 dpi)	Typische Verwendung	Empfehlung
px	Pixel (CSS-Pixel, unabhängig von echten Display-Pixeln)	1 px = 1/96 in	Rahmen, Schatten, Icons, Linien	Sehr verbreitet – präzise, nicht skalierend
cm	Zentimeter	1 cm ≈ 37.8 px	Drucklayouts, Print-CSS	Nur für Druck
mm	Millimeter	1 mm ≈ 3.78 px	Drucklayouts	Selten in Web-UIs
Q	¼ Millimeter	1 Q ≈ 0.945 px	Japanische Typografie, Druck	Spezialfall
in	Zoll (Inch)	1 in = 96 px	Drucklayouts	Nur für Media-Print
pt	Punkt (1/72 in)	1 pt ≈ 1.333 px	Typografische Systeme, Druck	Eher Print
pc	Pica (12 pt)	1 pc ≈ 16 px	Typografische Systeme	Print-spezifisch

Praxis:
Absolute Einheiten sind für Bildschirm-Layouts unzuverlässig, da Pixel-Dichten variieren. Verwende sie nur im Print- oder PDF-Kontext.

Typografisch relative Einheiten

Einheit	Relativ zu	Typische Verwendung	Vorteil	Nachteil
em	Schriftgröße des aktuellen Elements	Padding, Border-Radius, lokale Abstände	Skaliert mit Textgröße	Kaskadiert – kann sich aufaddieren
rem	Schriftgröße des Root-Elements (html)	Fontgrößen, globale Abstände	Einheitlich über gesamte Seite	Nicht lokal anpassbar
ex	Höhe des Kleinbuchstabens „x“	Typografische Feinanpassung	Schrift-proportional	Je nach Font sehr variabel
ch	Breite der Ziffer „0“	Textspalten, Input-Breite	Leselängen-Steuerung	Fontabhängig
cap	Versalhöhe (Großbuchstabenhöhe)	Typografie, Zeilenraster	Präzise für Großschrift-Design	Geringe Browser-Unterstützung
ic	Breite eines ideografischen Zeichens	CJK-Typografie	Asien-optimierte Layouts	Spezialfall
lh	Aktuelle line-height des Elements	Vertikale Rhythmik	Dynamisch typografisch korrekt	Noch wenig genutzt
rlh	line-height des Root-Elements	Vertikale Layoutsysteme	Einheitliche Basis für Text-Rastersysteme	Kaum unterstützt (noch experimentell)

Viewport- und Container-relative Einheiten

Einheit	Bedeutung	Typische Verwendung	Bemerkung
vw	1 % der Viewport-Breite	Hero-Sections, volle Breite	Skaliert mit Fenstergröße
vh	1 % der Viewport-Höhe	Vollbild-Elemente	Kann mobile Browser-UI überlappen
vmin	kleinerer Wert von vw / vh	Quadratische Elemente	Für responsive Quadrate
vmax	größerer Wert von vw / vh	Titel, Hintergründe	selten nötig
svw / svh	Small Viewport – exkl. Browserleisten	Mobile-freundliche Höhen	neu seit 2023
lvw / lvh	Large Viewport – inkl. Browserleisten	präzise Kontrolle	neu, experimentell
dvw / dvh	Dynamic Viewport – wechselt je nach UI	mobile sicher	empfohlen für moderne UIs
vi / vb	Inline/Block-bezogen (Schreibmodus)	vertikale Schriftsysteme	CJK, vertikale Layouts

Praxis:
Für hero-Bereiche oder Fullscreen-Layouts → 100dvh
Für responsive Überschriften → font-size: clamp(1rem, 5vw, 3rem)

Prozentuale Einheiten

Einheit	Relativ zu	Verwendung	Erklärung
%	Eltern-Container	Breiten, Höhen, Padding, Transform	Ermöglicht fluides Layout; Kontextabhängig (bei height tricky!)

Zeit-Einheiten

Einheit	Bedeutung	Verwendung
s	Sekunden	transition-duration, animation-delay
ms	Millisekunden	Feine Abstimmung

Tipp: Für Animationen lieber ganze Sekunden (0.3 s statt 300 ms) für bessere Lesbarkeit.

Winkel-Einheiten

Einheit	Bedeutung	Beispiel
deg	Grad (0–360)	transform: rotate(45deg)
rad	Radiant	1rad ≈ 57.3°
grad	Gon	100grad = 90deg
turn	Umdrehungen	rotate(0.25turn) = 90°

Tipp: Für Animationen sind turn-Werte oft am intuitivsten.

Auflösungs-Einheiten

Einheit	Bedeutung	Verwendung
dpi	dots per inch	Medienabfragen (min-resolution: 300dpi)
dpcm	dots per cm	Alternative metrisch
dppx	device pixel ratio	2dppx = Retina

Weitere / seltene Einheiten

Einheit	Beschreibung	Verwendung
fr	Fraction unit (CSS Grid)	grid-template-columns: 1fr 2fr → relative Anteile
Hz / kHz	Frequenz (veraltet)	Früher für Audio-CSS
number	Einheitenlos	Skalierungsfaktoren, z. B. opacity: 0.8, line-height: 1.5

💡 Praxis-Empfehlungen

Kontext	Einheit	Warum
Schriftgrößen	rem	global konsistent
Innenabstände	em	wächst mit Text
Außenabstände	rem	gleichmäßiges Layout-Raster
Rahmen, Linien	px	pixelgenau
Border-Radius	em oder px	wahlweise skalierend oder fix
Layoutbreiten	rem oder %	skalierbar
Icons	rem	konsistent
Icon-Abstand	em	proportional zum Text
Hero-Elemente	vw, vh, dvh	viewport-abhängig
Breakpoints	em	barrierefrei skalierend
Spaltenbreite	ch	Leselänge steuerbar
Grid-Verhältnisse	fr	einfache Verteilung
Animationen	s / ms	klare Dauer
Drehungen	deg / turn	intuitiv
Auflösung	dppx	High-DPI-Anpassung

Faustformel

Innen = em · Außen = rem
Pixel = Präzision
Viewport = Responsivität
Zeichen = Lesbarkeit

Merke

• em = „mit mir“ (lokal mitwachsende Maße)
• rem = „Root-Maß“ (systemweit gleich)
• px = „präzise“ (optisch konstant)
• % = „proportional“ (Container-abhängig)
• vw/vh = „Viewport“ (bildschirmbezogen)
• ch = „character“ (leseoptimiert)
• fr = „fraction“ (Layoutanteile)

Als erster einen Kommentar schreiben.