Pixel, em und rem – was ist der Unterschied?

Im CSS kann man die Schriftgröße (font-size) 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.

ZUM WEITERLESEN
Dieser Artikel befasst sich mit den Einheiten ch und ex:
Die CSS-Einheiten em, ch und ex

Beispiel em

<div class="content" style="font-size:1.0em">
<h2 style="font-size:2.5em">Eine Headline</h2>
</div>Code-Sprache: HTML, XML (xml)

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 entspricht das 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.0em. 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%;
}Code-Sprache: CSS (css)

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;
}

(...)Code-Sprache: CSS (css)

Alle Größen orientieren sich am im html-Element angegebenen Ausgangswert.
Der Vorteil der Einheit rem: 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. Die Handhabung ist denkbar einfach und man muss sich nicht viel denken. Die Einheit Pixel ist allerdings nicht flexibel. 16 Pixel sind immer 16 Pixel, ganz gleich, was um sie herum passiert.
Wenn jemand beispielsweise in seinem Browser die Schriftgröße verändert, weil er alles ein bisschen größer sehen möchte, reagieren Texte, bei denen die Schriftgröße in Pixel angegeben ist, nicht auf diese Einstellung. Ist die Schriftgröße in em oder rem angegeben, skaliert der Text.

Aus demselben Grund sind Pixel für das Responsive Design ein bisschen unpraktisch. Das Arbeiten mit relativen Einheiten hat hier einige Vorteile.

Schriftgröße für Responsive Design

Angenommen, wir haben eine Überschrift H1, die relativ groß ist. Darunter steht dann ein Absatz, der von einem p-Element umschlossen ist.

<h1>Headline H1</h1>
<h3>Headline H3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. </h3>Code-Sprache: HTML, XML (xml)

Wird der Bildschirm größer oder kleiner, soll sich die Schriftgröße entsprechend anpassen.
Ich definiere über Mediaqueries zwei Bildschirmbreiten, bei denen sich die Schriftgröße ändern soll. Eine Mediaquery für keinere Bildschirme (kleiner als 800 Pixel) und eine zweite für große Bildschirme (größer als 1200 Pixel).

h1{font-size:32px;}
h3{font-size:16px;}

@media screen and (max-width: 800px){
h1{font-size:40px;}
h3{font-size:24px;}
}

@media screen and (min-width: 1200px){
h1{font-size:64px;}
h3{font-size:32px;}
}Code-Sprache: CSS (css)

Das Ergebnis sieht im Browser dann so aus:

Mit relativen Einheiten im CSS sieht die Darstellung im Browser genau gleich aus, aber das CSS wird viel übersichtlicher. Denn ich kann mehrere Elemente auf einmal ansprechen, indem ich definiere, dass sämtliche Schriftgrößen innerhalb des umgebenden Containers (der hier ‚content‘ heißt) kleiner oder größer werden sollen.
Dazu muss ich nur im entsprechenden Container die Angabe zur font-size verändern, die einzelnen Elemente – h1 und h3 – passen sich automatisch an.

.content{font-size:1em;}
.content h1{font-size:2em}
.content h3{font-size:1.0em}

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

@media screen and (min-width: 1200px){ 
.content{font-size:2em} 
}Code-Sprache: CSS (css)

Übrigens:
Man kann auch Abstände (margin und padding) und auch Mediaqueries in relativen Einheiten (em) angeben. Das hat den Vorteil, dass man das CSS am Inhalt ausrichten kann anstatt an irgendwelchen abstrakten Gerätegrößen. Das ist ein Thema für einen weiteren Artikel (coming soon).

Dieser Artikel ist ursprünglich im Mai 2014 erschienen. Er wurde im November 2019 aktualisiert und überarbeitet.