Seien wir mal ehrlich: Größenangaben in CSS waren früher eine echte Qual. Man baute eine wunderschöne Website auf dem Laptop, aber sobald sie jemand auf dem Smartphone öffnete oder heranzoomte, zerschoss es das komplette Layout.
Hier kommt die rem-Einheit ins Spiel. Wenn du dich schon ein wenig mit Webdesign beschäftigt hast, ist sie dir bestimmt schon überall begegnet. Aber was genau ist eigentlich ein rem, und vor allem: Wie um alles in der Welt berechnet der Browser, welche Größe das auf dem Bildschirm tatsächlich ist?
Keine Sorge, dafür brauchst du keine höhere Mathematik. Schnapp dir einen Kaffee und lass uns an ein paar einfachen, praktischen Beispielen anschauen, wie Browser rem-Einheiten berechnen.
Wofür steht REM überhaupt?
rem steht für „root em“.
Wenn du tiefer in die Geschichte typografischer Maßeinheiten eintauchen möchtest, bietet Wikipedia eine faszinierende Erklärung der em-Einheit und ihrer physischen Ursprünge im traditionellen Buchdruck.
Aber fürs moderne Webdesign musst du eigentlich nur den „Root“-Teil (die Wurzel) verstehen.
Stell dir einen Baum vor. Die Wurzel (Root) ist die Basis, die den Rest des Baumes versorgt. In einem HTML-Dokument ist die Wurzel das <html>-Tag. Eine rem-Einheit schaut also einfach auf die Schriftgröße des <html>-Tags (der Wurzel) und nutzt diese als Ausgangsbasis.
Die Analogie des „Grundrezepts“
Stell dir rem wie das Skalieren eines Grundrezepts in der Küche vor.
Nehmen wir an, das Grundrezept deiner Oma ergibt genau 16 Chocolate-Chip-Cookies.
-
Wenn du die doppelte Menge machen willst, multiplizierst du das Rezept mit 2. Du erhältst 32 Cookies.
-
Wenn du nur die halbe Menge machen willst, multiplizierst du es mit 0,5. Du erhältst 8 Cookies.
rem-Einheiten funktionieren genau so. Die Standard-Root-Schriftgröße des Browsers beträgt normalerweise 16px (unser Grundrezept).
Wenn du also 2rem in deinem CSS schreibst, rechnet der Browser kurz nach:
16px (Basis) × 2 (rem-Wert) = 32px.
So einfach ist das wirklich!
Schauen wir uns ein paar einfache Beispiele an
Nehmen wir an, deine Website verwendet die standardmäßige Browser-Schriftgröße von 16px für die Root. So übersetzt der Browser dein rem-CSS in Pixel:
-
Absatz-Text (
1rem): 16px × 1 = 16px -
Eine große Überschrift (
2.5rem): 16px × 2,5 = 40px -
Kleiner Footer-Text (
0.875rem): 16px × 0,875 = 14px
Aber was passiert, wenn du die Root-Größe änderst?
Sagen wir, 16px ist dir zu klein, also schreibst du Folgendes in dein CSS:
html {
font-size: 20px;
}Sofort aktualisiert der Browser seine Berechnungen für die gesamte Website. Das Grundrezept wurde ausgetauscht. Nun ergeben dieselben rem-Werte etwas völlig anderes:
-
1remist jetzt 20px (20 × 1) -
2.5remist jetzt 50px (20 × 2,5) -
0.875remist jetzt 17,5px (20 × 0,875)
Durch das Ändern von nur einer einzigen Zeile Code skaliert deine gesamte Website perfekt. Magie, oder?
REM vs. EM: Das Matrjoschka-Problem
Vielleicht fragst du dich: „Warum benutze ich nicht einfach em?“
Während rem sich auf das Root-Element bezieht, orientieren sich normale em-Einheiten an der Schriftgröße ihres Elternelements. Das klingt erst einmal unproblematisch, bis man anfängt, Elemente ineinander zu verschachteln – wie eine Liste in einem <div> innerhalb eines anderen <div>.
Die Verwendung von em-Einheiten ist wie das Spielen mit Matrjoschka-Puppen. Wenn ein Elternelement 1.2em groß ist, das Kindelement 1.2em und das Enkelelement ebenfalls 1.2em, multipliziert der Browser sie alle miteinander (1,2 × 1,2 × 1,2). Plötzlich ist dein Text riesig und du hast keine Ahnung, warum!
Da rem immer auf das eine Root-Element zurückgreift, entsteht dieser unkontrollierte Schneeballeffekt erst gar nicht. Es ist berechenbar, sicher und bewahrt dich davor, dir die Haare rauszuraufen.
Warum Browser (und Nutzer) REM lieben
Vielleicht denkst du: „Wenn 1rem einfach nur 16px entspricht, warum schreibe ich dann nicht einfach 16px und spare mir die Rechnerei?“
Die Antwort lautet: Barrierefreiheit.
Nicht jeder Mensch hat eine perfekte Sehkraft. Viele Leute ändern in den Browsereinstellungen ihre Standard-Schriftgröße von 16px auf 20px oder sogar 24px, um Texte besser lesen zu können.
-
Wenn du deine Website strikt mit
pxgebaut hast, ist dein Text starr fixiert. Die Einstellungen des Nutzers werden ignoriert und er kann deine Inhalte nicht vernünftig lesen. -
Wenn du deine Website mit
remerstellt hast, merkt der Browser: „Ah, der Nutzer hat seine Root-Größe auf 24px geändert!“ Er berechnet deinerem-Werte basierend auf dieser neuen 24px-Basis neu, und deine gesamte Website skaliert wunderbar mit.
Dein REM-Spickzettel
Damit du nicht jedes Mal rechnen musst, wenn du CSS schreibst, ist hier ein praktischer Spickzettel basierend auf dem Standardwert von 16px. Setze dir gerne ein Lesezeichen dafür!
| Die Rechnung des Browsers | Deine CSS-Angabe (in rem) | Gewünschte Größe (in Pixel) |
16 × 0,75 | 0.75rem | 12px |
| 16 × 0,875 | 0.875rem | 14px |
| 16 × 1 | 1rem (Basis) | 16px |
| 16 × 1,125 | 1.125rem | 18px |
| 16 × 1,25 | 1.25rem | 20px |
| 16 × 1,5 | 1.5rem | 24px |
| 16 × 2 | 2rem | 32px |
| 16 × 3 | 3rem | 48px |
| 16 × 4 | 4rem | 64px |
(Profi-Tipp: Wenn du selbst rechnen möchtest, teile einfach die gewünschte Pixel-Größe durch 16. Zum Beispiel: 24px ÷ 16 = 1.5rem).
Wenn du dir das Rechnen komplett sparen und Zeit gewinnen willst, kannst du auch einfach unseren kostenlosen REM-zu-Pixel-Konverter nutzen, um die genauen Werte sofort zu berechnen!
Fazit
Da haben wir’s! Browser berechnen rem-Einheiten ganz einfach, indem sie deinen rem-Wert mit der Root-Schriftgröße multiplizieren. Es ist wie ein skalierbares Rezept, das deinen Code sauber hält, Probleme mit der Layout-Größe verhindert und das Web für alle, die deine Inhalte lesen wollen, ein ganzes Stück barrierefreier macht.
Gibt es bestimmte Elemente auf deiner Website, bei denen dir der Umstieg von px auf rem Kopfzerbrechen bereitet? Lass es mich wissen und wir rechnen es gemeinsam durch!