Dynamic Type ist der Name, den Apple der Systemschriftgröße gibt: Der Besitzer stellt einmal am Gerät ein, wie groß Text erscheinen soll, und jede App übernimmt den Wert. Android hat dieselbe Funktion unter „Schriftgröße“ in den Bedienungshilfen. Im Web lautet die Frage, ob die Schriftgrößen einer Seite überhaupt auf eine Einstellung des Besuchers reagieren.
- Dynamic Type (Systemschriftgröße)
Einstellung am Gerät, mit der die Schriftgröße für alle Apps festgelegt wird und der auch Websites folgen sollten.
Beispiel: „Auf meinem Telefon steht die Schrift zwei Stufen größer, und eure Seite ignoriert das komplett.“Auch: Systemschriftgröße. Unter Android steht die Schriftgröße neben einer zweiten Einstellung für die Anzeigegröße, die auch Bedienelemente skaliert.
Abgrenzung: Der Zoom vergrößert die ganze Seite samt Bildern und Abständen. Die Systemschriftgröße verändert nur den Text und verlangt, dass das Layout ringsum mitarbeitet.
rem statt px
Im Browser entscheidet die Einheit darüber, ob eine Schriftgröße auf Einstellungen reagiert. Ein Wert in px ist fest: 18 Pixel bleiben 18 Pixel, gleichgültig was der Besucher eingestellt hat. Ein Wert in rem rechnet sich aus der Schriftgröße des Wurzelelements, und die stammt aus dem Browser, solange das CSS sie in Ruhe lässt.
/* Ignoriert die Einstellung des Besuchers */
.lead { font-size: 18px; }
/* Wächst mit dem Standardwert des Browsers mit */
.lead { font-size: 1.125rem; }Zwei beliebte Fehler heben den Vorteil wieder auf. Wer html { font-size: 62.5% } setzt oder die Basis in Pixeln festnagelt, rechnet die Einstellung heraus. Und ein Absatz in rem, der in einem Kasten mit Höhe in Pixeln sitzt, wird bei größerer Schrift abgeschnitten.
Wie weit die Einstellung ins Web durchschlägt
Jedes System verfährt hier anders. Am Rechner führt der Weg über die Standardschriftgröße im Browser, und rem-Werte folgen ihr zuverlässig. Auf dem Telefon greift die Systemschriftgröße zunächst nur in Apps. Safari unter iOS reicht Dynamic Type nicht automatisch an rem weiter; eine Seite kann sich mit der CSS-Angabe font: -apple-system-body ausdrücklich daran hängen. Zusätzlich bietet Safari im AA-Menü eine Vergrößerung pro Website. Chrome unter Android hat einen eigenen Regler für die Textgröße in den Einstellungen der App.
Eine Seite, deren Größen durchgehend relativ gesetzt sind, verträgt jeden dieser Wege. Deshalb verwenden wir rem als Standardeinheit für Schrift, Zeilenhöhe und vertikale Abstände.
Was der Gesetzgeber verlangt
Erfolgskriterium 1.4.4 Resize Text (Stufe AA) der WCAG verlangt, dass Text auf 200 Prozent vergrößert werden kann, ohne dass Inhalt oder Funktion verloren gehen. Erfolgskriterium 1.4.12 Text Spacing kommt hinzu: Auch bei größerem Zeilenabstand muss alles lesbar bleiben. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele gewerbliche Websites mit Angeboten an Endverbraucher und macht diese Kriterien über die Norm EN 301 549 verbindlich.
Für die Prüfung reicht der einfache Weg: Schriftgröße im Browser verdoppeln und nachsehen, wo zuerst etwas bricht. In unseren Relaunch-Projekten sind das fast immer Navigationsleisten mit fester Höhe und Schaltflächen, deren Beschriftung nicht umbrechen darf.