Der ultimative Leitfaden für CSS-Einheiten: Die Vorteile von REM und EM

In den frühen Tagen der Webentwicklung war das Pixel (px) der unangefochtene König der CSS-Größenanpassung. Entwickler gestalteten Layouts akribisch und stellten sicher, dass jede Schaltfläche (Button), jede Überschrift und jeder Container exakt eine bestimmte Anzahl von Pixeln breit und hoch war. Das funktionierte wunderbar, als alle das Internet auf Desktop-Monitoren mit ähnlichen Auflösungen durchsuchten.

Das moderne Web ist jedoch eine völlig andere Landschaft. Benutzer greifen auf Websites über riesige 4K-Monitore, winzige Smartphones, faltbare Geräte und Smartwatches zu. Darüber hinaus hat die Web-Barrierefreiheit (Accessibility) zu Recht an Bedeutung gewonnen, was bedeutet, dass sich Websites dynamisch an Benutzer anpassen müssen, die die Standard-Schriftgröße ihres Browsers zur besseren Lesbarkeit manuell erhöhen.

Hier werden relative CSS-Einheiten – insbesondere rem (Root EM) und em – absolut essenziell. Sich ausschließlich auf statische Pixel zu verlassen, erzeugt starre, unzugängliche Designs. Wenn Sie rem und em meistern, schalten Sie die Fähigkeit frei, flüssige, skalierbare und hochgradig barrierefreie Web-Schnittstellen zu erstellen.

In diesem umfassenden Leitfaden werden wir genau untersuchen, was diese Einheiten sind, wie sie sich unterscheiden, welche tiefgreifenden Vorteile ihre Verwendung bietet und welche Best Practices bei der Implementierung in der modernen Frontend-Entwicklung gelten.

Das Problem mit Pixeln (`px`)

Bevor wir uns in relative Einheiten vertiefen, ist es entscheidend zu verstehen, warum wir uns von Pixeln wegbewegen müssen.

Ein Pixel (px) ist eine absolute Maßeinheit in CSS. Wenn Sie font-size: 16px; deklarieren, weisen Sie den Browser an, diesen Text genau mit 16 Pixeln zu rendern, unabhängig von der Bildschirmgröße oder den persönlichen Einstellungen des Benutzers.

Das Barrierefreiheit-Problem (Accessibility): Das Hauptproblem bei Pixeln ist die mangelnde Barrierefreiheit. Sehbehinderte Benutzer ändern oft die Standard-Schriftgröße ihres Browsers (die typischerweise bei 16px liegt) auf etwas Größeres wie 20px oder 24px, um komfortabel lesen zu können. Wenn Sie die Typografie Ihrer Website fest in px programmieren (hardcoden), überschreiben Sie die Browsereinstellungen des Benutzers. Ihre Website bleibt stur bei 16px und zwingt den Benutzer, manuell hineinzuzoomen, was oft das Seitenlayout zerstört.

Relative Einheiten hingegen respektieren die Präferenzen des Benutzers und skalieren harmonisch nach oben oder unten.

`REM` (Root EM) verstehen

Der Begriff rem steht für "root em" (Wurzel-EM). Es handelt sich um eine relative Maßeinheit, die basierend auf der Schriftgröße des Wurzelelements (Root-Elements) des Dokuments, welches das <html>-Tag ist, skaliert wird.

Standardmäßig beträgt die Root-Schriftgröße in fast allen modernen Webbrowsern exakt 16px.

Daher gilt (bei Standardeinstellungen):

1rem = 16px
2rem = 32px
0.5rem = 8px
1.5rem = 24px

Warum ist REM so mächtig?

Die Brillanz von rem liegt in seiner Vorhersagbarkeit und seinem Respekt vor der Barrierefreiheit.

Wenn ein Benutzer in seine Browsereinstellungen geht und seine Standard-Schriftgröße von 16px auf 24px ändert, ändert sich die Root-Schriftgröße. Da rem direkt an die Root (Wurzel) gebunden ist, skaliert jedes einzelne Element auf Ihrer Website, das rem verwendet, proportional mit.

Ihre 2rem-Überschrift, die zuvor 32px groß war, wird automatisch auf 48px (2 * 24px) berechnet. Ihre Website bleibt perfekt proportioniert und, was noch wichtiger ist, für den Benutzer perfekt lesbar.

Beste Anwendungsfälle für REM:

Typografie: Verwenden Sie immer rem für font-size, line-height (Zeilenhöhe) und letter-spacing (Zeichenabstand). Dies stellt sicher, dass Ihr Text vollständig barrierefrei ist.
Globale Abstände (Spacing): Verwenden Sie rem für Makro-Layout-Eigenschaften wie Grid-Lücken (Gaps), Hauptcontainer-Polsterungen (Padding) und Abschnitts-Außenabstände (Margins). Dies stellt sicher, dass der Leerraum auf Ihrer Seite proportional zur Textgröße atmet.

`EM` verstehen

Während rem relativ zum <html>-Wurzelelement ist, ist em relativ zur Schriftgröße seines direkten übergeordneten Elements (Parent-Elements).

Wenn ein übergeordneter Container eine Schriftgröße von 20px hat und Sie die Schriftgröße eines untergeordneten (Child-)Elements auf 2em setzen, wird das Kind mit 40px gerendert.

Der Zinseszinseffekt (Die EM-Falle)

Die wichtigste Eigenschaft von em, die man verstehen muss, ist, dass es sich potenziert (compounding). Da es auf seinen unmittelbaren Parent schaut, kann das Verschachteln (Nesting) von Elementen mit em-Größen zu exponentiellem, unerwartetem Wachstum oder Schrumpfen führen.

