Warum du wirklich aufhören solltest, Pixel für Webdesign zu verwenden (und zu Rem wechseln solltest)
Seien wir mal ehrlich – Webdesign war früher lächerlich einfach. Damals starrten alle auf die exakt gleichen klobigen Desktop-Monitore. Man konnte einfach eine Schriftgröße von 16px für einen Absatz festlegen, eine feste Breite für den Hauptcontainer definieren und Feierabend machen.
Aber die Zeiten haben sich geändert. Gewaltig. Heute versuchen wir, Websites auf handflächengroßen Telefonen, gigantischen Ultrawide-Monitoren, Tablets und sogar smarten Kühlschränken gut aussehen zu lassen. Das Web ist kein statisches Poster mehr; es ist ein flüssiges, lebendiges Etwas. Und wenn du dich immer noch rein auf Pixel (px) verlässt? Dann versuchst du im Grunde, Wasser eine Zwangsjacke anzulegen.
Es ist Zeit, über relative Einheiten zu sprechen. Ehrlich gesagt ist der Verzicht auf px zugunsten von rem eine der besten Gewohnheiten, die man sich aneignen kann. Es schont deine Nerven, macht deinen Code sauberer und, was am wichtigsten ist, es ist viel besser für deine Nutzer.
Das Problem mit Pixeln (A.K.A. der Beton-Ansatz)
Um zu verstehen, warum rem so großartig ist, müssen wir uns erst einmal ansehen, warum Pixel im modernen Webdesign irgendwie nerven.
Stell dir Pixel wie das Gießen von Beton vor. Sobald er fest ist, bist du daran gebunden. Wenn du einem Browser sagst, dass eine Überschrift 24px groß ist, bleibt sie 24px – egal was passiert. Pixel sind im Grunde die Kontrollfreaks der CSS-Welt. Es ist ihnen egal, ob dein Nutzer die Augen vor dem Bildschirm zusammenkneift, und es ist ihnen erst recht egal, ob jemand extra in die Browsereinstellungen gegangen ist, um die Standardschriftgröße zu erhöhen, weil er schlecht sieht.
Der Pixel bleibt hartnäckig. Er sagt: „Nein, der Designer hat 24 Pixel gesagt, also bekommst du exakt 24 Pixel.“
Diese Starrheit ist ein Albtraum für die Barrierefreiheit. Wenn wir den Menschen absolute Größen aufzwingen, nehmen wir ihnen die Möglichkeit, selbst zu entscheiden, wie sie unsere Inhalte konsumieren.
Vorhang auf für REM: Dein CSS-Smart-Thermostat
Wenn Pixel gegossener Beton sind, ist rem wie ein smartes Thermostat für dein ganzes Haus.
Rem steht für „Root Em“. Ich verschone dich mit der technischen Geschichte, aber alles, was du wirklich wissen musst, ist, dass eine rem-Einheit ihre Größe vollständig auf der Wurzel deines Dokuments (dem <html>-Tag) basiert. Standardmäßig stellt so ziemlich jeder Webbrowser seine Root-Schriftgröße auf 16px ein.
Wenn du also deinen Absatztext auf 1rem setzt, übersetzt der Browser das in 16px. Wenn du deine Überschrift auf 2rem setzt, rechnet der Browser einfach: 2 x 16 = 32px.
Die Magie der Skalierung in der Praxis
Hier ergibt die Analogie mit dem smarten Thermostat endlich Sinn.
Nehmen wir an, ein Nutzer besucht deine Seite, sieht aber schlecht. Er ist in seine Browsereinstellungen gegangen und hat die Standardschriftgröße von 16px auf etwas Größeres, wie 24px, geändert.
- Wenn du deine Seite mit Pixeln gebaut hast: Dein Code ignoriert den Nutzer komplett. Dein 16px-Text bleibt exakt 16px. Der Nutzer muss mühsam heranzoomen, was dein sorgfältig gestaltetes Layout zerstört und ihn dazu zwingt, horizontal zu scrollen, nur um einen einzigen Satz zu lesen. Das ist unglaublich frustrierend.
- Wenn du deine Seite mit Rems gebaut hast: Deine Seite respektiert den Nutzer tatsächlich. Da dein Text auf
1remeingestellt ist, schaut der Browser auf seinen neuen Standardwert (24px) und sagt: „Cool, 1rem entspricht jetzt 24px.“ Alles auf deiner Seite – die Schriften, das Padding, die Margins – skaliert perfekt und proportional nach oben.
Du musstest keine einzige zusätzliche Zeile CSS schreiben. Das Layout hat sich einfach an die Bedürfnisse des Nutzers angepasst.
Warum du den Wechsel am besten schon gestern hättest machen sollen
Der Wechsel von px zu rem ist nicht nur irgendein trendiger Entwickler-Fimmel. Es ist ein grundlegender Wandel in der Art und Weise, wie wir die Nutzererfahrung handhaben.
- Es ist ein riesiger Gewinn für die Barrierefreiheit (A11y): Das Web sollte für alle funktionieren. Durch die Verwendung von Rems stellst du sicher, dass sehbehinderte Nutzer, die auf benutzerdefinierte Browsereinstellungen angewiesen sind, deine Inhalte tatsächlich lesen können, ohne gegen dein CSS ankämpfen zu müssen.
- Responsive Design wird viel einfacher: Willst du die gesamte Typografie deiner Website für Mobilgeräte herunterskalieren? Wenn du Pixel verwendet hast, müsstest du dutzende Media Queries schreiben, um jede einzelne Schriftgröße zu ändern. Mit Rems änderst du einfach einmal die Root-Schriftgröße, und alles andere skaliert automatisch herunter. Es fühlt sich ehrlich gesagt wie Schwindeln an.
- Zukunftssicherheit: Ständig kommen neue Geräte mit seltsamen Bildschirmgrößen auf den Markt. Relative Einheiten sorgen dafür, dass dein Design flexibel bleibt und atmet, anstatt unter Druck zu zerbrechen.
Der Spickzettel: „Wann man was benutzt“
Schau, du musst Pixel nicht komplett in den Müll werfen. Sie haben im modernen Design immer noch einen winzigen Platz. Hier ist ein kurzer, schnörkelloser Leitfaden für den Übergang:
Nutze rem für:
- Schriftgrößen (Überschriften, Absätze, Buttons)
- Abstände (Margins und Padding)
- Breiten und Höhen von wichtigen Layout-Containern
Nutze px für:
- Winzige, exakte Details, die niemals, wirklich niemals skaliert werden sollten. Denk an 1px-Rahmen um eine Card oder einen dezenten Box-Shadow.
Die goldene Formel:
- 1rem = 16px (Browser-Standard)
- 1.5rem = 24px
- 2rem = 32px
(Profi-Tipp: Wenn du Kopfrechnen hasst, setz dir einfach ein Lesezeichen für ein Px-zu-Rem-Konverter-Tool und lass es die schwere Arbeit für dich erledigen!)
Sich auf rem einzulassen bedeutet, ein kleines bisschen absolute Kontrolle aufzugeben, um eine weitaus bessere, flexiblere und barrierefreiere Erfahrung für die Menschen zu schaffen, die deine Seite tatsächlich nutzen. Der Beton bekommt ohnehin schon Risse – es ist an der Zeit, Dinge zu bauen, die fließen.