Barrierefreie Schriftgrößenanpassung

Abhängig vom verfügbaren Platz und der Geräteauflösung steigert die Anpassung der Schriftgröße den Komfort für Lesende einer Webseite. Damit es „lesbar“ bleibt, sind Unter- und Obergrenzen für die Schriftgröße zweckmäßig.

Diese nachfolgend beschriebene Lösung verfeinert und vereinfacht den im Artikel »Ansprechende Typografie« beschriebenen Weg für die Fontgrößen-Einstellung.

Vorweg:

In diversen Anleitungen wird unterstellt, dass die Basisgröße „1rem“ 16 Pixeln entspräche.

Bisher hatte ich das unreflektiert als „dann wird das wohl so sein“ hingenommen, weil es in meinen Layouts nur in sehr seltenen Ausnahmen „Pixelmaße“ gibt. Für Grundüberlegungen zu diesem Artikel musste ich reflektieren…

Abhängig von Bildschirmformat, -qualität und -auflösung kann eine 16-Pixel-Schrift zwischen »unleserlich klein« und »ertastbar« variieren, was den Bezug auf „Pixel“ für Layout-Modelle aus meiner Sicht sinnlos macht. Unabhängig davon, dass manche CSS-Einstellungen Pixel erwarten und Google fehlende „Pixelangaben“ als fehlerhaftes HTML/CSS anmeckert.

Vor allem ist 1rem bei allen gängigen Browsern von Benutzer-Einstellungen abhängig, weshalb

erheblich wahrscheinlicher ist.

Vielmehr dürfte »1rem« in den meisten Fällen eine vom Nutzer auf seine Anforderungen angepasste Ausgangsgröße sein, die respektiert werden sollte.

Diese bezieht sich (typischerweise) auf die Standardgröße in einem Absatz, der keine weitere Formatierung besitzt. Um diesen Wert sollte sich die bevorzugte Schriftgröße bewegen. Dafür bietet CSS eine Funktion:

clamp⟨Minimum, bevorzugt, Maximum⟩

Doch „bevorzugt“ muss für eine Anpassung abhängig von der aktuellen Gegebenheiten jeweils eingestellt werden. Dafür ist das noch zu wenig. Es bedarf ein wenig Zuarbeit, die mittels CSS-Variablen und einem Grundgerüst allgemeingültig aufgestellt werden kann.

Die maßgeblichen Ausgangsgrößen für eine komfortable Einstellung sind

Mit den ersten vier Parametern wird die Formel für den fünften Parameter gespeist. Zusätzlich werden sie an entsprechender Stelle im Stylesheet verwendet, damit die Werte an den relevanten Stellen übernommen werden.

Idealfall

Zwischen Mindest- und Höchstbreite des Layouts wird die Schriftgröße linear angepasst womit das Layout oberhalb der Mindestbreite unverändert bleibt.

Das lässt sich weitestgehend erreichen, doch aufgrund langer Worte, Rundungfehlern und weiteren Layouteinflüssen wird es bei Breitenänderungen im Browser zu kleinen Änderungen kommen, selbst wenn alle weiteren Formate im Stylesheet konsistent darauf aufbauen.

Der Fokus liegt auf „Zeichen pro Zeile“: Wenn 1rem als „1 Zeichen“ gesetzt wird — was je nach Schriftart deutlich mehr oder weniger sein kann — lässt sich damit eine schnell erfassbare Textspalte passend zum verfügbaren Platz realisieren.

Statt einer Beschreibung meines Weges möchte ich auf die ausführliche Beschreibung von Pedro Rodriguez verweisen. Der Kommentar von „Guillaume“ hat die hier präsentierte, gestraffte Lösung angeregt.

Beispieldatei öffen

Was die Beispieldatei tut

1. Im Stylesheet werden im obersten Element :rootdie CSS-Variablen definiert. Sie ermöglichen ein bequemes Nachjustieren, wenn ein Layout weiterentwickelt wird.

2. Die „Geraden-Steigung“ zwischen Mindest- und Höchstbreite wird mit den Variablen errechnet und in einer Variable abgelegt.

   Damit die Skalierung barrierefrei wird (s. Titel), müssen konkrete Werte ermittelt werden, die mittels calcbzw. clamp gebildet werden.

3. Im body wird eine Maximalbreite festgelegt. Abhängig vom Layout kann das alternativ ein darin enthaltener liegender Container – z.B. article o.ä. sein.

4. Ebenfalls im body wird für alle darin enthaltenen Elemente die Schriftgröße abhängig vom verfügbaren Platz bereitgestellt.

   Die darauf aufbauenden Formate müssen mit em arbeiten, damit sie zueinander Proportional sind.

   Das Grundmaß 1rem bleibt unangetastet und wird bei Verwendung wie im Browser eingestellt verwendet.

Bisher wird nur hypens unterstützt, die weiteren Parameter sind für „wenn's mal unterstützt wird“…