CSS Einheiten im Überblick

Die wichtigsten Einheiten für den Alltag als Frontend-Entwickler in einem CSS Cheatsheet mit praktischen Tipps für die Anwendung im eigenen Stylesheet

Absolute Einheiten

Absolute Einheiten können nicht durch den Entwickler verändert werden. Sie sind starr vordefiniert, mit einer großen Ausnahme.

Einheit	Voller Name / Englischer Name	Entspricht	Nützlich für
cm	Zentimeter / Centimetres	37,8px oder 0.394in	Printmedien
mm	Millimeter / Millimetres	1/10cm	Printmedien
Q	Viertel-Millimeter / Quarter-millimetres	1/4mm	Printmedien
in	Zoll / Inches	96px oder 2,54cm	Printmedien
pc	Pica / Picas	1/6in	Printmedien
pt	Punkt / Points	1/72in	Printmedien
px*	Pixel / Pixels	1/96in*	Hardcoden von bestimmten Größen

Neben dem Pixel werden absolute Einheiten im Web selten benutzt, da die Übersetzung dieser Einheiten vom physischen ins digitale ziemlich unintuitiv ist.

Sonderfall: Der CSS Pixel

Pixel stellen eine Besonderheit dar, da diese in Printmedien 1/96in darstellen, aber am PC den tatsächlichen physischen Pixel approximieren und somit eine semi-relative Einheit darstellen.

Am PC sind CSS Pixel daher meist äquivalent zu einem physischen Pixel.

Da aber moderne Bildschirme stetig schrumpfen kann durch Browser-Zoom, OS-level Zoom, oder sonstiges Scaling einen CSS-Pixel durch mehrere physische Pixel gerendert werden.

Das passiert oft bei Laptops, welche heutzutage oft mit einem 125% – 250% Zoom auf Windows-Ebene geliefert werden, weil einzelne Pixel auf einem 17in 4K-Display kaum sichtbar sind.

Im mobilen Umfeld werden Smartphones und Tablets von Haus aus mit einer sogennanten „pixel ratio“ zwischen 2 und 3 ausgeliefert. Diese beschreibt wieviele physische Pixel durch einen CSS-Pixel erfasst werden. Beispielweise entspricht ein CSS Pixel auf einem Samsung Galaxy Note20 2,625 tatsächlichen Pixel auf dem Bildschirm, weil ein einzelner physischer Pixel auf diesen Geräten kaum erkennbar wäre.

Allgemein kann die globale Variable “Window.devicePixelRatio” Aufschluss darüber geben wieviele physische Pixel durch einen CSS Pixel abgebildet werden.

Relative Einheiten

Relative Einheiten sind abhängig von dritten Fixwerten dynamisch.

Einheit	Entspricht	Nützlich für
em	Font-Größe des Parents oder des aktuellen Elements (in Kontext wie der width: des Selbigen)	Padding & Margin rund um Texte
rem	Font-Größe des Root Elements	Font-Size und Elemente die einmalig skalieren sollen
ch	Der Breite der Zahl „0“ (Unicode 30) im aktuellen Font	Aufbrechen von Fließtexten (Empfehlung: 50 – 70ch für guten Lesefluss)
lh	Linienhöhe des Elements basierend auf dem ersten Font innerhalb des Elements	Zentrieren von Element innerhalb einer Zeile
vw	1% der Breite des Viewports	Typographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vh	1% der Höhe des Viewports	Typographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vmin	1% der kleineren Seite des Viewports	Typographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vmax	1% der größeren Seite des Viewports	Typographie und Elemente die dynamisch auf Fenstergröße reagieren sollen

Neben diese geläufigen Einheiten finden sich künftig im CSS4 Standard auch exotische Einheiten, wie ex (Höhe der kleinen Buchstaben im aktuellen Font), ic (Größe des „水“ Symbols, Unicode 6C34, im aktuellen Font), deren root-Varianten, und viele mehr.

Persönlich finde ich in diesem Cheatsheet alle Einheiten die für meinen Arbeitsalltag im Frontend relevant sind wieder, aber wer seine Horizonte erweitern will und des Englischen mächtig ist kann sich unter drafts.csswg.org/css-values/#lengths alle exotischen Einheiten samt technischer Definition aneignen.

Haben Sie noch Fragen oder wünschen eine Beratung? Nehmen Sie gerne mit uns Kontakt auf oder besuchen Sie unsere Webseite!