CSS: Der Unterschied zwischen rem und em

Wir zeigen dir den Unterschied zwischen der CSS-Einheit em und rem. Einfaches umrechnen von Pixel zu rem mit der entsprechenden Formel. Mit CSS 3 kam eine weitere Einheit für Schriftgrößen hinzu. Rem (Root em) verhält sich in der Größendefinition gleich wie die Einheit em, mit dem einzigen Unterschied, dass sie sich an dem Root-Element (html, body) orientiert.

Beispiel em

Hier hat der Container die Schriftgröße 2em und vererbt diese an die Überschrift H2. Da die H2 allerdings wieder mit 2em definiert ist, wird diese letztendlich 4em groß.

Beispiel rem

Im Gegensatz hierzu ist bei rem die Überschrift H2 auch letztendlich nur 2rem groß.

Umrechnung Pixel zu rem

Einfaches umrechnen von Pixel zu rem mit der entsprechenden Formel. Um die Pixelgröße für rem zu definieren muss man nur folgende Formel anwenden:

Pixel % 16 = rem

Demnach entsprechen 32px = 2rem. Diese Formel lässt sich auf das gesamte Layout anwenden.

Browsersupport für „rem“

Rem wird von allen modernen Browsern unterstützt, Browser wie z.B. der Internet Explorer 8 und ältere Browser können mit dieser Einheit jedoch nicht umgehen.

Fazit

Rem empfiehlt sich für den Einsatz bei responsiven Webseiten, da man durch die Modifikation  der Schriftgröße des Root-Elements schnell das gesamte Layout anpassen kann. Hat man hingegen Pixelangaben definiert, so muss man jede Angabe manuell abändern.

rem als CSS-Einheit bringt ein großes Potential für die Umsetzung moderner Webdesigns

Adrian Weinschenk, Teamleiter UX/UI in Stuttgart