Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03424.jsonl.gz/429

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: 48em){ html {font-size: 125%;} }
Hier noch ein Beitrag zum Thema Media Queries.
Beitragsbild: Alexander Andrews @ Unsplash