Das muss etwas nach links … EM, REM oder PX?

Wenn du dein gerade vollbrachtes Werk im Webdesign dem Kunden oder dem Designer vorstellst, dann gibt es ausser der Überprüfung der Funktionalität, der Farben und Schriften IMMER den Wunsch:

Das muss noch ein wenig nach links [rechts, oben,unten, grösser, kleiner, länger, kürzer] …

„Ein wenig“ ist dabei eine sehr variable Größe (so ähnlich wie „schön“ oder „blauer“). Besonders komplex sind die Zusammenhänge, wenn das Layout einer Site responsiv ist. In diesem Falle passt sich die Darstellung der Elemente einer Site der zur Verfügung stehenden Fläche auf dem Bildschirm an. Eine Änderung eines Abstands oder einer Schriftgröße kann unerwünschte Folgen bei anderen Bildschirmgrößen haben.

Jeder Kunde und jeder Designer kennt das Wort Pixel. Früher, als noch gedruckt wurde, waren es DPI (dots per Inch). Ein Pixel ist nach gängiger Meinung (und in Photoshop!) ein kleiner Punkt. Den kann man auch sehen, auf dem Fernseher, dem Telefon, dem Tablet oder gar der smarten Uhr: Heute ist so ein Pixel nur noch mit der Lupe erkennbar, weil es so viele davon gibt, die Maßeinheit hat sich aber im Kopf vieler Menschen festgesetzt. 10 Pixel sind mehr als ein Pixel und wenn man etwas, sagen wir mal 50 Pixel, nach links [rechts, oben,unten, größer, kleiner, länger, kürzer] verschiebt, dann sieht man das deutlich.

Irgendwann ist man als Dienstleister/Entwickler/Site Builder im Laufe eines solchen Gesprächs oft an dem Punkt, an dem man ein Element dann n Pixel irgendwohin schiebt oder vergrößert, beispielsweise im Site Inspektor eines Browsers.

Ja, so sieht das schon viel besser aus!

Der Kunde hat zunächst, was er will und du deine Ruhe. Und dann schaust du dir die Seite auf einem Smartphone an und stellst fest, das nun 50 Pixel irgendwo anders fehlen.

Pixel sind absolut (gnadenlos)!

So ein Browser hat beispielsweise eine Standardgröße für die Schriftdarstellung, sagen wir mal 16 Pixel. Die kann der Benutzer verändern. Wenn ich nun eine Schriftgröße in Pixel, beispielsweise die besagten 50 Pixel darstelle, so sieht das gemeinsam mit der Standardschriftart in 16 Pixel vielleicht „schön“ aus und der Kunde ist glücklich. Wenn die Größe dieser Standardschrift aber vom Benutzer verändert wird, sagen wir mal auf 20 Pixel oder mehr, dann wird der 50 Pixel Text immer noch in 50 Pixel dargestellt. Das heißt, der Unterschied zwischen der Standardgröße und meiner „absolut“ festgelegten 50 Pixel Schrift verändert sich. Dadurch kann es sein, dass andere Effekte auftreten (Button zu klein, Schrift wird abgeschnitten, etc). Das kommt aber auch darauf an, wie „modern“ mein Browser ist.

Das Ergebnis ist oft ein

oh, das müssen wir aber noch ändern, damit es auf dem Telefon „gut“ angezeigt wird.

Ja klar, aber wie und auf welchem Telefon? 🙂

Prinzipiell kann man das durchaus mit Pixelangaben lösen, da „moderne“ Browser das mittlerweile auch irgendwie umrechnen. Man muss aber trotzdem jeden Fall beachten und hat ein komisches Gefühl bei der Verwendung von absoluten Einheiten.

Besser wäre die Abkehr von einer absoluten Größe zu einer relativen Größe (Das war übrigens mal ganz am Anfang des Webs so. Und dann erfand jemand absolute Einheiten in CSS 🙂 ).

• Absolute Einheiten sind px, xx-small, x-small, small, medium, large, x-large und xx-large. Sie sind gewissermaßen die direkten Nachfolger von Zentimetern, Inches, Millimetern, typografischen Punkten und Pica.
• Relative Einheiten sind em, ex, rem, %, smaller und larger.

Wenn etwas relativ ist, dann muss es sich ja von etwas ableiten lassen. Im Falle der relativen Einheiten ist dafür das rem zuständig (rem = root em).

Wenn beispielsweise body {font-size: 100%} definiert ist, dann ist das die im Browser eingestellte Schriftgröße. Also so ungefähr 16 Pixel in der Standardeinstellung. Wenn man nun die Schrift „etwas größer“ in 18 Pixel haben will, dann wäre das in rem ausdrückt font-size: 1.125 rem. Man nimmt einfach die Formel

Pixelwert / 16 = rem-Wert

18 Pixel geteilt durch 16 Pixel sind 1.125 rem. Und wenn der Benutzer seinen Browser auf 20 Pixel einstellt, so würden 1.125 rem eine Schriftgröße von etwa 22.5 Pixel erzeugen. Das heißt die Schrift würde relativ zur eingestellten Größe „passen“. Würde sie auf 18 Pixel Größe eingestellt sein, wäre sie absolut richtig, aber relativ zu klein.

Über relative Schriften freut sich der Benutzer wenn er beispielsweise, so wie ich, auf seinem Telefon eine größere Schrift eingestellt hat. Dann kann er nämlich alles lesen!

An dieser Stelle beginnt dann oft eine längere Diskussion mit Kunden und Designern, dass das mit dieser responsiven Darstellung ja echt viel Aufwand sei und wie solle man denn da seine Photoshop Layouts machen?

Das weiß ich dann als Entwickler auch nicht, aber ich wiederhole mal und schreibe es fett:
Über relative Schriften freut sich der Benutzer wenn er beispielsweise auf seinem Telefon eine größere Schrift eingestellt hat. Dann kann er nämlich alles lesen! 

Wie geht das praktisch?

Als Erstes muss diese ganze Umrechnerei weg, ansonsten wird man ja völlig wirr. Statt 16 Pixel nimm man einfach 10 Pixel an. Das ist zwar absolut zu klein, aber einfacher zu rechnen. Wenn body {font-size: 62.5%} ist, ist die Basiseinheit nicht mehr 16 Pixel sondern 10 Pixel (10 geteilt durch 16 sind 0.625 also 62.5%). Nach der oben erwähnten Formel berechnen sich die rem’s dann so

Pixelwert / 10 = rem-Wert

Eine 16 Pixel Größe wäre dann 1.6 rem und eine 18 Pixel Grösse 1.8 rem. Das ist doch schon viel handlicher als 1.125 rem!
Jetzt sind alle glücklich, der Kunde, der Designer, ich und du!

Wozu dann EM?

Ein em hat seinen Ursprung ebenfalls im Druckbereich und bestimmt die Zeichenbreite in Abhängigkeit von der Schriftgröße (Schrifthöhe). Und dieses em orientiert sich historisch tatsächlich an der Breite des Buchstabens M (siehe auch Wikipedia zu diesem Thema em (Schriftsatz)). In CSS ist ein em eine Mischung aus benutzerdefinierten Einstellungen im Browser, der Schriftgröße und der Schrift, die benutzt wird. Ein em entspricht so „Pi mal Daumen“ übrigens ebenfalls 16 Pixel.
Als Einheit für die Schriftgröße macht es aus diesen Gründen nicht wirklich Sinn, obwohl es natürlich auch funktioniert  (Die Schriftgröße verändert sich natürlich wenn man als Einheit em benutzt).

Die Einheit em ist aber praktisch wenn es um Media Queries geht. Hier sind moderne Browser immer noch nicht „modern“ genug um Pixel Angaben gleich zu verarbeiten, besonders Safari und alle älteren Browser haben so ihre Probleme. Der Safari auf dem Desktop wäre ja noch verschmerzbar aber auch der mobile Safari hat so seine Eigenheiten. Wenn man also davon ausgeht das 1 em ungefähr 16 px sind, dann sind 25em halt 400 px. In em denken geht schnell. Wenn der Safari das dann auch kann, kann man em wieder vergessen und in Pixeln weiter denken.

Disclaimer: Ich bin kein Designer und benutze daher aus Ermangelung besseren Wissens gern Frameworks wie Bootstrap in Kombination mit Drupal und WordPress. Letzte Woche habe ich eine Seite in Bootstrap 4 anstelle Bootstrap 3 erstellt und bin erstmals über dieses Thema gestolpert – in besagtem Meeting. Bootstrap 4 benutzt standardmäßig übrigens rem anstelle px. Und Apple lieferte letzte Woche auch noch ein Update vom Safari Browser.

Als besonderes Schmankerl fand ich dann noch R.I.P. REM, Viva CSS Reference Pixel! aus dem Jahr 2015. Zitat daraus:

If you are still using “rem” or “em” for accessibility purpose, stop using them immediately! They are completely counter intuitive and just introduce another level of abstraction that is no longer needed. You’re never sure what the root element font-size is and you need to do math in order to get something you can relate to (pixel).

Es gibt also dieses Mal kein echtes Fazit und der Autor zieht sich verwirrt mit der Frage „Was würde Steve machen?“ aus dem Ausflug ins Design zurück.

Wie hältst du es mit Pixeln, rem’s und em’s?

tl;dr: Stand 20.9.2017: Verwende kein px! Nimm rem für Größen und Abstände und em für Media Queries. Beobachte, ob Safari modern wird und was sich Frontend Designer noch alles ausdenken. Versuche Bootstrap 4 zu nutzen.