Web Fonts (Webschriften) sind Schriftdateien, die per CSS-Regel @font-face mit einer Website geladen werden, statt sich auf die auf dem Gerät installierten Schriften zu verlassen. Das empfohlene Format ist WOFF2; variable Fonts vereinen mehrere Schnitte in einer Datei.
Lesbare Schriften wählen
- Klare, offene Buchstabenformen; gut unterscheidbare Zeichen wie I, l, 1 und O, 0
- Ausreichende x-Höhe und Laufweite
- Keine dekorativen oder Script-Schriften für Fließtext
- Fließtext ab etwa 16 px (1 rem), Zeilenhöhe ca. 1,5
- Ausreichender Kontrast – dünne Schnitte wirken heller
Technische Barrierefreiheit
- Relative Einheiten (
rem,em), damit Text mit Browsereinstellungen skaliert (WCAG 1.4.4) - Text muss mit geänderten Textabständen funktionieren (WCAG 1.4.12)
font-display: swap, damit Text sofort sichtbar ist- Keine Icon-Fonts ohne Textalternative; SVG-Icons sind robuster
- Vollständiger Zeichensatz für alle verwendeten Sprachen
Datenschutz
Das dynamische Einbinden von Google Fonts über Google-Server überträgt IP-Adressen; das LG München hat dies 2022 als DSGVO-Verstoß gewertet. Schriften sollten daher lokal auf dem eigenen Server gehostet werden.
Häufige Fragen
Gibt es eine „barrierefreie Schrift“?
Es gibt Schriften mit besonderem Fokus auf Lesbarkeit, etwa Atkinson Hyperlegible. Entscheidend ist aber die Kombination aus Schrift, Größe, Abstand und Kontrast.
Helfen Legasthenie-Schriften wie OpenDyslexic?
Studien zeigen keinen eindeutigen Vorteil. Wichtiger ist, dass Nutzer eigene Schriften einstellen können, ohne dass das Layout bricht.
Verwandte Begriffe: Textqualität, Textabstände, Web Performance, Unicode