CSS kennt heute weit mehr Maßeinheiten als px, em und Prozent. Das Nachschlagewerk CSS Units sammelt 63 davon auf einer Seite und rechnet vor, was jede Einheit auf Ihrem Bildschirm gerade ergibt. Für Frontend-Teams wird damit sichtbar, warum die Wahl zwischen rem, dvh und cqi über Lesbarkeit und Barrierefreiheit entscheidet.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Die Zahl der CSS-Einheiten ist still auf über 60 gewachsen. Der ukrainische Entwickler Mykola Ptushchuk trug sie im Feldführer CSS Units zusammen und zeigt jede mit einer Live-Messung direkt im Browserfenster.[1]
Das Wichtigste in Kürze
- 63 CSS-Einheiten in sieben Gruppen, von absoluten Werten bis zu Container- und Viewport-Einheiten, erklärt auf einer einzigen Seite.
- Live-Umrechnung im Browser: 1rem, 1vw oder 1ch erscheinen sofort als konkreter Pixelwert für Ihr Gerät.
- Kostenlos nutzbar, dazu als PDF zum Herunterladen.
- Die richtige Einheit entscheidet über flüssige Layouts und die vom Barrierefreiheitsstärkungsgesetz verlangte Textskalierung.
Was steckt hinter dem Nachschlagewerk CSS Units?
CSS Units ist ein kostenloses Online-Nachschlagewerk, das 63 CSS-Maßeinheiten in sieben Kategorien erklärt und jede live im Browser misst. Die Seite ordnet die Einheiten nach absoluten Werten wie px und pt, schriftbezogenen wie em, rem und ch sowie Viewport-, Container- und Spezialeinheiten für Winkel oder Auflösung.
Der besondere Kniff ist die Live-Umrechnung: Wie viele Pixel gerade auf 1rem, 1vw oder 1ch entfallen, hängt vom Gerät ab und erscheint direkt als konkreter Wert auf der Seite. Für die Offline-Nutzung steht die Übersicht als PDF bereit. Dass der CSS-Werkzeugkasten so schnell wächst, zeigte zuletzt auch der State of CSS 2026.
Warum reichen Pixel und Prozent heute nicht mehr?
Moderne Layouts brauchen Einheiten, die auf Gerät und Container reagieren: dynamische Viewport-Einheiten wie dvh gegen die springende Mobile-Adressleiste, Container-Einheiten wie cqi für Komponenten, die sich an ihrem Platz statt am Fenster ausrichten.
Die alte Einheit vh maß die volle Fensterhöhe und ignorierte die ein- und ausblendende Adressleiste mobiler Browser, was Inhalte unter den Bildschirmrand schob. Die dynamischen Viewport-Einheiten svh, lvh und dvh beheben das Problem, indem sie den kleinen, den großen oder den momentanen Sichtbereich messen. Verwandt ist die neue Eigenschaft, mit der der Browser die Schrift selbst auf Containerbreite skaliert.
Container-Einheiten gehen noch weiter: cqw, cqi und ihre Verwandten bemessen ein Element an seinem umgebenden Container statt am Viewport. Eine Karte skaliert damit gleich, ob sie in der Seitenleiste oder in der Hauptspalte sitzt. Beide Einheiten-Familien zählen seit 2023 zum Baseline-Standard moderner Browser, ähnlich wie die fluide Typografie, die Utopia aus clamp() berechnet.
Die Einheit ist keine Formalie am Rand des Stylesheets, sondern die Stellschraube zwischen einem Layout, das sich anpasst, und einem, das bricht. Ein Team, das rem, dvh und cqi bewusst wählt, spart sich später den Streit mit dem Zoom und mit der Barrierefreiheit.
— Michael Dobler, Herausgeber Dr. Web
Warum die Einheit über Barrierefreiheit entscheidet
Die Schriftgröße bleibt starr. Die im Browser gewählte Grundschriftgröße wird übergangen, die Vergrößerung auf 200 Prozent kann brechen.
Die Schrift skaliert mit der Nutzereinstellung. Das erfüllt WCAG-Erfolgskriterium 1.4.4 und damit die Vorgabe des Barrierefreiheitsstärkungsgesetzes.
Was bedeutet die Einheitenwahl für die Barrierefreiheit?
Für barrierefreie Websites zählt die Schriftgröße in rem oder em statt in px: relative Einheiten übernehmen die vom Nutzer eingestellte Grundschriftgröße, feste Pixelwerte nicht.
Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Websites und digitale Dienste auf die Norm EN 301 549, die wiederum die WCAG 2.1 auf Stufe AA verbindlich macht.[2] Erfolgskriterium 1.4.4 verlangt, dass sich Text bis auf 200 Prozent vergrößern lässt, ohne dass Inhalt verloren geht. Feste Pixel-Schriftgrößen hebeln die im Browser gewählte Grundschriftgröße aus und riskieren genau diesen Verstoß, ein Risiko, das schon bei der Übergabe von Design zu Entwicklung entsteht.
Als Referenz dient vielen die MDN-Dokumentation, verteilt über viele Einzelseiten. CSS Units bündelt die Einheiten auf einer Seite und macht die Umrechnung für den schnellen Blick im Arbeitsalltag greifbar.
Für den Einstieg lohnt der Abgleich des eigenen Stylesheets: Schriftgrößen auf rem umstellen, volle Höhen von vh auf dvh heben und Komponenten-Layouts auf Container-Einheiten prüfen. Das Nachschlagewerk liefert die Referenz, die Umsetzung bleibt Handarbeit im Code.
Quellen
[1] CSS Units (Mykola Ptushchuk): „CSS Units: a field guide to CSS measurement“
[2] Bundesministerium der Justiz: Barrierefreiheitsstärkungsgesetz (BFSG)
Mehr Newshunger?
- CSS border-area: Farbverlauf-Rahmen ohne den border-image-Trick
- field-sizing in CSS: Wie Formularfelder ohne JavaScript mitwachsen
- CSS-Scroll-Animationen 2026: Wie der Browser die Scroll-Bibliothek ersetzt
- Dark Mode lässt Schrift schwerer wirken: Dagegen hilft die Grade-Achse
- WebGPU im Browser: Wie Compute-Shader Bewegung in Echtzeit-Effekte verwandeln
