CSS-Einheiten: Ein Webflow Guide für REM, EM, Pixel & VW

Die Wahl der richtigen CSS-Einheit(en) für dein nächstes Webflow-Projekt spielt eine größere Rolle, als viele Entwickler zugeben möchten. Und genau diese Erfahrung kann ich mit meinem eigenen Übergang von Pixel auf REM- und EM-Größen innerhalb der letzten Jahre bestätigen.

‍

Während absolute Einheiten wie Pixel eine hohe Kontrolle über das Designlayout unabhängig von der Bildschirmgröße bieten, kommen REM und EM den Anforderungen an Barrierefreiheit und Wartung entgegen. Doch das bedeutet nicht, dass du alles stehen und liegen lassen solltest und sofort neue Einheiten für alle Eigenschaften deiner Klassen brauchst.

‍

Aus diesem Grund werfen wir heute einen genaueren Blick auf die großen vier: Pixel (px), EM, REM und Viewport-Einheiten (vw, vh). Dabei betrachten wir, wie diese Einheiten funktionieren, welche Vor- und Nachteile sie mit sich bringen und für welche CSS-Eigenschaften sie am besten in deinen Webflow-Projekten geeignet sind.

‍

Zuletzt teile ich noch, wie ich diese Einheiten aktuell in Webflow kombiniere, damit du am Ende dieses Guides einen vollen Überblich hast.

Weshalb die richtige Einheit entscheidend ist

Bevor wir jedoch tief in die Details einsteigen, treten wir einen Schritt zurück und schauen uns an, warum die verschiedenen Einheiten überhaupt relevant sind.

‍

Im Web werden alle Eigenschaften, sei es Margins, Paddings, Absätze oder Breiten, mithilfe von CSS-Einheiten skaliert. Doch die Wahl der Einheit geht über die einfache Anzeigegröße hinaus und beeinflusst, wie sich deine Webseite effektiv an verschiedene Bildschirmgrößen anpasst, auf Zoom reagiert und mit den Browsereinstellungen des Nutzers interagiert.

‍

Dabei sind es meistens diese Randfälle, die die Diskussion über Pixel, REM, EM und Viewport-Einheiten treiben sollten. Stattdessen bleiben Webflow-Entwickler oft durch die Voreinstellung der Plattform bei Pixeln hängen, während Kunden bewährte Methoden fordern, die sie bereits kennen und verstehen.

‍

Schlussendlich ist es daher stets ein mühsamer Prozess, den Status quo anzufechten und auf die Vorteile von REM und EM zu bestehen.

Die Grundlage: Absolute Pixel-Einheiten

Beginnen wir mit dem Grundbaustein der CSS-Einheiten: Pixeln. Ein Pixel (px) ist eine absolute Einheit, die gemäß der W3C-CSS-Spezifikation als 1/96 Zoll (~0,026 cm) definiert ist.

‍

Absolut in diesem Kontext bedeutet, dass ein Pixel unabhängig vom Gerät gleich groß gerendert wird, wobei hochdichte Bildschirme wie Retina-Displays einen CSS-Pixel oft als mehrere physische Pixel abbilden.

Vorteile von Pixeln

• Präzision und Kontrolle: Pixel verleihen exakte Kontrolle und sind perfekt für haargenaue Designs. Was du siehst, ist das, was andere sehen.
• Anfängerfreundlich: Pixel benötigen kein Hintergrundwissen und hängen nicht von anderen Elementen ab, weswegen sie ideal für die ersten Schritte im Webdevelopment sind.
• Leistung: Als absolute Einheit benötigen Pixel weniger Rechenleistung als relative Einheiten wie REM und EM.

Nachteile von Pixeln

• Fehlende Flexibilität: Pixel skalieren nicht mit den Einstellungen des Parent-Elements und benötigen manuelle Anpassungen für verschiedene Bildschirmgrößen.
• Mangelnde Barrierefreiheit: Die Schriftgröße des Browsers wird nicht beachtet, was Nutzer mit besonderen Anforderungen beeinträchtigen kann.

Pixel in deinen Webflow Projekten

Aber halt! Es gibt CSS-Eigenschaften, für die Pixel weiterhin die beste Wahl sind, zum Beispiel:

• Border: Dünne Rahmen für Karten, Unterstriche oder Trennstriche sind oft bewusst gewählt und müssen nicht mit dem restlichen Design skalieren.
• Kleine UI-Elemente: Icons oder Symbole in Interfaces profitieren von standardisierten Größen über Breakpoints hinweg.

‍

Nicht vergessen: Elemente mit Pixelgrößen sollten in Webflow für jeden Breakpoint (Desktop, Tablet, Mobile-Landscape, Mobile-Portrait) auf die neue Bildschirmgröße angepasst werden.

