Pixel, EM, REM, %, VW, VH – Was ist der Unterschied?

Wenn du mit Webflow arbeitest, wirst du ständig auf Begriffe wie px, em, rem, %, vw und vh stoßen. Am Anfang wirken diese Einheiten vielleicht etwas technisch – aber sobald du verstehst, wann du welche Einheit einsetzt, wirst du deine Layouts viel sauberer, flexibler und responsiver bauen können.

In diesem Artikel zeige ich dir praxisnah, wie du die Einheiten in Webflow richtig nutzt. Du bekommst klare Regeln und Beispiele, die du sofort in deinem nächsten Projekt umsetzen kannst.

Pixel (px) – für exakte Details

px sind feste Werte. Wenn du in Webflow einem Bild 500px Breite gibst, bleibt es immer 500px – egal, ob dein Nutzer auf einem Smartphone oder einem großen Monitor surft.

Best Practice in Webflow:

‍Nutze px für exakte Details, zum Beispiel:

• Rahmen (border: 1px)
• Icon-Größen
• Schlagschatten (box-shadow)

Für Schriftgrößen und Layout-Breiten solltest du Pixel aber vermeiden – dort machen relative Einheiten dein Design viel flexibler.

REM – dein Standard für Schrift & Spacing

rem ist die wichtigste Einheit, wenn es um Schriftgrößen, Abstände und konsistente Layouts geht.

1 rem entspricht der Schriftgröße des Root-Elements (in Webflow sind das standardmäßig 16px).

Beispiel:

• Du gibst einer Überschrift 1.5rem → sie ist 24px groß (1.5 × 16px).
• Erhöhst du später in den Webflow Global Styles die Basis-Schriftgröße, passen sich alle Elemente mit rem-Werten automatisch an.

So kannst du mit wenigen Klicks dein gesamtes Typografie-System skalieren.

Best Practice in Webflow:

• Verwende rem für Schriften, Margins, Paddings und Max-Widths.
• Beispiel: max-width: 60rem für einen Container – bleibt immer proportional zur Basisgröße.

EM – für Komponenten, die mitwachsen

em bezieht sich nicht auf die Root-Größe, sondern auf die Größe des Eltern-Elements.

Beispiel:

• Deine Spalte hat eine Schriftgröße von 15px.
• In einem Textfeld darin setzt du 2em.
• Ergebnis: 30px (2 × 15px).

Best Practice in Webflow:‍

Nutze em für Komponenten, die proportional mit ihrer Schriftgröße wachsen sollen – zum Beispiel Buttons.

• Padding in em sorgt dafür, dass der Button größer wird, wenn die Schrift größer ist.

Prozent (%) – perfekt für flexible Breiten

% bezieht sich immer auf das Eltern-Element.

Beispiel in Webflow:

• Du setzt ein Bild auf 50% Breite.
• Es bleibt immer halb so breit wie die Spalte oder der Div Block, in dem es liegt.

Das macht % ideal für responsive Layouts, besonders bei Bildern oder flexiblen Spaltenbreiten.

Achtung: Bei Höhen funktioniert % nur, wenn das Eltern-Element eine feste Höhe hat.

Viewport-Einheiten (vw & vh) – für Fullscreen-Layouts

vw und vh beziehen sich auf den Viewport – also das Browserfenster.

• 1vw = 1 % der Fensterbreite
• 1vh = 1 % der Fensterhöhe

Beispiele in Webflow:

• Hero Section mit 100vh → füllt immer die komplette Bildschirmhöhe.
• Element mit 50vw → immer halb so breit wie der Viewport.

Pro-Tipp für Mobile:

100vh kann auf Smartphones springen, wenn die Browser-Leiste eingeblendet wird.
Nimm deshalb besser 100svh (Small Viewport Height), das in modernen Browsern stabiler ist.

Welche Einheit nehme ich wann?

Hier die Faustregel für Webflow-Projekte:

• Schrift & Abstände → rem
• Komponenten (z. B. Buttons, Badges) → em
• Flexibles Layout / Bilder → %
• Fullscreen-Elemente → vw / vh (bzw. svh)
• Exakte Details (Linien, Icons, Schatten) → px

Praxis-Rezepte für dein Webflow-Projekt

Fluide Schriftgrößen

h2 {
 font-size: clamp(1.25rem, 2.5vw, 1.75rem);
 line-height: 1.3;
}


So bleibt die Schrift lesbar, wächst aber dynamisch mit dem Viewport.

Buttons, die mitwachsen

.btn {
 font-size: 1rem;
 padding: 0.75em 1.25em;
 border-radius: 0.5rem;
}


Schrift größer = Button wächst automatisch.

Hero Section auf volle Höhe

.hero {
 min-height: 100vh;
 min-height: 100svh; /* stabiler auf Mobile */
 display: grid;
 place-items: center;
}


Fazit

Wenn du in Webflow die richtigen Einheiten einsetzt, baust du Layouts, die responsiv, flexibel und skalierbar sind – ohne stundenlange Nacharbeit.

• Nutze rem als Standard für Schrift und Spacing.
• Greife zu em, wenn Komponenten mit ihrer Schriftgröße wachsen sollen.
• Setze % für flexible Breiten und Bilder.
• Arbeite mit vw/vh, wenn Elemente die volle Breite oder Höhe einnehmen sollen.
• Bleibe bei px, wenn es um absolute Präzision geht.

So baust du Webseiten, die auf jedem Gerät nicht nur gut aussehen, sondern auch professionell wirken und perfekt skalieren.