CSS-Einheiten-Konverter Online
Zwischen px, rem, em, vw, vh und weiteren CSS-Einheiten umrechnen, im Browser.
Click any value to copy
Warum dieses Tool nutzen
Responsive Design ohne manuelle Berechnungen
Alle CSS-Einheiten
px, rem, em, %, vw, vh, pt und mehr. Sofortige Umrechnung zwischen beliebigen Paaren.
Konfigurierbare Basis
Passe die Basis-Schriftgröße an, um präzise rem/em-Werte für dein Projekt zu berechnen.
Sofortige Verarbeitung
Echtzeitergebnisse während der Eingabe. Keine Buttons, kein Warten.
Keine Anmeldung
Tägliches Hilfswerkzeug, sofort verfügbar ohne Konten oder Installation.
So funktioniert es
Drei Schritte, kein Aufwand
Wert eingeben
Gib den numerischen Wert ein und wähle die Ausgangseinheit (z. B. 24 px). Passe die Basis-Schriftgröße an, wenn sie von 16 px abweicht.
Alle Äquivalente erhalten
Der Konverter berechnet sofort das Äquivalent in rem, em, %, vw, pt und anderen gängigen CSS-Einheiten.
Wert in deinem CSS verwenden
Kopiere den benötigten Wert direkt in dein Stylesheet. Keine manuellen Berechnungen, keine Fehler.
FAQ
Noch Fragen?
Verwende px für Werte, die sich nicht nach Nutzereinstellungen skalieren sollen: dünne Ränder (1 px), Schatten, absolute Positionen. Verwende rem für Schriftgrößen und Abstände, die die Barrierefreiheitspräferenzen des Nutzers respektieren sollen: Wenn ein Nutzer die Basis-Schriftgröße im Browser erhöht (die meisten Screenreader und sehbehinderte Nutzer tun das), skalieren rem-Werte automatisch. Verwende em für Werte relativ zur Schriftgröße des übergeordneten Elements: nützlich in Komponenten, die ihre internen Proportionen unabhängig vom Kontext beibehalten müssen.
16 px als Basis-Schriftgröße wurde von Webbrowsern in den späten 1990er-Jahren festgelegt, abgeleitet von typischen Monitorauflösungen der damaligen Zeit (72–96 DPI) und Standards zur Textlesbarkeit auf Bildschirmen. Es entspricht ungefähr 12 typografischen Punkten (12 pt), der Standardgröße für Fließtext in gedruckten Dokumenten seit der Zeit Gutenbergs. Das W3C übernimmt es als Ausgangswert für die font-size-Eigenschaft.
Die WCAG-Spezifikation 1.4.4 (Text vergrößern) verlangt, dass Text auf 200 % vergrößert werden kann, ohne Inhalte oder Funktionalität zu verlieren. Wenn du px für Schriftgrößen verwendest, skaliert der Text nicht, wenn der Nutzer die Basisgröße in den Browsereinstellungen ändert. Wenn du rem verwendest, skaliert der Text automatisch. Darum empfehlen Barrierefreiheitsrichtlinien rem für font-size und line-height, akzeptieren aber px für Ränder und dekorative Elemente.
vw (Viewport-Breite) und vh (Viewport-Höhe) sind Prozentwerte der Browserfenstergröße. 1 vw = 1 % der Fensterbreite. Für fluid Typography wird die CSS-Funktion clamp() verwendet: font-size: clamp(1rem, 2.5vw, 2rem) definiert eine Mindestgröße (1 rem), eine bevorzugte Größe, die mit dem Viewport skaliert (2,5 vw), und ein Maximum (2 rem). Das erzeugt Text, der mit der Bildschirmgröße gleichmäßig wächst, ohne abrupte Sprünge, was Media Queries für die Typografie überflüssig macht.
CSS hat absolute physikalische Einheiten: cm, mm, in, pt und pc. Das Problem ist, dass diese Einheiten auf Bildschirmen nicht ihren tatsächlichen physikalischen Maßen entsprechen. Auf hochauflösenden Displays (Retina, 4K) kann 1 cm in CSS je nach Gerät und deklariertem DPI physikalisch 0,8 cm oder 1,2 cm messen. Nur in Print-Media-Queries entsprechen cm und mm exakt der physikalischen Maßeinheit. Deshalb verwenden Web-Designerinnen und -Designer px, rem, em und relative Einheiten und reservieren absolute Einheiten für Druckstile.
CSS-Einheiten: Spezifikation, Geschichte und der 62,5-%-Trick
Die CSS-Einheiten-und-Werte-Spezifikation (CSS Values Level 3) wurde 2015 vom W3C veröffentlicht und standardisierte Viewport-Einheiten (vw, vh, vmin, vmax), die Browser seit 2012 experimentell implementiert hatten. Viewport-Einheiten lösen ein grundlegendes Problem im responsiven Design: Layouts und Typografien zu erstellen, die sich ohne Media Queries an die Bildschirmgröße anpassen. CSS Values Level 4 (im fortgeschrittenen Entwurfsstatus) führt Container-Query-Einheiten (cqw, cqh, cqi, cqb, cqmin, cqmax) ein, die Prozentwerte des nächsten CSS-Containers statt des Viewports sind, seit Ende 2022 in allen wichtigen Browsern verfügbar.
Der 62,5-%-Trick ist eine historische Technik zur Vereinfachung der rem-Nutzung: Durch Setzen von font-size: 62,5 % auf das html-Element (entspricht 10 px bei einer 16-px-Basis) werden rem-Berechnungen trivial (1,6 rem = 16 px, 2,4 rem = 24 px). Er wurde um 2011 von Jonathan Snook im Kontext des wachsenden responsiven Designs populär gemacht. Diese Technik hat jedoch ein Barrierefreiheitsproblem: Wenn ein Nutzer eine andere Basis-Schriftgröße als 16 px in seinem Browser konfiguriert hat, passt das 62,5 % diese falsch an und bricht die Skalierung. Deshalb raten moderne Barrierefreiheitsrichtlinien von dieser Technik ab und empfehlen, die html-Schriftgröße unverändert zu lassen und rem direkt zu verwenden.
CSS Values Level 4 führt außerdem typografisch-relative Einheiten ein: cap (Versalhöhe), ch (Breite des 0-Glyphs), ic (Breite des CJK-Wasserzeichens 水), lh (Zeilenhöhe des Elements), rlh (Zeilenhöhe des Root-Elements), ex (x-Höhe). Diese Einheiten ermöglichen typografisch proportionale Abstände, ohne auf feste Zahlenwerte angewiesen zu sein. Die ch-Einheit ist besonders nützlich für die Einstellung maximaler Spaltenbreiten für Text (max-width: 65ch ist ein optimales Lesbarkeitsmaß gemäß typografischer Forschung, was ungefähr 65 Zeichen pro Zeile entspricht).