Betrachten Sie diese HTML-Struktur:

<div class="parent">
  <div class="child">
    <div class="grandchild">Hallo</div>
  </div>
</div>

Mit diesem CSS:

.parent { font-size: 1.5em; } /* 1.5 * 16px (Standard) = 24px */
.child { font-size: 1.5em; } /* 1.5 * 24px = 36px */
.grandchild { font-size: 1.5em; } /* 1.5 * 36px = 54px */

Wie Sie sehen können, gerät die Textgröße schnell außer Kontrolle. Dieser Multiplikatoreffekt macht em für globale Typografie berüchtigt schwer zu verwalten, weshalb Entwickler rem für Schriftgrößen stark bevorzugen.

Die wahre Macht von EM: Modulare Komponenten

Wenn em so knifflig ist, warum sollte man es dann überhaupt verwenden? Die Antwort liegt im modularen, isolierten Komponentendesign.

Da em relativ zur Schriftgröße des Parents ist, ist es unglaublich mächtig, um Elemente um Text herum zu dimensionieren, wie Polsterungen (Padding), Außenabstände (Margin) und Rahmenradien (border-radius) bei Schaltflächen, Abzeichen (Badges) und Tooltips.

Stellen Sie sich vor, Sie entwerfen einen Button:

.button {
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

.button-large {
  font-size: 1.5rem;
}

Indem Sie em für das Padding und den Border-Radius verwenden, sind diese Werte untrennbar mit der font-size des Buttons verbunden. Wenn Sie einen .button-large erstellen möchten, müssen Sie nur die font-size ändern. Das Padding und der Border-Radius werden automatisch berechnet und skalieren perfekt mit, um dem größeren Text zu entsprechen. Sie müssen das Padding nicht für jede Button-Größenvariante manuell neu definieren.

Beste Anwendungsfälle für EM:

Komponenten-Padding & Margins: Buttons, Alert-Boxen und Badges, bei denen die interne Abstandsgebung proportional zum darin enthaltenen Text skalieren sollte.
SVG-Icons: Wenn Sie ein Icon direkt neben einem Text platzieren und seine Größe auf 1em setzen, wird es immer exakt so groß sein wie der umgebende Text.

REM vs. EM: Ein schneller Spickzettel

Um zusammenzufassen, wann welche Einheit verwendet werden sollte, behalten Sie diese Faustregel im Hinterkopf:

Verwenden Sie REM für globale Größen: Alles, was über das gesamte Seitenlayout hinweg konsistent bleiben soll, sollte rem verwenden. Dazu gehören Schriftgrößen, generische Abstände (Margins zwischen Abschnitten) und Layout-Grid-Definitionen. rem schützt Sie vor dem Zinseszins-Albtraum.
Verwenden Sie EM für lokale Größen: Alles, was proportional zum Text unmittelbar darum herum skalieren soll, sollte em verwenden. Dazu gehören das Padding innerhalb eines Buttons, der Abstand zwischen einem Icon und Text oder die Größe eines benutzerdefinierten SVG-Aufzählungszeichens.
Verwenden Sie PX sparsam: Pixel sollten für Dinge reserviert bleiben, die niemals, unter keinen Umständen, skalieren dürfen. Beispiele sind ein 1px breiter solider Rahmen, präzise Box-Shadow-Verschiebungen oder die Definition der maximalen Breite (max-width) eines sehr spezifischen Bildes.

Der "62.5%-Trick" (Und warum Sie vorsichtig sein sollten)

Historisch gesehen war die Berechnung von rem-Werten für Entwickler eine Qual. Wollte man eine Schriftgröße von 14px, musste man 14 durch 16 teilen, was 0.875rem ergab. Um die Mathematik zu vereinfachen, entstand ein beliebter Hack:

html {
  font-size: 62.5%;
}

Da der Browser-Standard 16px ist, sind 62.5% von 16 genau 10. Indem man die Root-Schriftgröße auf 10px setzt, wird die Mathematik unglaublich einfach:

1.4rem = 14px
2.4rem = 24px
3.2rem = 32px

Sollten Sie das verwenden? Während es die Mathematik vereinfacht, verlässt sich die moderne CSS-Entwicklung stark auf Präprozessoren (SASS/LESS), CSS-Variablen oder Utility-First-Frameworks wie Tailwind CSS, die die Mathematik für Sie übernehmen. Darüber hinaus kann das Überschreiben der Root-Schriftgröße mit einem Prozentsatz manchmal zu unerwartetem Verhalten bei Drittanbieter-Plugins führen, die davon ausgehen, dass die Root 16px groß ist.

Wenn Sie an einem reinen Vanilla-CSS-Projekt arbeiten, ist der 62.5%-Trick immer noch brauchbar, aber für moderne Stacks ist es im Allgemeinen sicherer, bei der standardmäßigen 100% (16px) Root-Größe zu bleiben und Ihre Tooling-Software die gebrochenen rem-Werte handhaben zu lassen.

Fazit

Der Übergang von Pixeln zu relativen Einheiten wie rem und em ist ein Initiationsritus für jeden Frontend-Entwickler. Obwohl es eine leichte Paradigmenänderung in der Art und Weise erfordert, wie Sie über Dimensionen denken, ist die Auszahlung enorm.

Indem Sie rem für vorhersagbare globale Typografie und Layouts strategisch mit em für modulare, in sich geschlossene UI-Komponenten kombinieren, schreiben Sie saubereres, wartbareres CSS. Vor allem aber schaffen Sie inklusive, barrierefreie Web-Erlebnisse, die für jeden einzelnen Benutzer tadellos aussehen und funktionieren, unabhängig von dessen Gerät oder Browsereinstellungen.