CSS-Einheitenumrechner: px, rem, em und mehr

Was sind CSS-Einheiten?

CSS-Einheiten legen die Größe von Elementen auf einer Webseite fest. Sie lassen sich in zwei Kategorien einteilen: absolute Einheiten (px, cm, mm, in, pt, pc) mit festen physischen Größen und relative Einheiten (rem, em, vw, vh, vmin, vmax, %), die je nach Kontext wie Schriftgröße oder Viewport-Abmessungen skalieren.

Modernes responsives Design setzt stark auf relative Einheiten. Die Einheit rem skaliert mit der Schriftgröße des Wurzelelements (in der Regel 16px), em skaliert mit der Schriftgröße des übergeordneten Elements, und Viewport-Einheiten (vw, vh) skalieren mit dem Browserfenster, sodass Layouts geräteübergreifend fließend bleiben.

So funktioniert die Umrechnung von CSS-Einheiten

Für die Umrechnung zwischen CSS-Einheiten muss der Basiskontext bekannt sein: die Wurzel-Schriftgröße für rem, die Schriftgröße des übergeordneten Elements für em und die Viewport-Abmessungen für vw/vh. Die meisten Umrechnungen erfolgen durch einfache Multiplikation oder Division.

• px zu rem — den Pixelwert durch die Wurzel-Schriftgröße (Standard 16px) teilen, sodass 24px bei einer Wurzelgröße von 16px 1,5rem ergibt
• rem zu em — rem und em sind gleich, wenn das Element die Wurzel-Schriftgröße erbt; andernfalls mit dem Verhältnis von übergeordneter zu Wurzel-Schriftgröße multiplizieren
• px zu vw/vh — den Pixelwert durch die Viewport-Breite (oder -Höhe) teilen und mit 100 multiplizieren, sodass 192px bei einem 1920px breiten Viewport 10vw ergeben

Wann Sie CSS-Einheiten umrechnen sollten

Das Umrechnen zwischen CSS-Einheiten gehört in der modernen Frontend-Entwicklung zum Alltag.

• Responsives Design — feste Pixel-Mockups in rem- oder vw-basierte Layouts umwandeln, die von Mobilgeräten bis zum Desktop über alle Bildschirmgrößen hinweg elegant skalieren
• Barrierefreiheit — die Verwendung von rem-Einheiten stellt sicher, dass Text korrekt skaliert, wenn Nutzer die Standard-Schriftgröße ihres Browsers anpassen — eine wesentliche Anforderung an die Barrierefreiheit
• Design-System-Tokens — Designer-Vorgaben (typischerweise in Pixeln) in rem-basierte Tokens umwandeln, die konsistente Abstände und Typografie-Verhältnisse wahren

Häufig gestellte Fragen

Sollte ich rem oder em für Schriftgrößen verwenden?

Verwenden Sie in den meisten Fällen rem. Rem-Einheiten beziehen sich auf die Wurzel-Schriftgröße und sind dadurch unabhängig von der Verschachtelungstiefe vorhersehbar. Em-Einheiten summieren sich bei Verschachtelung (aus 1,2em innerhalb eines weiteren 1,2em wird das 1,44-Fache), was zu unerwarteten Größen führen kann. Reservieren Sie em für bestimmte Komponenten, bei denen eine Skalierung relativ zum übergeordneten Element gewollt ist.

Was ist die Standard-Wurzel-Schriftgröße in Browsern?

Alle gängigen Browser verwenden standardmäßig 16px als Wurzel-Schriftgröße. Das bedeutet 1rem = 16px, sofern nicht per CSS überschrieben. Nutzer können diesen Wert aus Gründen der Barrierefreiheit in den Browsereinstellungen ändern — deshalb ist es wichtig, für Schriftgrößen und Abstände rem statt px zu verwenden, um ein barrierefreies Design zu gewährleisten.

Wann sollte ich Viewport-Einheiten statt rem verwenden?

Verwenden Sie Viewport-Einheiten (vw, vh) für Elemente, die mit dem Browserfenster statt mit der Schriftgröße skalieren sollen. Häufige Beispiele sind Vollbild-Hero-Bereiche (height: 100vh), fließende Typografie (clamp mit vw) und responsive Innenabstände bei Containern. Vermeiden Sie vw für Fließtext — es ignoriert die Schriftgrößen-Einstellungen des Nutzers.