CSS Einheiten: Pixel, REM und EM im Vergleich

CSS Einheiten im Web Development

In der heutigen Zeit ist es unerlässlich, dass eine Webseite für alle Arten von Geräten und Bildschirmgrößen optimiert ist. Eine wichtige Überlegung bei der Erstellung dieser sogenannten responsiven Designs ist die Verwendung der richtigen CSS-Maßeinheiten - namentlich Pixel, EM, oder REM - um die Position und Größe der Seitenelemente zu bestimmen.
‍

Im Folgenden werden wir die Vorteile, Nachteile und Best Practices dieser drei Einheiten im Detail beleuchten, damit du die richtige Wahl für das nächste Webflow-Projekt treffen kannst!

Welche Vor- und Nachteile haben Pixel

Pixel sind eine absolute Maßeinheit und spiegeln das kleine Inkrement eines Bildes wider, das auf dem Bildschirm dargestellt werden kann. Somit ist ein Pixel unabhängig von Gerät und Bildschirmgröße immer eindeutig definiert und “gleich groß”.

Vorteile von Pixeln

• Kontrolle über Design
  ‍
  Pixel bieten durch ihre uniforme Größe präzise Kontrolle über die Elemente auf der Webseite. Somit bieten sie bei jedem Nutzer, unabhängig von Gerät und Bildschirmgröße, dieselbe Nutzererfahrung und werden daher oft für Animationen oder Grafiken verwendet.

• Kompatibilität mit Browsern
  ‍
  Pixel gehören zu einer der ältesten Einheiten der Computerentwicklung. Daher muss man sich keine Sorgen um die Kompatibilität machen, da sowohl alte als auch neue Browser für Pixel ausgelegt sind.
  

Nachteile von Pixeln

• Erhöhter Aufwand für responsive Designs
  ‍
  Da seit geraumer Zeit ein starker Fokus auf responsives Design gesetzt wird, resultiert die Verwendung von Pixeln in mehr Arbeit für den Entwickler!

• Keine Barrierefreiheit
  ‍
  Barrierefreiheit gehört ebenfalls zu den Aspekten, auf die vermehrt Gewichtung gelegt wird. Eine Webseite sollte so ausgelegt sein, dass jeder Nutzer eine angenehme Erfahrung hat. Daher sollte die Seite entsprechend der Browser-Einstellungen bezüglich Schriftgröße und Zoom skalieren.
  ‍
  Weil Pixel die individuellen (Browser-) Einstellungen des Nutzers vernachlässigen, führt dies für Menschen mit Einschränkungen oftmals zu einer schlechteren oder stark eingeschränkten Nutzererfahrung.

REM in der Webentwicklung: Vorteile und Nachteile

REM (englisch = root EM) ist eine relative Maßeinheit, die im Vergleich zu Pixeln nicht auf der Bildschirmgröße, sondern der Schriftgröße des HTML-Element (äußerster Container einer Webseite, der alle anderen Elemente umfasst) des Browsers basiert. Ein REM entspricht somit meistens 16 Pixeln.
‍

Notiz: In Webflow können wir nicht direkt Einfluss auf das HTML-Element nehmen. Falls du trotzdem Änderungen vornehmen möchtest, verwende einfach ein Code-Embed.

Vorteile von REM

• Barrierefreiheit
  ‍
  Mit der Nutzung von REM wird eines der bei Pixeln präsenten Probleme gelöst - die Skalierung der Webseite nach Präferenzen des Nutzers. Durch die nativen Browsereinstellungen kann Einfluss auf die Schriftgröße des HTML-Elements genommen und damit die Seite nach Belieben skaliert werden.
  ‍
  Da alle Elemente der Webseite das HTML-Element als Referenz nutzen, werden sie im gleichen Verhältnis angepasst und das ursprüngliche Layout bleibt bestehen.

Nachteile von REM

• Erhöhte Komplexität
  ‍
  Die Arbeit mit REM ist wesentlich komplexer als z.B. mit Pixeln, da zusätzliche Aspekte wie Browsersupport, Umrechnungen und eine anfängliche Lernkurve zu beachten sind. Deswegen empfehle ich dir, dich erst mit REM vertraut zu machen, bevor du dich an ein Kundenprojekt wagst.
  

