Schriftgrössen für das Web

Bild von Alexander Andrews auf Unsplash

Es gibt drei Hauptoptionen zur Einstellung der Textgrösse im Web mit CSS. Die Schriftgrösse kann in “Pixel”, in “EM”s oder in “REM”s eingestellt werden. Es kann etwas schwierig sein, zu verstehen, wo die Unterschiede liegen und welche Masseinheit richtig ist.

Historisch gesehen ist die gebräuchlichste Einheit für die Textgrösse im Webbrowser das Pixel. Das Pixel ist sehr einfach zu verstehen und hilft Entwicklern und nicht-technischen Designern, einen gemeinsamen Referenzrahmen zu verwenden. Die Verwendung dieser festen Einheit führt jedoch für viele Website-Besucher zu Usability-Problemen.

Geräte, die das visuelle Browsen im Web ermöglichen, verfügen über eine eingebaute Option, mit der der Benutzer den Text vergrössern oder verkleinern kann. In Chrome kann ich beispielsweise wählen, die Grundschriftgrösse auf “gross” einzustellen, was mir hilft, längere Textpassagen leichter zu lesen und meine Augen zu entlasten. Bei den Barrierefreiheitswerkzeugen in Browsern geht es nicht nur darum, blinde oder behinderte Benutzer zu unterstützen; sie sind für alle da.

Wenn ein Programmierer die Schriftgrösse in Pixel festgelegt hat, hält sich der Browser streng an die in CSS festgelegten Regeln. Beispielsweise verwendet die NZZ-Website für Artikel, die auf grösseren Bildschirmen angezeigt werden, Text, der auf eine feste Grösse von 20px eingestellt ist. Aufgrund dieser Wahl erscheint der Text auf dieser Website in meinem Browser viel kleiner als auf anderen Websites, da die Website meine Browsereinstellungen für grösseren Text nicht berücksichtigt.

Die einzige Möglichkeit, den Text auf Websites wie NZZ zu vergrössern, besteht darin, die Zoomfunktion meines Mac (Cmd +) zu verwenden, um die gesamte Seite zu vergrössern – einschliesslich Bilder, Trennlinien und so weiter. Bei einigen Websites funktioniert dies gut, aber bei anderen kann es das Layout zerstören und die Seite sogar auf das Design der mobilen Website umschalten.

Wie kann ich also als Front-End-Entwickler sicherstellen, dass ich die Anforderungen meiner Besucher richtig unterstütze? Ich kann entweder REM oder EM für die Textgrössenanpassung verwenden. Es gibt jedoch einen wichtigen Unterschied zwischen diesen beiden relativen (skalierbaren) Einheiten.

Die Einheit EM entspricht direkt der Grösse des Elternelements in der HTML-Struktur. Wenn die Grösse des Quelldokuments – mein body-Element – 20 Pixel entspricht und ich die Grösse eines Absatzes direkt “innerhalb” des body auf 1,2em setze, dann wird der Absatz mit 24px angezeigt. Wenn ich die Grösse des Fliesstextes (body) um 25% erhöhe, dann wird der Absatz ebenfalls grösser. Ich unterstütze also meine Besucher, indem ich ihnen erlaube, den Text zu vergrössern.

Wenn ich jedoch mit EM-Einheiten Grössen über verschachtelte Elemente hinweg festlege, dann werde ich auf ein Problem stossen. Nehmen wir zum Beispiel an, dass ich die Grösse einer Liste ul auf 1.1em setze, so dass sie etwas grösser ist als das div, das sie enthält. Die Schriftgrösse des div entspricht 20 Pixeln, so dass die ul dem Äquivalent von 22px entspricht. Das ist gut so. Aber was passiert, wenn ich ein anderes verschachteltes UL innerhalb des ersten ul verwende? Die innere ul ist jetzt 110% des Elements, in dem sie sich befindet, also 24,2px. Eine weitere verschachtelte ul (Ebene 2) wird 26,6px betragen. Und so weiter. Je tiefer die Verschachtelung, desto grösser wird der Text. Und wegen der Verschachtelung werde ich feststellen, dass die CSS-Übersteuerungsregeln für verschachtelte Elemente sehr schnell sehr kompliziert werden.

Die Alternative ist die Verwendung von REM. Ein REM ist ein “relatives EM”: In diesem Fall relativ zum html-Element, das das Root-Element des gesamten Dokuments ist. Wenn ich eine Grundschriftgrösse auf dem html-Element von 16px verwende, kann ich leicht berechnen, wie gross das ul im Vergleich zum HTML-Element ist. Ich möchte, dass die ul 110% der Basistextgrösse beträgt, also würde ich die Schriftgrösse der ul auf 1,1rem setzen. Das bedeutet, dass seine Schriftgrösse dem Äquivalent von 17,6px entspricht und unabhängig vom übergeordneten Element ist.

Dieses Beispiel basiert jedoch immer noch auf einem Pixelwert. Dadurch wird das von mir erwähnte Usability-Problem wieder eingeführt. Glücklicherweise ist es leicht zu vermeiden, da jetzt nur eine Pixelgrösse definiert ist: 16px auf dem html-Element. Da die Grundschriftgrösse in allen modernen Browsern 16px beträgt, bedeutet das, dass ich stattdessen einen Prozentwert auf dem html-Element verwenden kann: 100%.

Wenn ich möchte, dass der gesamte Text für grössere Bildschirmauflösungen vergrössert wird, muss ich nur den Prozentwert auf dem html-Element mit einer @media-Query ändern.

Hier ein Beispiel, wie das aussehen könnte:

html {font-size: 100%;}
p {font-size: 1rem;}
ul {font-size: 1.1rem;}

@media screen and (min-width: 768px){
    html {font-size: 125%;}
}

Hier noch ein Beitrag zum Thema Media Queries.

Beitragsbild: Alexander Andrews @ Unsplash


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 1 )
Passende Themen
Kommentare (1)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

  1. Andre Wobmann vor 3 Wochen

    Die Möglichkeit, Schriftgrössen in EM oder REM anzugeben, gibt es in CSS seit mehr als 7 Jahren. Ich kann nicht verstehen, warum sich diese Masseinheit noch nicht wirklich durchgesetzt hat. Für mich ist es das ideale Instrument um Texte auf allen Ausgabegeräten optimal darzustellen. ER und REM bieten sehr viele Vorteile im Umgang mit den verschiedensten Ausgabegeräte wie wir sie heute verwenden. Anscheinend stört es die Ersteller von vielen Websites nicht, dass je nach Gerät die Texte schlecht lesbar sind und die Site einfach nur unprofessionell aussieht. Es ist zu hoffen, dass sich (R)EM in Zukunft durchzusetzen vermag.

    Please wait...