Wenn ich Designer frage, welche Schriftgröße sie für eine Website festgelegt haben, kommen drei typische Antworten: „16 Pixel.“ Oder: „14 Pixel, sieht moderner aus.“ Oder: „Hab ich nicht festgelegt, das macht das Framework.“ Die letzte Antwort verrät am meisten – und ist erfahrungsgemäß die häufigste. Dabei entscheidet die Typografie maßgeblich darüber, ob ein Text für alle lesbar ist oder nur für die Sehenden in der ersten Reihe. Barrierefreie Schriftarten und eine durchdachte Textgestaltung sind keine optionale Verfeinerung, sondern eine harte Anforderung mit konkreten Zahlen. In diesem Ratgeber bekommen Sie diese Zahlen – Mindestgrößen, Zeilenhöhe, Abstände, Zoom-Verhalten – statt der üblichen vagen Empfehlungen.
Was Typografie barrierefrei macht
Eine barrierefreie Typografie ermöglicht es Lesern mit unterschiedlichen Sehfähigkeiten, kognitiven Voraussetzungen und Geräten, einen Text bequem zu erfassen. Sie zeichnet sich durch ausreichend große, gut lesbare Schriftarten aus, durch großzügige Zeilen- und Absatzabstände, durch eine sinnvolle Zeilenlänge und vor allem dadurch, dass sie sich an die Bedürfnisse des Nutzers anpassen lässt – Zoom, Textvergrößerung, individuelle Einstellungen für Buchstaben- und Wortabstand. Anders als bei Farbe und Kontrast gibt es bei der Typografie keine harte WCAG-Mindestgröße in Pixeln, dafür aber präzise Vorgaben für Skalierbarkeit und Abstände, die in der Praxis als Maßstab gelten.
Schriftgröße: Die richtige Grundeinstellung
Die etablierte Best Practice für Fließtext im Web liegt bei mindestens 16 Pixel – das entspricht 1 rem in einer Standardumgebung. Alles darunter wirkt zwar oft moderner, schließt aber Nutzer mit eingeschränkter Sehfähigkeit zuverlässig aus und macht selbst Normalsichtigen das Lesen unnötig schwer. Für längere Lesestrecken sind 17 oder 18 Pixel komfortabler. Entscheidend ist außerdem, dass Sie relative Einheiten verwenden – rem, em oder Prozent statt fixer Pixel-Werte. Nur damit folgt Ihr Text den Browser-Einstellungen des Nutzers, der seine Standard-Schriftgröße aus gutem Grund vielleicht von 16 auf 20 Pixel gestellt hat.
Zeilenhöhe und Abstände in konkreten Werten
Hier wird die WCAG-Anforderung präzise. Erfolgskriterium 1.4.12 (Textabstand) auf der Konformitätsstufe AA verlangt, dass Ihre Seite intakt bleibt, wenn ein Nutzer folgende Werte einstellt. Wer das von Anfang an mitdenkt, hat die Werte gleich als gute Defaults im eigenen Design:
| Eigenschaft | Mindestwert (WCAG 1.4.12) | Praxis-Empfehlung |
|---|---|---|
| Schriftgröße Fließtext | Keine WCAG-Vorgabe | 16 px bis 18 px (1 rem bis 1,125 rem) |
| Zeilenhöhe | 1,5 × Schriftgröße | 1,5 bis 1,6 für Fließtext |
| Absatzabstand | 2 × Schriftgröße | 1,5 bis 2 zwischen Absätzen |
| Buchstabenabstand | 0,12 × Schriftgröße tolerieren | Normalwert, nicht künstlich verengen |
| Wortabstand | 0,16 × Schriftgröße tolerieren | Normalwert |
| Zeilenlänge | Keine WCAG-Vorgabe (AAA: max. 80 Zeichen) | 45 bis 75 Zeichen pro Zeile |
Wichtig zu verstehen: Die WCAG-Werte sind nicht die Werte, die Sie zwingend selbst einstellen müssen. Sie definieren, was passieren darf, wenn ein Nutzer seine Anzeige individuell anpasst – die Seite muss diese Anpassung aushalten, ohne dass Text abgeschnitten wird, Layouts kollabieren oder Inhalte verschwinden. Wer im eigenen Design schon nahe an diesen Werten arbeitet, hat den robustesten Stand.
Schriftwahl: Worauf es wirklich ankommt
Die Diskussion „Serif oder Sans-Serif“ wird in Design-Kreisen leidenschaftlich geführt, aber für die Barrierefreiheit ist sie nicht entscheidend. Wichtiger sind drei Dinge. Erstens, die Schrift muss zwischen ähnlichen Zeichen klar unterscheiden – ein „l“ (kleines L), ein „1″ (Eins) und ein „I“ (großes i) dürfen nicht verwechselbar sein. Zweitens, die Schrift muss in den verwendeten Schriftstärken gut lesbar bleiben; sehr dünne Fonts unter Schriftgewicht 400 sind für Fließtext oft zu zart. Drittens, die Schrift sollte über genügend Glyphen verfügen, um Umlaute, Sonderzeichen und Akzente korrekt darzustellen. Etablierte Web-Schriften wie Inter, Roboto, Open Sans, Verdana oder Atkinson Hyperlegible erfüllen diese Anforderungen problemlos. Spezialschriften für Legasthenie oder schwere Sehbehinderung sind nicht zwingend nötig, können aber für bestimmte Zielgruppen sinnvoll sein.
Zoom und Reflow: Wenn Nutzer den Text größer brauchen
Zwei WCAG-Kriterien betreffen das Verhalten Ihres Layouts bei Vergrößerung, und beide haben harte Zahlen. Erfolgskriterium 1.4.4 verlangt, dass Text bis 200 Prozent vergrößerbar sein muss, ohne dass Inhalt oder Funktion verloren gehen. Erfolgskriterium 1.4.10 (Reflow) geht weiter: Bei einer Anzeigefläche von 320 CSS-Pixeln Breite – das entspricht etwa 400 Prozent Zoom auf einem Standard-Desktop – darf kein horizontales Scrollen nötig sein, um den Inhalt zu erfassen. Inhalte müssen umbrechen, nicht abgeschnitten werden.
Praktisch bedeutet das: Verwenden Sie ein responsives Layout, das mit zunehmendem Zoom auf das Verhalten kleiner Bildschirme zurückfällt. Vermeiden Sie feste Breiten in Pixeln. Achten Sie darauf, dass auch Komponenten wie Navigationen, Tabellen und Karten beim Zoomen umbrechen, statt zu reißen. Eng verwandt damit ist die Frage des Farbkontrasts, die bei vergrößertem Text noch wichtiger wird – die konkreten Werte dazu finden Sie in Kontraste nach WCAG richtig prüfen: Mindestwerte und typische Fehler.
Was Sie unbedingt vermeiden sollten
Vier Anti-Muster fallen mir in Audits regelmäßig auf. Erstens: Text als Bild. Was als Grafik eingebettet ist, kann nicht skaliert, nicht eingefärbt und nicht vom Screenreader vorgelesen werden – Ausnahme sind Logos. Zweitens: Blocksatz. Im Web erzeugt er löchrige Wortabstände und macht das Lesen unnötig schwer, gerade für Menschen mit kognitiven Einschränkungen. Linksbündig ist im Web fast immer die bessere Wahl. Drittens: ganze Absätze in Großbuchstaben. Capslock-Texte sind über mehr als eine Zeile mühsam zu lesen, weil das Auge die Wortbilder verliert. Viertens: zu schwache Schriftstärken. Eine elegante 200er-Strichstärke mag auf dem Designer-Display gut aussehen, im Alltag auf unterschiedlichen Geräten ist sie für viele Nutzer schlicht zu dünn.
Wie Sie Ihre Typografie prüfen
Die typografischen Werte einer Website lassen sich gut technisch erfassen – Schriftgröße, Zeilenhöhe, Reflow-Verhalten beim Zoom, Kontrast in den eingesetzten Schriften. Genau das macht unser kostenloser Access Score: Er prüft Ihre Seite automatisiert auf die typischen typografischen Schwachstellen und zeigt Ihnen, wo Sie noch unter den Mindestwerten liegen oder wo Inhalte bei Vergrößerung zerbrechen würden. Sie sehen damit nicht nur Einzelfehler, sondern systematische Designentscheidungen, die sich nachträglich nur mit Aufwand korrigieren lassen.
Wie sich Typografie in den größeren Kontext einer durchgängig barrierefreien Gestaltung einfügt, beschreibe ich in Barrierefreies Webdesign: Die Prinzipien, die wirklich Wirkung zeigen. Wer Schrift und Layout früh richtig anlegt, verhindert die meisten typografischen Audit-Findings, bevor sie entstehen können.
