Gleich zum Ergebnis: Ein gut lesbarer Artikel ist keiner mit einer angesagten Schrift. Es ist einer, bei dem man sofort versteht, worum es geht, an den man nach einer Ablenkung wieder anknüpfen kann, der beim Vergrößern nicht auseinanderfällt und der sich in jeder Sprache natürlich liest. Leser kommen nicht, um deinen Artikel zu erobern. Der Artikel muss ihnen den Weg zeigen.
Erst die Zusammenfassung in 3 Zeilen:
- Ein praxistauglicher Ausgangspunkt: Fließtext von etwa 17-18 px, Zeilenabstand 1,7-1,9 und keine zu langen Zeilen. Das ist kein Allgemeingesetz.
- Bei WCAG 2.2 (dem internationalen Standard für Barrierefreiheit im Web) kommt es darauf an, Kontrast, 200 % Textvergrößerung, Reflow bei 320 CSS-px (der Inhalt ordnet sich an die Bildschirmbreite an), das Überschreiben von Textabständen und die Tastaturbedienung nicht zu zerstören. [R1-R8]
- Für 12 Sprachen gilt: nicht dasselbe CSS zwölfmal einkopieren, sondern eine gemeinsame Barrierefreiheits-Basis plus Feinabstimmung je Schriftsystem. [R10-R13]
1. Lesbarkeit ist keine Geschmackssache, sondern ein Entwurf in 3 Schichten
Lesbarkeit hat mindestens drei Schichten: Man sieht den Text, man kann dem Geschriebenen folgen, und man kann die Seite bedienen. Selbst bei 18 px ist es mühsam, wenn der Text eine Wand ist. Selbst einfacher Text ist mühsam, wenn die Buttons winzig sind. „Nur die Schriftgröße korrigieren, fertig" ist, als würde man das Namensschild am Haus polieren und dabei die Treppe ausbauen.
2. Leser lesen nicht von Anfang an alles, also mach den Artikel auf 4 Stufen lesbar
Im Web ist Überfliegen der Normalfall. Deshalb sollte ein Artikel auf vier Stufen funktionieren: 5 Sekunden = Titel und Einstieg, 30 Sekunden = die H2-Überschriften und Fettgedrucktes, 3 Minuten = die Kernpunkte, tiefes Lesen = der ganze Text. Das heißt nicht, dass man nur Kurzes schreiben darf. Es heißt, dass auch ein langer Text viele Zwischenstationen braucht.
Wenn schon die H2 allein eine stimmige Geschichte erzählen, jeder Abschnitt mit einem kleinen Fazit beginnt und Tabellen und Aufzählungen Vergleiche leicht greifbar machen, können „Alles-Leser" und „Nur-die-Antwort-Leser" dieselbe Seite nutzen.
3. Beim Fließtext mit etwa 17-18 px beginnen
Eine absolut beste Größe für Web-Fließtext gibt es nicht. Zu kleine Schrift verschlechtert aber die Erkennbarkeit, und in einer Blickverfolgungsstudie mit echten Webseiten ging eine größere Schrift mit kürzeren Fixationszeiten einher. [R14] In der Praxis startest du bei 17-18 px für den Fließtext und baust mit leicht skalierbaren Einheiten wie rem.
Wichtig: „Ich habe 18 px eingestellt" heißt nicht „barrierefrei". Das Kriterium Textgröße ändern (Resize Text) bei WCAG 2.2 AA verlangt, dass Inhalt und Funktionen bei einer Vergrößerung bis 200 % nicht verloren gehen. [R3] Wenn das Menü verschwindet, sobald der Leser zoomt, ist der schöne erste 18-px-Bildschirm nur ein Erinnerungsfoto.
4. Zeilenabstand, Absatzabstand und Zeilenlänge senken den „Buchstabenverkehr"
Ein Zeilenabstand von etwa 1,7-1,9 als Startwert gibt langen Webartikeln Luft. Setze auch zwischen den Absätzen deutlichen Abstand. Grundregel: ein Thema pro Absatz, und riesige Blöcke ohne jeden Umbruch vermeiden. [R9]
Für lateinische Schrift gibt es Studien, in denen eine mittlere Zeilenlänge von etwa 55 Zeichen gut funktionierte; in der Praxis sind 55-70 Zeichen ein bequemer Ausgangspunkt. [R15] Das AAA-Kriterium Visuelle Darstellung (Visual Presentation) der WCAG nennt höchstens 80 Zeichen, bei CJK (Chinesisch, Japanisch, Koreanisch) höchstens 40. [R8] Auch hier ist 55 keine kosmische Wahrheit. Je nach Bildschirm, Sprache und Schriftgröße anpassen.
Blocksatz (beidseitig bündig) erzeugt leicht unruhige Wortabstände. Im Web genügt grundsätzlich linksbündiger Text. [R8]
5. Schriften sind kein Zauberstab. Nimm eine, die normal lesbar ist und schnell erscheint
Zwischen Serifen- und Groteskschrift gibt es keinen allgemeinen Sieger. In einem kontrollierten Experiment zeigte sich kein großer Serifeneffekt auf die Lesegeschwindigkeit. [R16] Außerdem fand eine Metaanalyse von 2026 keine durchgängigen Belege dafür, dass „Spezialschriften für Legasthenie" wie OpenDyslexic die Leseleistung gegenüber Standardschriften verbessern. [R17]
Barrierefreiheit heißt also nicht, eine Spezialschrift zu erzwingen. Die eigentliche Grundlage sind ausreichende Größe, Weißraum, natürliche Buchstabenformen, vollständige Zeichenabdeckung und die Möglichkeit für Nutzer, zu vergrößern. Wenn du die Systemschrift des Geräts oder eine gängige Schrift je Sprache bevorzugst, musst du keine riesigen Webfonts laden.
6. Hintergrundfarbe und Kontrast: Hellgraue Schrift hat eine hohe „Stilsteuer"
WCAG 2.2 AA verlangt einen Kontrast von 4,5:1 für normalen Text und mindestens 3:1 für großen Text. [R2] Es gibt keinen Grund, hellgrau auf Weiß zu setzen, nur weil es „irgendwie edel" wirkt, und dem Leser damit einen Debuff für die Augen zu verpassen.
Mehrere Studien zeigen, dass dunkler Text auf hellem Grund (positive Polarität) beim Korrekturlesen und beim Erkennen kleiner Schrift Vorteile hat. [R18] Für ein allgemeines Publikum ist daher das helle Thema die sichere Voreinstellung. Manche mögen aber den Dunkelmodus, also sollte diese Option bleiben. Für die Behauptung, Cremeweiß sei immer gesünder als reines Weiß, gibt es keine ausreichend starken Belege.
7. H1, H2 und H3 sind keine Dekoration, sondern die Verkehrsschilder des Artikels
H1 ist das Thema der Seite, H2 ein großer Gedankengang, H3 dessen Unterpunkte. Täusche keine Überschrift vor, indem du Text nur fett machst; gib ihr über die HTML-Überschriftenstruktur Bedeutung. Nutzer von Screenreadern bewegen sich über Überschriften durch die Seite, daher sind Überschriften zugleich visuelles Design und Navigation. [R7][R9]
Ein guter Test ist einfach: Wenn man nur die H2 herauszieht, erkennt man dann noch den roten Faden? Falls nicht, sind deine Überschriften wahrscheinlich solche Verirrungsfabriken wie „Kapitel 2", „Fortsetzung" oder „Mehr Details".
8. Fettdruck, Aufzählungen, Tabellen und Fazit-Kästen dienen als „Informationsschilder"
Fettdruck ist für wichtige Begriffe, Aufzählungen für gleichrangige Informationen, Tabellen für Vergleiche, der Fazit-Kasten für die Landung einer Entscheidung. Gib jedem eine Rolle. Wer den ganzen Text fett setzt, schaltet 100 Warnlampen gleichzeitig ein, und am Ende fällt keine mehr auf.
Unterscheide Links nicht allein durch Farbe, sondern gib einen weiteren Hinweis wie Unterstreichung. Und belasse wichtige Informationen nicht bei „rot heißt gefährlich", sondern zeige die Bedeutung auch durch Text oder Symbole.
9. Geh vom „Dopamin-Hirn"-Modus aus, aber glaub nicht an den Mythos der 8-Sekunden-Aufmerksamkeit
„Dopamin-Hirn" ist hier kein medizinischer Begriff. Es ist ein scherzhafter Name für den zerstreuten Zustand des heutigen Webs: Benachrichtigung → Kurzvideo → anderer Tab → zurück → „Wo war ich nochmal?" Es ist kein Wort, um pauschal eine Generation oder Menschen mit Behinderung zu beschimpfen.
Die Gegenmaßnahme ist nicht, den ganzen Artikel in ein Kurzvideo zu verwandeln. Sie besteht aus kurzen Absätzen, konkreten Überschriften, einem kleinen Fazit pro Abschnitt, bei Bedarf einem Inhaltsverzeichnis und Eigennamen, mit denen man beim Zurückkommen den Zusammenhang wiederherstellen kann. Autoplay, irrelevante Karussells und Pop-ups, die mitten im Lesen den Bildschirm kapern, sind, als würfe man einen Stuhl auf die Konzentration des Lesers, also reduziere sie. [R9]
10. Barrierefreiheit für Menschen mit Behinderung ist Standardausstattung, kein „Sondermodus"
Die Grundlage ist, WCAG 2.2 AA anzupeilen. Typische Punkte sind 200 % Textvergrößerung, Reflow entsprechend 320 CSS-px ohne seitliches Scrollen, Kontrast 4,5:1, Zeigerziele von mindestens 24×24 CSS-px oder ausreichendem Abstand, Tastaturbedienung, sichtbarer Fokus und eine Möglichkeit, wiederkehrende Bereiche zu überspringen. [R1-R7]
Die Werte des Textabstands („Zeilenabstand 1,5, Abstand nach Absatz 2, Buchstabenabstand 0,12em, Wortabstand 0,16em") sind kein Befehl, dein Start-CSS auf diese Werte zu setzen. Die AA-Anforderung lautet: Wenn Nutzer die Abstände auf diese Werte überschreiben, dürfen sich Texte nicht überlappen oder verschwinden und Funktionen nicht kaputtgehen. [R5]
In der Praxis sind Hauptbuttons von etwa 44 px leichter zu treffen, doch die Mindestgrenze von WCAG 2.2 AA selbst liegt bei 24×24 CSS-px, mit Ausnahmen. [R6]
11. 12 Sprachen teilen sich ein Designsystem, ohne denselben Satz aufgezwungen zu bekommen
Gemeinsam ist die Basis: Kontrast, Überschriftenhierarchie, Vergrößerung, Reflow, Abstände, Bedienbarkeit, zugängliche Namen. Je nach Sprache ändert sich der vom Schriftsystem abhängige Teil: Schriften, Zeilenumbruch, Silbentrennung, Satzzeichen und Zeilenhöhe. [R10-R13]
Auch das Attribut lang ist wichtig. Runde zh-Hans, zh-Hant oder pt-BR nicht eigenmächtig auf zh oder pt ab. Es ist ein Hinweis für Browser, Vorlesefunktion, Silbentrennung und Schriftwahl.
12. Praktische Startwerte je Sprache
| Gruppe | Denkweise für die Startwerte |
|---|---|
| Japanisch | Mit 17-18 px, Zeilenabstand um 1,8 und etwa 30-40 Zeichen pro Zeile beginnen. Keinen zusätzlichen Buchstabenabstand erzwingen. Den japanischen Satz respektieren. [R10] |
| Vereinfachtes und traditionelles Chinesisch | CJK-Schriften trennen und weder Zeilenumbruchregeln noch Satzzeichen zerstören. zh-Hans und zh-Hant getrennt halten. [R11] |
| Koreanisch | Eine Hangul-Schrift verwenden und keinen unnatürlichen Buchstabenabstand einfügen. Den koreanischen Zeilenumbruch prüfen. [R12] |
| Thailändisch | Die korrekte Zeichenformung und Umbrüche an Wortgrenzen nicht zerstören. Eine etwas großzügigere Zeilenhöhe ist sicherer. word-break: break-all nicht leichtfertig einsetzen. [R13] |
| Vietnamesisch | Eine Schrift mit vollständigen diakritischen Zeichen verwenden und Ober- und Unterkanten nicht durch feste Höhen abschneiden. |
| en/es/pt-BR/id/fr/de | Mit etwa 55-70 Zeichen pro Zeile starten und das richtige lang sowie hyphens:auto erwägen. Auf Überlauf prüfen, besonders bei den langen Komposita im Deutschen. |
13. Auf dem Smartphone reicht „lesbar" nicht, es muss auch „schnell da" sein
Wer für alle 12 Sprachen riesige Webfonts aufstapelt, hat den Leser verloren, bevor Text erscheint. web.dev erklärt, dass Webfonts FCP/LCP (wie schnell der erste und der Hauptinhalt erscheinen) verzögern und der Schriftwechsel CLS (Layoutverschiebungen) verursachen kann. [R19] Solide ist, beim Fließtext Systemschriften zu bevorzugen und Markenschriften nur dort einzusetzen, wo sie nötig sind.
Die aktuellen „guten" Ziele der Core Web Vitals am 75. Perzentil sind LCP höchstens 2,5 Sekunden, INP höchstens 200 ms und CLS höchstens 0,1. [R20] Eine Seite, bei der mitten im Lesen ein Absatz wegen Werbung oder Schrift plötzlich nach unten rutscht, gleicht dem Zustand, „das Buch mit dem Finger festzuhalten, während ein Verkäufer den Tisch verschiebt".
14. Artikel, die immer wieder gelesen werden, haben dasselbe jedes Mal an derselben Stelle
Die Grundlage für Wiederbesuche sind nicht auffällige Effekte, sondern Vorhersehbarkeit. Wenn das Aussehen von Überschriften und Links, das Inhaltsverzeichnis, die Artikelbreite, der Sprachwechsel, die Suchergebnisse und die Position verwandter Artikel fast immer gleich sind, lernen Leser die Bedienung.
Wenn du eine „Aa"-Einstellung für Schriftgröße, Zeilenabstand und Theme anbietest, ist es gut, die Auswahl zu speichern. Barrierefreiheit heißt nicht, jedes Mal „Bitte schalte den Behinderten-Modus ein" zu verlangen, sondern eine Form, die schon im Ausgangszustand robust ist und die nur diejenigen anpassen, die es brauchen.
15. Der „Ausdauertest für Leser", den man nicht veranstalten sollte
Typische Beispiele, die man vermeiden sollte: Fließtext um 12 px, hellgrau, Zeilen über 100 Zeichen, Blocksatz, Absätze, die den ganzen Bildschirm füllen, übersprungene Überschriftenebenen, alles fett, Oberflächen, die Bedeutung nur über Farbe vermitteln, Autoplay, schwer schließbare Pop-ups, Fließtext als Bild, die Hölle des horizontalen Scrollens beim Vergrößern, riesige Webfonts und sinnlose Animationen.
Leser sind nicht gekommen, um eine Prüfung abzulegen, ob sie die Intelligenz und das Sehvermögen haben, deine Seite zu Ende zu lesen.
16. Im Zweifel mit diesen Richtwerten beginnen
| Punkt | Praktischer Startwert | Anmerkung |
|---|---|---|
| Fließtext | 17-18 px | Kein Absolutwert. Vergrößerbar machen |
| Zeilenabstand Fließtext | 1,7-1,9 | Nach Sprache und Schrift anpassen |
| Zeile in lateinischer Schrift | Etwa 55-70 Zeichen | Ausgangspunkt aus Forschung und Praxis. Zu lange Zeilen vermeiden [R15] |
| Zeile in CJK | Etwa 30-40 Zeichen | 40 entspricht auch der Richtlinie Visuelle Darstellung bei WCAG AAA [R8] |
| H1 | Etwa 32-40 px | Deutlicher Unterschied zum Fließtext |
| H2 | Etwa 25-30 px | Schon die H2 allein sollen den Verlauf verständlich machen |
| H3 | Etwa 21-24 px | Unterschied zu H2 beibehalten |
| Kontrast normaler Text | 4,5:1 oder mehr | WCAG 2.2 AA [R2] |
| Großer Text | 3:1 oder mehr | WCAG 2.2 AA [R2] |
| Zeigerziel | Richtwert: mindestens 24×24 CSS-px | Es gibt Ausnahmen. In der Praxis auch etwa 44 px erwägen [R6] |
| Textvergrößerung | 200 % | Kein Verlust von Inhalt oder Funktion [R3] |
| Reflow | 320 CSS-px | Grundsätzlich kein Scrollen in zwei Richtungen [R4] |
17. Baue ein Qualitätstor. „Wir passen auf" ist keine Qualitätssicherung
Wer eine Artikelfabrik oder ein CMS (Content-Management-System) betreibt, sollte die Lesbarkeit nicht dem menschlichen Gedächtnis überlassen. Mit statischen Prüfungen kontrollierst du lang, H1, Überschriftenreihenfolge, Bild-alt, zugängliche Namen und verbotenes CSS; mit Prüfungen im echten Browser kontrollierst du 320 px, 200 % Vergrößerung, das Überschreiben des Textabstands, Tastatur, Fokus und horizontales Scrollen.
Was sich sicher beheben lässt, darf automatisch korrigiert werden, etwa ein fehlendes lang oder das Anwenden des gemeinsamen CSS. Korrekturen, die die Bedeutung verändern, wie der Sinn des Textes, Übersetzungen oder der Inhalt von alt, werden niemals frei erfunden. Lässt sich etwas nicht beheben, markierst du es als FAIL und gibst es an einen Menschen weiter. Ein Qualitätstor ist kein „zorniger Lehrer", sondern eine Sperre, die kaputte Ware nicht ausliefert.
18. Fazit: Ein guter Artikel prüft seine Leser nicht
Das Wesen eines gut lesbaren Artikels ist weder riesige Schrift noch stylischer Weißraum. Man weiß, wo man lesen soll, kann mittendrin wieder einsteigen, vergrößern, tippen, sich vorlesen lassen, es ist in jeder Sprache natürlich, und es ist schnell. All das gehört in ein einziges Designsystem.
Es wirkt für gewöhnliche Erwachsene natürlich und geht auch bei Menschen nicht kaputt, die sich leicht ablenken lassen, schlecht sehen, Mühe mit dem Lesen haben oder Tastatur und assistive Technik nutzen. Das ist das Stärkste. Statt in einem Nebenraum eine „barrierefreie Version" zu bauen, macht man besser von Anfang an die Eingangstür breit.