• Umrechnungsfehler
  ‍
  Bei der Umrechnung von REM ausgehend von dem HTML Element kann es gelegentlich zu Rundungsfehlern kommen, vor allem bei der Arbeit mit kleineren Schriftgrößen. Daher sind Layouts, die Pixelgenau sein müssen, oft nur annähernd umsetzbar.

Wie funktionieren EM und was sind die Vor- und Nachteile?

Die Funktionsweise von EM ähnelt der von REM stark, wobei sich EM an dem nächsten darüberliegenden Elemente, dem Parent,  statt an dem HTML Element orientieren. Somit handelt es sich bei EM ebenfalls um eine relative Einheit, die auf der Schriftgröße eines anderen Elements basiert.

Vorteile von EM

• Responsives Design
  ‍
  Die Erstellung eines für alle Bildschirmgrößen responsiven Designs ist mit EM als primäre Einheit sehr einfach. Da sich alle Elemente der Seite bezüglich Größe und Abstand an ihrem jeweiligen Parent orientieren, können durch Änderungen des Parents ganze Sektionen auf einmal skaliert werden. Bei Änderung der Schriftgröße des Body-Elements kann das Design der ganzen Seite angepasst werden.
  
  

Nachteile von EM

• Komplexere Projekte
  ‍
  Durch die Verschachtelung der Elemente, die eine responsive Seite ermöglichen, entsteht jedoch eine deutlich höhere Komplexität. So kann oft unklar sein, wie groß ein EM tatsächlich ist, und welche Komponenten die Größe beeinflussen. Das führt nicht nur bei der Erstellung der Seite zu Problemen, sondern, auch wenn der Kunde diese im Anschluss verwalten möchte.

• Keine Barrierefreiheit
  ‍
  So wie Pixel vernachlässigen EM die Browser-Einstellungen des Nutzers. Daher ist die Nutzung für Menschen mit Einschränkungen oftmals erschwert oder nicht möglich.

Wann sind Pixel, REM und EM in meinem Projekt sinnvoll?

Welche Einheit die beste für dein Projekt ist, hängt natürlich von deiner Erfahrung und den Anforderungen des Designs ab. Dennoch eignen sich EM oder REM oftmals besser als Pixel, da sie eine einfachere Anpassung der Webseite an kleinere Breakpoints ermöglichen und damit Zeit sparen. Zusätzlich bieten REM einen höheren Grad an Barrierefreiheit.
‍

Dennoch haben Pixel einen Platz in jedem Projekt, sei es bei präzisen Animationen, die auf jeder Bildschirmgröße identisch sein sollen, oder um Probleme der Lesbarkeit bei sehr kleiner Schrift vorzubeugen.

Entscheidend ist, die Einheiten abhängig von dem Use-Case so zu wählen, dass die Stärken bestmöglich genutzt werden und die Nachteile die Nutzererfahrung nicht beeinträchtigen.
‍

Wir haben uns für eine Kombination aus REM und EM für unsere Webflow-Projekte entschieden, um ein gutes Gleichgewicht der Vor- und Nachteile zu erreichen:

‍

EM fungieren als primäre Einheit für alle Größen, Positionen und Abstände in unserem Projekt, mit der Ausnahme des Body-Elements. Hier setzen wir die Einheit der Schriftgröße auf 1 REM, um Browsereinstellungen (Zoom, Schriftgröße) des Nutzers einfangen zu können und damit Barrierefreiheit zu bieten.
‍

Wenn der Nutzer nun die HTML-Schriftgröße verändert, wird diese Veränderung durch das Body Element (1 REM) eingefangen, und alle weiteren Seitenelemente skalieren entsprechend, da sie den Body als Referenz nutzen.

Zusammenfassung

Alle drei CSS-Einheiten haben ihre Daseinsberechtigung und sollten abhängig von ihren Stärken und Schwächen in einem Projekt eingesetzt werden.
‍

Pixel bieten genau Kontrolle über das Layout und Seitendesign auf allen Bildschirmgrößen, während EM die Erstellung von responsiven Designs stark erleichtern. REM ermöglichen stattdessen Barrierefreiheit durch die Anpassung der Seite an nutzerspezifische Einstellungen wie Browserschriftgröße und Zoom.

‍