Blog:

grafik-service

EM vs. REM

von Anja Mertens

grafik-service im neuen CI

EM vs. REM

In diesem Beitrag geht es um die responsive Einheiten em und rem im CSS. Es sind relative Einheiten und man fragt sich eigentlich immer: Zu welchem Bezugspunkt?

Allgemein bekannte Einheiten sind “px” oder “%”. Pixel ist eine absolute Größenangabe. Angaben in Pixel sind eher unflexibel, da sich im responsiven Webdesign, die Elemente dynamisch am Ausgabemedium anpassen. %-Angaben beziehen sich (zumindest meistens) auf das umschließende Element.

EM und REM sind Einheiten bezogen auf die Schriftgröße. Ein EM bezieht sich auf die aktuelle Schriftgöße des betreffenden Elements. Die Schriftgröße kann mit festen Angaben in Pixeln vorgegeben sein oder wird vom Elternelement geerbt. Bei einer Schriftgröße von 14px ( = 1em), entspricht .5em = 7px.

REM ist die Größe relativ zur Schriftgröße des HTML-Tag. Standardmäßig sind es 16px, es sei denn es ist etwas anderes definiert oder der Browser hat andere Standards.

em = Größe von “M” (relativ zur Schiftgröße des betroffenen Elements)
rem = “root EM” (relativ zur Schiftgröße im HTML-Tag)

Nun zum Einsatz: Relative Größen ermöglichen es Elemente schnell an unterschiedliche Erfordernisse anzupassen ohne “an vielen Schrauben drehen” zu müssen. Man ändert die Schriftgröße auf das HTML-Element, gleichzeitig passen sich Fließtexte und Überschriften automatisch an. Gleiches gilt dann auch für Buttons, Teaser, etc.

Am Beispiel lässt es sich besser erklären. Zu unserer Website gehören Buttons, bestehend aus Text, Rahmen und entsprechend passenden inneren Abständen.

Um unseren Button habe ich ein Blockelement gelegt mit einer bestimmten Schriftgröße. Die Buttongröße ist abhängig von den geerbten Schriftgrößen. Alle Größenangaben den Button betreffend benutzen die Einheit EM:

.button {
font-size: 1em;
display: inline-block;
padding: .7em 1em ;
margin: 1em;
border: .1em solid silver;
}

Der Unterschied zwischen EM und REM wird klar, wenn man in der Schriftgröße des Buttons die Einheit ändert:

    font-size: 1rem;

Die Schriftgröße berechnet sich jetzt relativ zur Schriftgröße des HTML-tags. Die Breiten und Abstände bleiben relativ zur Schriftgröße des Buttons. Das umschließende div um die Buttons hat keinen Einfluss mehr.

Externe Quellen:

Zurück