Em und rem – was ist der Unterschied?

Dieser Artikel ist ursprünglich am 27. 05. 2014 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Im CSS kann man die Schriftgröße in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?

Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.

Beispiel em

<div class="content" style="font-size:1.0em">
<h2 style="font-size:2.5em">Eine Headline</h2>
</div>

Eine Überschrift h2 sitzt in einem Container mit der CSS-Klasse „content“.
Als Schriftgröße (font-size) für den Container sind 1,0em definiert – in der Regel ist das das Equivalent zu 16 Pixeln.
Eine h2, deren Größe mit 2,5em angegeben ist, hat also die 2,5-fache Größe. Aber 2,5 wovon?
Der Faktor 2,5 bezieht sich auf den Wert, der im Container „content“ festgelegt ist, das ist die font-size: 1,0 em. Wenn man nun 1,0em mit 16 Pixeln gleich setzt, wären das also 16 Pixel *2,5= 40 Pixel.

Beispiel rem

Die Einheit rem ist identisch mit der Einheit em, aber mit einem kleinen Extra-Dreh: Das Element, auf den sich diese Einheit bezieht, ist das root-Element, also das html-Element. Das ist der oberste Container, weiter nach oben geht es nicht mehr. Damit ist das html-Element der root-Container.

r (wie root) + em = rem.

In der CSS Datei definiert man eine Schriftgröße im html-Element, zum Beispiel so:

html{
font-size:100%;
}

Im weiteren Verlauf des Stylesheets kommen dann die anderen typografischen Elemente dazu, der Fließtext, die Überschriften und so weiter.

p {
font-size:1.0rem;
}

h1 {
font-size:2.5rem;
}

h2 {
font-size:2.0rem;
}

(...)

Alle Größen orientieren sich am im html-Element angegebenen Ausgangswert.
Der große Vorteil der Einheit rem: Man weiß immer, wie groß ein Text erscheint, denn die Schriftgröße ist unabhängig von ihrer direkten Umgebung. Ganz gleich, wie viele Container um das Element herumgeschachtelt sind, 2,0rem sind immer und überall gleich groß.

Und warum nicht einfach Pixel?

Eigentlich ist nichts falsch an Pixeln. Wenn Responsive Design ins Spiel kommt, hat das Arbeiten mit relativen Einheiten jedoch einige Vorteile.

Nicht nur, dass die Schriftgrößen „schöner“ skalieren, ich kann beispielsweise in einer Mediaquery für kleine Bildschirme definieren, dass sämtliche Schriftgrößen innerhalb eines Containers kleiner werden sollen. Dazu muss ich nur im übergeordneten Container die Angabe zur font-size verändern, die einzelnen Elemente – wie p, h1, h2 – passen sich automatisch an. Dadurch kann ich eine Menge CSS-Code einsparen.

Responsive Design und relative Schriftgrößen

.content{font-size:1.0em;}
.content h2 {font-size:2.5em}
.content h3 {font-size:2.0em}
.content p {font-size:1.0em}

@media screen and (max-width: 600px){
.content{font-size:0.9em}
}

In der Mediaquery steht, dass die Schriftgrößen (font-size) im Container „content“ auf kleinen Bildschirmen (bis 600 Pixel Breite) auf 90% (0.9em) verkleinert werden. Mit einer Zeile CSS kann ich sämtliche Textelemente auf einmal ansprechen.

Übrigens:
Man kann auch Abstände (margin und padding) und sogar Mediaqueries in relativen Einheiten (em) angeben.

Im Artikelbild wurde Bildmaterial von MarkM73/istockphoto verwendet.


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0