PX zu REM: Der Entwicklerleitfaden für skalierbare Typografie
Lerne, warum rem-Einheiten die Barrierefreiheit verbessern, wie du sie berechnest und welche Best Practices für responsive Typografie in CSS gelten.
Die Wahl zwischen px und rem in CSS ist nicht nur eine stilistische Präferenz — sie hat direkte Konsequenzen für Barrierefreiheit, Benutzerkontrolle und responsives Design. Millionen von Nutzern stellen eine benutzerdefinierte Schriftgröße in ihren Browserpräferenzen ein, und ein komplett in px geschriebenes Stylesheet ignoriert diese Einstellung vollständig.
Dieser Leitfaden erklärt die Mechanik jeder Einheit, die Formel zur Umrechnung von px in rem und die praktischen Regeln, wann welche in einer realen CSS-Codebasis zu verwenden ist.
CSS-Einheiten verstehen (px, rem, em, vh)
CSS bietet mehrere Längeneinheiten für verschiedene Anwendungsfälle. px (Pixel) ist eine absolute Einheit. rem (root em) ist eine relative Einheit basierend auf der font-size des Wurzelelements (<html>). em ist eine relative Einheit basierend auf der font-size des aktuellen Elements. vh und vw sind viewport-relativ: 1vh = 1% der Viewport-Höhe. Jede Einheit hat geeignete und ungeeignete Anwendungsfälle.
Kostenloses Tool PX zu REM Konverter Konvertiere sofort Pixelwerte in rem mit beliebiger BasisgrößeWarum px für Barrierefreiheit problematisch ist
Browser erlauben Nutzern, eine Standard-Schriftgröße in den Präferenzen festzulegen (typischerweise 16px standard, aber Nutzer können 20px, 24px oder mehr einstellen). Wenn du font-size: 16px in CSS setzt, überschreibt das die Nutzerpräferenz. Dies verstößt gegen das WCAG 2.1 Erfolgskriterium 1.4.4 (Text vergrößern), das erfordert, dass Text bis auf 200% skalierbar ist ohne Verlust von Inhalt oder Funktionalität.
Wie rem funktioniert (root font-size)
Die rem-Einheit ist immer relativ zur font-size des <html>-Elements. Standardmäßig setzen Browser diese auf 16px. Wenn ein Nutzer die Browser-Schriftgröße auf 20px erhöht, dann ist 1rem = 20px — alle rem-basierten Werte skalieren proportional. Setze niemals font-size auf <html> in Pixel (z.B. html { font-size: 16px }), da das den Zweck zunichte macht. Verwende stattdessen eine Prozentangabe: html { font-size: 112.5% } setzt die Basis auf 18px bei einem Standard-16px-Browser.
Kostenloses Tool Farbkontrast-Prüfer Überprüfe WCAG 2.1 Kontrastverhältnisse neben der Schriftgrößen-BarrierefreiheitPX zu REM Formel
Die Formel ist einfach: rem = px / Basis-Schriftgröße. Mit der Standard-16px-Basis: 12px = 0,75rem, 14px = 0,875rem, 16px = 1rem, 18px = 1,125rem, 24px = 1,5rem, 32px = 2rem. In CSS-Präprozessoren (Sass, Less) kannst du eine Funktion definieren. In modernem CSS können Custom Properties und calc() dies ohne Präprozessor automatisieren.
/* Sass-Funktion */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Verwendung */
font-size: rem(18); /* → 1.125rem */
/* Reines CSS */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Wann rem vs em vs px verwenden
Verwende rem für globale Typografie (Fließtext, Überschriften, Labels) und für Abstände, die mit der Schriftgrößenpräferenz des Nutzers skalieren sollen. Verwende em für komponenteninterne Abstände (Padding innerhalb eines Buttons). Verwende px für Ränder, Schatten und Layout-Elemente, die nicht mit Text skalieren sollen. Verwende Viewport-Einheiten (vh, vw) für Layout-Elemente, die sich auf den Viewport beziehen sollen.
CSS Custom Properties für rem-Basis
Ein verbreitetes Muster ist, eine CSS Custom Property für die Basis-Schriftgröße zu setzen. Setze font-size als Prozentsatz auf <html>, um Nutzerpräferenzen zu respektieren, und verwende dann rem überall. Die clamp()-Funktion erstellt fluide Typografie, die zwischen Mindest- und Höchstwerten basierend auf der Viewport-Breite skaliert.
/* Barrierefreie Basis */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Fluide Typografie mit clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}