rem und kein Ende
Kommentare

Vor fast drei Jahren hatten wir auf einen Artikel von Jonathan Snook hingewiesen; es ging dabei um die magische Dritte: Schriftgrößen mit rem. Und aktuell schein es noch immer so zu sein, das rem, root

Vor fast drei Jahren hatten wir auf einen Artikel von Jonathan Snook hingewiesen; es ging dabei um die magische Dritte: Schriftgrößen mit rem. Und aktuell schein es noch immer so zu sein, das rem, root em, für einige Verwirrung sorgen. Nun also versucht sich Jeremy Church an einer Erklärung – und holt dabei erst einmal gehörig aus.

rem ist eine der neuen Einheiten, die mit CSS3 eingeführt wurden. Mit ihr lassen sich – im Gegensatz zu em – Größen relativ zum Root-Element bestimmen. Damit ist das Thema erklärt und wir können uns dem nächsten Thema zuwenden.

Oder?

Nun, etwas komplizierter ist die Sache schon. Und um für etwas Aufklärung zu sorgen, hat Jeremy Church seinen Blogpost Confused About REM and EM? veröffentlicht. Mit seinem Eingangsstatement bringt er die Sache schön auf den Punkt:

REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.

Was also liegt näher, als Schritt für Schritt durch die verschiedenen Verhalten zu führen?

Am Anfang war der Pixel

… und der Pixel ist, im Gegensatz zu em und rem keine relative Einheit – ein Pixel ist also ein Pixel ist ein Pixel, ganz unabhängig vom Eltern-Element oder von Media Querys; eine Schrift, deren Größe in Pixel angegeben ist, skaliert nicht. Eine Schriftgröße in em tut das allerdings schon, was bisweilen zu ungewollten Nebeneffekten führen kann, wie das folgende Beispiel belegt.

Schriftgrößen in rem skalieren

Quelle: Jeremy Church, CodePen

Die Ausgangsschriftgröße im äußersten Container ist 1.375em, in jedem weiteren div ist die Schriftgröße mit 0.773em angegeben. Wie deutlich zu sehen ist, wird die Schrift immer kleiner. Das liegt daran, dass die Schriftgröße immer 77,3 Prozent der Größe des Elternelements einnimmt. Und 77,3 Prozent von 77.3 Prozent von einer Ausgangsgröße von 22 Pixel – oder 1.375em, um genau zu sein – sind eben 13 Pixel.

Eine Schriftgröße in Pixel ist da wesentlich pflegeleichter, wie Churchs zweiter Pen belegt. Wir haben den Pen geforkt und statt em rem verwendet – und erhalten dabei dasselbe Ergebnis wie im Pen mit der Pixelangabe als Schriftgröße.

Obwohl Church einräumt, dass er selbst rem als Einheit für Schriftgrößen so gut wie nie benötigt, setzt er es ab und an ein, um ein konsistentes Margin oder Padding über verschiedene Elemente hinweg zu erreichen.

Was uns natürlich zur Frage bringt, ob ihr rem als Einheit in eurem CSS verwendet. Wenn ja: Wofür? Und wenn nein: Warum nicht? Und für alle anderen, die sich noch nicht weiter damit beschäftigt haben und weitere Informationen, garniert mit zahlreichen Pens und Codebeispielen suchen, haben wir mit Churchs Blogpost Confused About REM and EM? eine klare Leseempfehlung.

Aufmacherbild: Font size icon yellow button von Shutterstock / Urheberrecht: faysal

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -