In meinem WordPress-Alltag begegnen mir immer wieder Webseiten, auf denen die Schriftgröße in Pixelwerten (px) angegeben ist. Das ist auch verständlich, denn in vielen Page Buildern ist px die Voreinstellung. Viele Menschen wissen gar nicht, dass das auch anders (und besser) geht.
Was ist das Problem mit Pixelwerten?
Grund Nr. 1: Responsive Webdesign lässt sich mit px viel schwieriger umsetzen als mit relativen Größenangaben. Wie das besser geht, erfährst du weiter unten.
Grund Nr. 2: Pixelwerte sind eine fixe Maßeinheit. Sie lassen sich nicht skalieren. Es gibt viele Menschen, die ihren Browser so voreingestellt haben, dass Schriften automatisch größer dargestellt werden, wenn sie eine Webseite aufrufen. Etwa, weil sie eine Sehschwäche haben oder generell lieber größere Schriften lesen.
Wenn du die Werte in px angibst, funktioniert das nicht. 16px bleiben dann immer 16px. Die Leute müssen zoomen. Das ist nervig. Vielleicht wissen sie auch gar nicht wie das geht. Und schuppdiwupp sind sie wieder weg, obwohl sie dein Angebot vielleicht großartig gefunden hätten. Das ist schlecht für deine Conversion!
Wie sieht die Lösung aus?
Em und rem sind relative Schriftgrößen. Sie beziehen ihren Ausgangswert aus der Voreinstellung des Browsers. Die Standardeinstellung der meisten Browser ist 16px. Daher solltest du von diesem Wert ausgehen. Eine Schriftgröße von 16px entspricht 1rem oder 1em. Wenn du eine andere Schriftgröße bevorzugst, musst du rechnen.
Die Umrechnung erfolgt über die Formel: Gewünschter Pixelwert / 16px.
Beispiel: Du willst deine Schrift in 18px dargestellt haben. Dann rechnest du 18/16 = 1,125rem oder 1,125em. Diesen Wert gibst du jetzt einfach in deinem Page Builder oder Stylesheet an.
Wenn du dir unsicher bist, kannst du auch einen Online-Converter verwenden.
Für das Body-Element solltest du die font-size mit 100% angeben.
body { font-size: 100%}Denke daran, dass du auch die Zeilenhöhe relativ angeben musst. Sonst leidet das Schriftbild bei einer Skalierung.
Dazu musst du die Formel anpassen. Angenommen, du hast eine Überschrift, die 30px groß ist. Die Zeilenhöhe soll 48px betragen. Dann berechnest du die Angabe in em oder rem wie folgend:
48px/30px = 1,6rem oder 1,6em. Nun gibst du die Zeilenhöhe mit 1.6rem oder 1.6em an.
Was ist der Unterschied zwischen em und rem?
Der Unterschied liegt in der Vererbung. Em vererbt sich, rem nicht.
Eine Schrift in 1.5rem ist immer 1.5rem groß. Egal, was um sie herum passiert.
Wie groß eine Schrift in 1.5em ist, ist von den umgebenden Elementen abhängig.
Wenn du eine Überschrift mit em definierst, ist die Schriftgröße von ihren Elternelementen abhängig. Angenommen, die Überschrift steht in einer Spalte, die eine font-size von 1.5em hat. Dann ist dieser Spaltenwert der Ausgangswert für die Berechnung der Überschriftengröße.
Ja, das klingt kompliziert und kann tatsächlich Nerven kosten. Wenn Elemente dann auch noch an eine andere Stelle verschoben werden, kann es passieren, dass diese nicht mehr die gewünschte Schriftgröße besitzen. Nerviger Rechenaufwand und ein rauchender Kopf sind die Folge.
Ich persönlich verwende daher lieber rem. Für mich vereint rem die Vorteile von px und em und lässt sich leicht anwenden.
Responsive Webdesign mit em oder rem
Dadurch, dass rem und em relative Werte sind, lassen sie sich prima für responsive Webdesign verwenden.
Für kleinere Bildschirme kannst du die font-size im body-Element einfach auf einen geringeren Prozentwert setzen.
body { font-size: 90%}Und tatarataaa: Alle Schriften erscheinen jetzt etwas kleiner. Das geht schnell und spart Zeit. Bei der Verwendung von Pixelwerten müsstet du stattdessen jede Schriftgröße einzeln anpassen. Verwende deine Zeit lieber für schönere Dinge.
Die genaue Prozentangabe musst du natürlich immer für deine Webseite auf mobilen Endgeräten überprüfen.
Wie ist die Browserunterstützung für em und rem?
Alle modernen Browser unterstützen die Angabe in em und rem. Alte Versionen des Internet Explorers kennen rem jedoch nicht. Wenn du diese Browser beachten willst, solltest du eine Fallback-Lösung mit px verwenden.
Das geht in CSS so:
font-size:20px;
font-size:1.25rem;Browser, die rem nicht kennen, verwenden die Angabe in px. Alle anderen Browser überschreiben den Wert in px mit rem.