EM: Modular und skalierbar

Als Nächstes schauen wir uns die relative Einheit EM an, deren Größe basierend auf der Schriftgröße des Parent-Elements berechnet wird. Diese Einheit kommt ursprünglich aus der Typografie und wird im Webdesign verwendet, um vollständig modulare Layouts zu erstellen. Dabei benötigt sie durch verschachtelte Berechnungen jedoch ein wenig mehr Verständnis als einfache Pixel.

‍

Bei einer Standard-Schriftgröße von 16px verhalten sich EM wie folgt:

‍

{{BasicUnitConvert_table="/support/components"}}

‍

Doch wenn wir nun ein Parent-Element mit der Schriftgröße 1.5em einfügen, passiert das Folgende:

‍

{{BasicParentConvert_table="/support/components"}}

‍

Vorteile von EM

• Proportionale Skalierung: Mit EM passen sich Elemente immer an ihren Container an und können verhältnismäßig vergrößert oder verkleinert werden.
• Barrierefreiheit: Durch die Vererbung der Schriftgröße durch alle Elemente hindurch reagiert die Webseite auf die Browserschriftgröße des Nutzers.
• Modularität: Perfekt für Komponenten, die an verschiedenen Stellen und in unterschiedlichen Größen benötigt werden.

Nachteile von EM

• Komplexität: Verschachtelte Elemente machen es schwierig, die tatsächliche Größe eines EM im Hinterkopf zu behalten, vor allem wenn keine runden Zahlen genutzt werden (z. B. 1.3425em).
• Debugging: Fehler in der Vererbungskette in großen Projekten zu suchen, wird schnell zeitintensiv und unübersichtlich.

‍

Vorsicht: In Rich-Text Elementen ist es einfach die Übersicht zu verlieren, wenn Schriftgrößen mit EM gesetzt werden. Vor allem bei Überschriften mit Margin kommt es oft zu ungewollten Interaktionen.

EM in deinen Webflow Projekten

EM sind besonders hilfreich, wenn du responsive Komponenten bauen möchtest. Anstatt jede Größe (Padding, Gap, Schriftgrößen ...) einer Karte manuell für kleinere Bildschirmgrößen anpassen zu müssen, kannst du einfach die Schriftgröße des Parent-Elements reduzieren.

REM: Verlässlichkeit per Root-Element

REM bilden die gesunde Mitte zwischen EM und Pixel, wobei sie Vorteile von beiden Einheiten übernehmen. Root EM (REM) beziehen sich für ihre Berechnung auf die Schriftgröße des HTML-Root-Elements, welches standardmäßig 16px beträgt.

‍

Im Gegensatz zu EM beeinflusst Verschachtelung die Größe eines REM jedoch nicht, wodurch Entwickler ein wenig mehr Kontrolle ähnlich wie bei Pixeln zurückgewinnen.

Die Vorteile von REM

• Einfache Skalierung: Es gibt keine bösen Überraschungen durch Verschachtelung. Wenn sich die Root-Schriftgröße verändert, skaliert die gesamte Seite proportional.
• Barrierefreiheit: Bezieht sich direkt auf die Browser-Schriftgröße und damit die Präferenzen des Nutzers.

Nachteile von REM

• Verwaltung: REM verlieren die „automatische“ Skalierung auf Komponentenebene und eignen sich daher weniger für tief verschachtelte, modulare Strukturen.
• Browser-Support: Alte Browser benötigen Pixel als Fallback-Option, da REM erst seit IE9 unterstützt werden.

REM in deinen Webflow Projekten

Durch REM kannst du globale Styles festlegen, die dennoch auf Nutzerpräferenzen reagieren:

• Typografie: Überschriften, Paragraphen und Labels sind perfekte Optionen, um von den Vorteilen von REM zu profitieren.
• Design Layouts: REM eignen sich, um die maximale Breite von Containern, Lücken in Grid-Elementen oder Größen von Icons festzulegen.

Viewport Einheiten: Perfekt für jede Bildschirmgröße

Zuletzt betrachten wir die Überkategorie der Viewport-Einheiten, welche relativ zu der Größe des Browserfensters skalieren (1vw = 1%; 100vw = volle Breite). Dabei können wir in Webflow zwischen den folgenden Versionen unterscheiden:

