Warum du die Schrift auf deiner Webseite in em oder rem definieren solltest und nicht in px / So machst du deine Schrift responsive

09.11.2020 | Webdesign, WordPress

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.

Unterscheid em und rem

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.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.

– Über mich –

Sylvia Klatt Autor

Hi, ich bin Sylvia Klatt, Webdesignerin und WordPress-Expertin. Hier blogge ich über WordPress und Divi.

Erfahre mehr über mich…

– Meine Empfehlung* –

Affiliate Link Raidboxes

*Dies ist ein Affliate Link, d.h. ich bekomme eine Provision, wenn du auf diesen Link klickst und Raidboxes buchst. Dir entstehen dadurch keine zusätzlichen Kosten. Ich empfehle Raidboxes aus voller Überzeugung: schnelle Ladezeiten, klimapositiv, super Support, auf WordPress spezialisert.

Diese Blogbeiträge könnten dich auch interessieren:

Eine Seite in WordPress duplizieren – so funktioniert es!

Eine Seite in WordPress duplizieren – so funktioniert es!

Gastbeitrag von Meriem Benois von Raster & Pixel Wer regelmäßig Content für seine eigene oder auch für eine fremde Website erstellt, kennt das Problem, Seiten oder Beiträge kopieren zu wollen ohne diese komplett neu erstellen zu müssen. Da ist es hilfreich, wenn...

In 7 Schritten zu deiner erfolgreichen Website

In 7 Schritten zu deiner erfolgreichen Website

Eine Website zu erstellen, ist ähnlich wie ein Hausbau. Du kannst die Wände irgendwohin setzen. Ist dann halt blöd, wenn die Wand zwischen Bad und Schlafzimmer fehlt oder der Architekt die Öffnung für die Haustür vergisst. Eine Website zu bauen, ist ganz ähnlich. Eine...

WordPress oder Wix?

WordPress oder Wix?

Was ist eigentlich der Unterschied zwischen Wix und WordPress und welches System ist für deine Unternehmens-Website besser geeignet? Wix Wix ist ein Baukastensystem. Es passt zu dir, wenn du schnell und ohne technisches Vorwissen deine Website erstellen willst. Anhand...