Wenn du gerade erst mit Webdesign startest, ist es verlockend, einfach alles in Pixeln (px) zu definieren. Wir kennen Pixel. Pixel sind greifbar. Ein Punkt auf dem Bildschirm ist ein Punkt, richtig? Leider falsch. Im modernen Webdesign, wo wir unzählige Geräte vom riesigen 4K-Monitor bis zur Smartwatch bedienen müssen, reichen starre Pixel oft nicht mehr aus. In diesem Beitrag zeige ich dir genau den Unterschied zwischen px, em und rem, warum diese kleinen Kürzel einen riesigen Einfluss auf deine Website haben und wann du welche Einheit verwenden solltest.
Die absolute Einheit: Der gute alte Pixel (px)
Fangen wir mit dem Klassiker an. px ist eine absolute Einheit.
Das bedeutet: Wenn du sagst, eine Überschrift ist 24px groß, dann ist sie genau das. Egal, ob der Nutzer einen riesigen Monitor hat oder ein winziges Handy. Das klingt erst einmal nach maximaler Kontrolle für dich als Designer.
Wann sind Pixel sinnvoll?
Pixel sind super, wenn Dinge immer gleich groß bleiben sollen, unabhängig von den Einstellungen des Browsers.
- Rahmen (Borders): Ein border: 1px solid black; soll meistens eine hauchfeine Linie bleiben.
- Schatten: Auch hier wird oft mit festen Werten gearbeitet.
- Bilder: Wenn ein Bild eine feste Auflösung hat.
Das Problem mit Pixeln
Das Problem entsteht bei Texten und Abständen. Viele Nutzer haben in ihren Browser-Einstellungen die Standardschriftgröße erhöht (z.B. weil sie eine Sehschwäche haben). Wenn du deine Schriftart fest auf 16px „einbetonierst“, ignorierst du die Wünsche deiner Besucher. Das ist schlecht für die Barrierefreiheit (Accessibility).
Zudem sind Pixel „starr“. Sie skalieren nicht automatisch mit.
Die Relativen: em und rem
Jetzt wird es spannend. Um flexible (responsive) Webseiten zu bauen, nutzen Profis relative Einheiten. Diese beziehen sich immer auf einen anderen Wert.
Was ist em?
Die Einheit em bezieht sich auf die Schriftgröße des Elternelements (des direkten Containers).
Ein Rechenbeispiel:
Der Standard im Browser ist meistens 16 Pixel.
Wenn du einem Bereich (div) eine Schriftgröße von 20px gibst und darin einen Absatz (p) mit 1.5em platzierst, passiert Folgendes:
20px (Eltern) x 1.5 (em) = 30px
Das klingt logisch, oder? Aber em hat eine Tücke: Den Zinseszinseffekt.
Wenn du em ineinander verschachtelst (eine Liste in einer Liste in einer Liste), multiplizieren sich die Werte immer weiter. Schnell hast du riesige oder winzige Schriften, ohne zu wissen, warum. Deshalb ist em für Schriftgrößen oft schwierig zu handhaben.
Wann nutze ich em?
Ich nutze em gerne für padding (Innenabstand) oder margin (Außenabstand) von Buttons. Warum? Weil der Abstand dann wächst, wenn ich die Schriftgröße im Button ändere. Der Button bleibt proportional perfekt!
Der Retter in der Not: rem (Root em)
Hier kommt mein absoluter Favorit: rem. Das steht für „Root em“.
Der Unterschied zu em ist klein, aber mächtig. rem bezieht sich nicht auf das Elternelement, sondern immer auf das Wurzelelement (html).
Standardmäßig sind das im Browser 16px.
- 1rem = 16px
- 2rem = 32px
- 0.5rem = 8px
Der riesige Vorteil:
Egal wie tief du deine Elemente verschachtelst, 1rem bleibt immer 1rem. Es gibt keine bösen Überraschungen durch Multiplikation. Gleichzeitig ist es barrierefrei. Wenn ein sehbehinderter Nutzer seinen Browser-Standard auf 24px stellt, wächst deine gesamte Seite (Schriften, Abstände) proportional mit, weil sich alles auf diesen Basiswert bezieht. Dein Layout bleibt intakt, aber der Nutzer kann alles lesen.
Viewport Units: vw und vh
Kurz der Vollständigkeit halber, da du sie oft in modernen Themes siehst:
- vw (viewport width): 1vw entspricht 1 % der Bildschirmbreite.
- vh (viewport height): 1vh entspricht 1 % der Bildschirmhöhe.
Diese Einheiten sind genial für Hero-Sektionen (die großen Bilder ganz oben auf der Seite). Mit height: 100vh; sagst du: „Sei bitte exakt so hoch wie der Bildschirm des Geräts.“
Die ultimative Cheat-Sheet: Was nutze ich wann?
Damit du nicht jedes Mal überlegen musst, hier meine persönliche Faustregel für modernes Webdesign:
| CSS-Eigenschaft | Empfohlene Einheit | Warum? |
| Schriftgröße (font-size) | rem | Skaliert perfekt, ist barrierefrei und einfach zu berechnen. |
| Abstände (padding/margin) | rem (oder em) | Sorgt für ein konsistentes Raster auf der Seite. |
| Rahmen (border) | px | Eine 1px-Linie soll meistens genau das bleiben. |
| Layout-Breiten (width) | % oder vw | Damit sich Spalten dem Bildschirm anpassen. |
| Media Queries | em oder rem | Damit auch der Umbruchpunkt (Breakpoint) skaliert, wenn der Nutzer zoomt. |
Fazit: Trau dich weg vom Pixel!
Der Umstieg von px auf rem fühlt sich am Anfang komisch an. Man muss plötzlich ein wenig im Kopf rechnen („Wie viel rem sind nochmal 24px? Ach ja, 1.5rem“).
Aber die Mühe lohnt sich. Deine Website wird robuster, zugänglicher und zukunftssicherer. Du baust kein starres Poster mehr, sondern ein flexibles Interface, das sich dem Nutzer anpasst.
Mach den Test!
Geh doch jetzt direkt mal auf deine eigene Website und drücke Strg + + (oder Cmd + + auf dem Mac), um hereinzuzoomen. Bleibt dein Layout schön? Werden die Texte lesbar größer, aber die Proportionen stimmen noch?
- Ja? Super, du hast alles richtig gemacht!
- Nein? Dann ist es Zeit für ein kleines CSS-Update.
