PX vs. REM vs. EM | Welche CSS-Einheit sollten Sie verwenden?
Seien wir mal ehrlich – herauszufinden, wie man die Größe von Elementen in CSS festlegt, kann sich anfühlen, als würde man eine völlig neue Sprache lernen. Man setzt sich hin, um eine einfache Webseite zu gestalten, und plötzlich starrt man auf einen Buchstabensalat aus Einheiten.
„Sollte dieser Absatz 16px groß sein? Oder 1rem? Moment mal, was genau ist eigentlich ein em?“
Falls Sie sich schon einmal dabei ertappt haben, wahllos Einheiten auszuprobieren, bis das Layout endlich richtig aussieht: Sie sind definitiv nicht allein. Das ist praktisch ein Initiationsritus für jeden Frontend-Entwickler. Aber sobald man versteht, wie diese drei Einheiten hinter den Kulissen funktionieren, fühlt sich CSS nicht mehr wie schwarze Magie an, sondern wie ein berechenbares Werkzeugset.
Lassen Sie uns px, em und rem ohne schwerfälligen Jargon aufschlüsseln und ein paar Analogien aus der realen Welt nutzen, damit der Funke überspringt.
Pixel (px): Das sture Lineal
Stellen Sie sich einen Pixel wie einen maßgeschneiderten Anzug aus einem Stoff vor, der sich niemals dehnt. Wenn Sie einer Schaltfläche eine Breite von 200px und eine Textgröße von 16px zuweisen, ist es genau das, was Sie bekommen. Ende der Geschichte. Es ist eine absolute Einheit.
Pixeln ist es ehrlich gesagt völlig egal, ob Sie die Seite auf einem riesigen 4K-Monitor, einem winzigen fünf Jahre alten Smartphone betrachten oder ob der Benutzer die Standardschriftgröße seines Browsers hochgedreht hat, weil er seine Lesebrille vergessen hat. Ein Pixel ist ein Pixel.
Das Gute: Sie sind vorhersehbar. Sie wissen genau, was Sie erhalten, was es unglaublich einfach macht, sie beim Erstellen exakter Layouts zu berücksichtigen. Das Schlechte: Sie sind schrecklich für die Barrierefreiheit. Wenn Sie Ihre Schriftgrößen fest in Pixeln programmieren und ein sehbehinderter Benutzer versucht, die Standardschriftgröße seines Browsers zu erhöhen, weigert sich Ihr 16px-Text hartnäckig zu wachsen.
Ems (em): Das Prinzip der „Stillen Post“
Während Pixel starr sind, sind em-Einheiten genau das Gegenteil. (Interessanter Fakt: Der Name stammt von einer traditionellen typografischen Maßeinheit, die ursprünglich auf der Breite des Großbuchstabens „M“ basierte!). Ein em ist eine relative Einheit, was bedeutet, dass es seine Größe auf seine Umgebung stützt – genauer gesagt auf sein direktes Elternelement.
Stellen Sie sich em-Einheiten wie eine Runde „Stille Post“ vor, oder vielleicht wie russische Matroschka-Puppen. Wenn ein Eltern-Container eine Schriftgröße von 16px hat und Sie einem Kind-Element eine Schriftgröße von 2em geben, ist das Kind doppelt so groß wie das Elternelement (also 32px).
Klingt toll, oder? Bis man sie verschachtelt.
Nehmen wir an, Sie haben eine Liste in einer Liste in einer Liste. Wenn Sie alle li-Tags auf 1.5em setzen, ist die erste Liste 1,5-mal so groß wie normal. Die verschachtelte Liste ist 1,5-mal so groß wie diese Größe. Die dritte Liste ist wiederum 1,5-mal so groß wie jene. Plötzlich schreit Ihr Text den Benutzer in massiven, bildschirmfüllenden Buchstaben an. Dies ist als „Verschachtelungsproblem“ (compounding problem) bekannt und der Grund, warum viele Entwickler schreiend vor em-Einheiten davonlaufen.
Da die Mathematik seltsam kompliziert werden kann, wenn man Elemente verschachtelt, möchte man das alles wirklich nicht im Kopf ausrechnen. Tun Sie sich selbst einen riesigen Gefallen und setzen Sie ein Lesezeichen für einen Pixel-zu-EM-Konverter, um Ihre Nerven zu schonen, wenn es knifflig wird.
Rems (rem): Die Uhr nach der Greenwich Mean Time stellen
Die rem-Einheit wurde speziell erfunden, um den Verschachtelungs-Albtraum von em zu beenden.
„Rem“ steht für Root Em. Anstatt auf das unmittelbare Elternelement zu schauen, um herauszufinden, wie groß es sein soll, schaut ein rem ganz nach oben an die Spitze der Webseite: zur „Wurzel“ (dem <html>-Element).
Stellen Sie sich rem-Einheiten so vor, als würden Sie Ihre Uhr nach einem globalen Standard wie der Greenwich Mean Time stellen. Es spielt keine Rolle, wo auf der Welt Sie sich befinden (oder wo Ihr Element tief im HTML-Baum verschachtelt ist); jeder bezieht sich auf genau dieselbe Uhr.
Standardmäßig stellen die meisten Browser die Root-Schriftgröße auf 16px ein. Also entspricht 1rem gleich 16px. 2rem entspricht 32px. 0.5rem entspricht 8px. Wenn Sie keine Lust auf Kopfrechnen haben, jedes Mal wenn Sie eine Designdatei in Code übersetzen müssen, nutzen Sie einfach einen praktischen Pixel-zu-REM-Konverter, um Ihren Workflow zu beschleunigen.
Die absolute Magie von rem: Wenn ein Benutzer in seine Browsereinstellungen geht und seine Standardschriftgröße auf 24px ändert, weil er größeren Text benötigt, skaliert Ihre gesamte Website automatisch schön und proportional mit. Warum? Weil alles, was mit rem gebaut wurde, auf dieser Basis-Zahl basiert!
Welche Einheit sollten Sie also tatsächlich verwenden?
Hier ist das Geheimnis: Sie müssen sich nicht für eine entscheiden und die anderen aufgeben. Die besten Entwickler nutzen alle drei, aber sie setzen sie für sehr spezifische Aufgaben ein.
So sollten Sie es angehen:
1. Nutzen Sie standardmäßig rem für fast alles.
Schriftgrößen, Abstände (Margins), Innenabstände (Padding), maximale Breiten – nutzen Sie rem. Es macht Ihre Seite unglaublich barrierefrei und stellt sicher, dass alles proportional skaliert, wenn der Benutzer seine Browsereinstellungen anpasst. Es ist der unangefochtene Goldstandard für modernes Webdesign.
2. Nutzen Sie px für Dinge, die niemals skalieren sollten.
Wenn Sie einen dünnen 1px-Rahmen um eine Karte ziehen, möchten Sie wahrscheinlich nicht, dass dieser Rahmen zu einem klobigen, hässlichen 3px-Block wird, nur weil der Benutzer die Schriftgröße erhöht hat. Nutzen Sie px für Rahmen (Borders), Box-Shadows und gelegentlich für die präzise Positionierung in kniffligen Layouts.
3. Nutzen Sie em für modulare Komponenten.
Nutzen Sie em, wenn Sie möchten, dass Abstände speziell mit der Schriftgröße genau dieses Elements skalieren. Stellen Sie sich zum Beispiel einen Button vor. Sie möchten, dass der Innenabstand um den Text immer proportional aussieht, egal ob es ein riesiger „Jetzt kaufen“-Button oder ein winziger „Absenden“-Button ist. Wenn Sie das Padding des Buttons in em festlegen, können Sie einfach die Schriftgröße des Buttons ändern, und der Innenabstand wächst oder schrumpft automatisch mit, damit es perfekt passt.