• Viewport width (vw): Verwendet die Breite des Browserfensters als Referenz.
• Viewport height (vh): Verwendet die Höhe des Browserfensters als Referenz.
• Vmin: Nimmt die kleinere der beiden Dimensionen (vw oder vh) als Referenz.
• Vmax: Nimmt die größere der beiden Dimensionen (vw oder vh) als Referenz.
• Dynamic Viewport height (dvh): Verwendet die Höhe des Browserfensters als Referenz, wobei die Werte kontinuierlich neu berechnet werden, um sich an veränderliche UI-Elemente wie On-Screen-Tastaturen anzupassen.
• Small viewport height (svh): Verwendet die kleinste mögliche vh unter der Annahme, dass alle UI-Elemente vollständig aufgeklappt sind (z. B. Browser-Suchleiste oder On-Screen-Tastatur).

Vorteile von Viewport-Einheiten

• Dynamische Layouts: Ermöglichen „fluid“ Designs, die Elemente automatisch proportional für jede Bildschirmgröße anpassen.

Nachteile von Viewport-Einheiten

• Barrierefreiheit: Die Größen reagieren nicht auf die Browsereinstellungen des Nutzers und können Texte unlesbar klein auf Mobilgeräten skalieren.
• Browser-Support: Einheiten wie dvh oder svh werden nur vereinzelt von älteren Browserversionen unterstützt.

Viewport-Einheiten in deinen Webflow Projekten

Viewport Einheiten werden oft für Hintergrundelemente, große Schriftzüge und experimentelle Designs verwendet, um weiterhin Mobile-Friendly zu bleiben:

• Typografie: Sehr große Überschriften in Hero-Sektionen.
• Bildelemente: Bildelemente im Hintergrund können auf die volle oder anteilige Bildschirmgröße skaliert werden.
• Padding: Abstände zwischen Sektionen, die sich auf Desktop- / Mobilgeräten selbständig anpassen.

Die Einheiten im Vergleich: Welche passt am besten?

Da wir nun mehr über jede einzelne Einheit wissen, können wir einen Direktvergleich aufstellen.

‍

{{BasicComp_table="/support/components"}}

‍

Daraus ergibt sich das folgende Bild: Keine Einheit ist perfekt für jeden Anwendungsfall. Aufgrund dessen ist das Kombinieren von verschiedenen Einheiten nach Bedarf nicht nur sinnvoll, sondern für eine vollkommene Webseite sogar notwendig.

‍

Zum Beispiel könntest du REM als Basis nutzen, auf EM für geschlossene Komponenten wechseln und auf Pixel für die Präzisionsarbeit zurückgreifen.

‍

Damit du während der Entwicklung kein Problem mit der Umrechnung von Pixeln, REM und EM hast, kannst du gerne meinen kostenlosen Rechner verwenden, der dir die Arbeit (größtenteils) abnimmt :)

Meine Strategie in Webflow

Meine Webflow-Projekte bestehen aus einem Mix aus REM und EM, damit jede Komponente barrierefrei und kompatibel mit allen Bildschirmgrößen ist. In Einzelfällen verwende ich ebenfalls Viewport-Einheiten, um kreativere Designs zu realisieren.

‍

Folgende Tipps und Tricks kann ich dir auf den Weg geben:

• Verwende ein 4px-System, um deine REM-/EM-Einheiten intuitiv und einfacher berechenbar zu machen (z. B. 4px, 8px, 12px, 16px → 0.25rem, 0.5rem, 0.75rem, 1rem).
• Stelle die Schriftgröße des „All-Body“-Tags auf 1rem ein. Dadurch passt sich deine gesamte Webseite immer an die Browser-Schriftgröße des Nutzers an, auch wenn du EM verwendest.
• Verwende EM für Schriftgrößen, Paddings, Dimensionen … und so ziemlich alles andere, damit du dir das Leben bei der Optimierung für Mobilgeräte einfacher machst.
• Behalte immer im Hinterkopf, dass EM auch basierend auf der Schriftgröße des eigenen Elements skalieren. Vor allem in Rich-Text-Elementen kommt es oft zu Verwirrung.
• Teste deine Webseite regelmäßig in verschiedenen Browsern, auf unterschiedlichen Zoom-Stufen, auf anderen Bildschirmgrößen und mit verdoppelter Browser-Schriftgröße.

Fazit

Und das war’s auch schon: alles, was du über Pixel, REM, EM und Viewport-Einheiten wissen musst, um deine Reise im Web-Development voranzutreiben.

‍

Mit der Zeit und durch ein wenig Übung gewöhnst du dich schnell an die verschiedenen Größen und bekommst ein intuitives Verständnis, für welche Zwecke welche Einheiten am besten funktionieren.

‍

Und hier noch einmal kurz: Pixel sind präzise, aber inflexibel, EM skalieren relativ, aber können unübersichtlich werden, REM ermöglichen Barrierefreiheit und Viewport-Einheiten passen sich dynamisch an das Browserfenster an.

Häufig gestellte Fragen