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.

EinheitVoller Name / Englischer NameEntsprichtNützlich für
cmZentimeter / Centimetres37,8px oder 0.394inPrintmedien
mmMillimeter / Millimetres1/10cmPrintmedien
QViertel-Millimeter / Quarter-millimetres1/4mmPrintmedien
inZoll / Inches96px oder 2,54cmPrintmedien
pcPica / Picas1/6inPrintmedien
ptPunkt / Points1/72inPrintmedien
px*Pixel / Pixels1/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.

EinheitEntsprichtNützlich für
emFont-Größe des Parents oder des aktuellen Elements (in Kontext wie der width: des Selbigen)Padding & Margin rund um Texte
remFont-Größe des Root ElementsFont-Size und Elemente die einmalig skalieren sollen
chDer Breite der Zahl „0“ (Unicode 30) im aktuellen FontAufbrechen von Fließtexten (Empfehlung: 50 – 70ch für guten Lesefluss)
lhLinienhöhe des Elements basierend auf dem ersten Font innerhalb des ElementsZentrieren von Element innerhalb einer Zeile
vw1% der Breite des ViewportsTypographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vh1% der Höhe des ViewportsTypographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vmin1% der kleineren Seite des ViewportsTypographie und Elemente die dynamisch auf Fenstergröße reagieren sollen
vmax1% der größeren Seite des ViewportsTypographie 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!