Schriftgrößen, Zeilenabstände und was wirklich lesbar ist

Warum das Thema wichtig ist

– nicht nur wegen der Gesetze

Ja, es gibt mittlerweile Gesetze, und ja, die müssen wir einhalten. Aber mal abgesehen von der Pflicht: Barrierefreiheit ist einfach smart. Stell dir vor, du betreibst einen Onlineshop oder eine Plattform – willst du, dass möglichst viele Menschen deine Seite nutzen können? Klar willst du das.

Und „barrierefrei“ bedeutet nicht nur, dass jemand mit einer Sehbeeinträchtigung besser navigieren kann. Es geht auch um Ältere, Menschen mit temporären Einschränkungen (Auge entzündet, Arm gebrochen), Leute mit Konzentrationsproblemen – oder einfach jemanden, der auf seinem Handy in der Sonne steht und kaum was erkennt. Je zugänglicher unsere Seiten sind, desto mehr Leute erreichen wir – und desto besser konvertieren wir am Ende auch. Das ist für mich keine zusätzliche Aufgabe, sondern Kundenzentrierung in Reinform.

Aber – und das ist mir auch wichtig – Design und Freiheit?

Jetzt denkst du vielleicht: „Okay, aber heißt das, wir dürfen nur noch Riesenbuchstaben und langweilige Templates verwenden?“ Ganz ehrlich: Die WCAG-Standards schränken im Design schon spürbar ein. Inwieweit das richtig oder sinnvoll ist – das kann und will ich gar nicht abschließend beurteilen.

Ich handhabe das so: Wenn es irgendwie praktikabel und sinnvoll möglich ist, die Regeln umzusetzen, dann mache ich das auch gern. Barrierefreiheit ist wichtig – da gibt’s für mich keinen Zweifel. Aber: In der Praxis stoße ich immer wieder an Grenzen. Manchmal ist das, was barrierefrei ist, im Alltag einfach nicht ideal – oder es passt nicht zu dem, wie wir heute Design verstehen. Gerade wenn man mit Ansätzen wie Mobile First arbeitet, wird’s schnell schwierig. Oder die Frage: Welche Barrierefreiheit wiegt schwerer – Legasthenie oder Sehschwäche? Das ist oft ein schmaler Pfad, und genau deshalb habe ich für mich einen Weg gefunden:

Mein Ansatz ist also: Standards so gut wie möglich umsetzen – aber dort, wo es klemmt, auch mal Abstriche machen. Diese Abstriche sind dann aber bewusst – und immer mit dem Verständnis für das Risiko, das ich damit eingehe.

Warum ich mich bei der Typografie so entschieden habe, wie ich es getan habe, zeige ich dir jetzt an ein paar konkreten Beispielen.

Die WCAG – Unser fachlicher Leitfaden

Wenn du dich mit dem Thema befasst, wirst du immer wieder über die WCAG-Standards stolpern – die „Web Content Accessibility Guidelines“. Die gibt’s schon seit Ewigkeiten, und sie haben sich international als fachlicher Maßstab etabliert. Wichtig: Die WCAG ersetzen natürlich kein Gesetz – Gesetz ist Gesetz, und daran müssen wir uns halten. Aber: Die meisten gesetzlichen Vorgaben – auch in der EU – orientieren sich an den WCAG. Deshalb sind sie für mich in der Praxis der sicherste Anhaltspunkt, wenn ich mich frage: „Wie mache ich meine Website möglichst barrierefrei?“

Die offizielle Seite der WAI (Web Accessibility Initiative) bietet hier eine gute Basis: https://www.w3.org/WAI/

Ja, die Inhalte sind teils sehr technisch, aber die Plattform ist wirklich gut aufgebaut – und vor allem für verschiedene Zielgruppen aufbereitet: Egal ob du als Designer, Redakteur, Entwickler oder Projektmanager dran bist – dort findest du für jede Rolle konkrete Ansätze. Denn es geht nicht nur um Schriftgrößen oder Kontraste, sondern auch um Schreibstil, Navigationskonzepte, Webdesign, Code-Umsetzung – also das Gesamtpaket.

Deshalb nutze ich die WCAG und die WAI-Seite als Grundlage, auch wenn ich – wie du gleich sehen wirst – in der Praxis manchmal Kompromisse machen muss.

Warum schreibe ich überhaupt über das Thema?

Ganz ehrlich: Der Blog braucht ein Design – und zum Design gehört auch die Typografie. Jeder hat da so ein bisschen seinen eigenen Stil, seine Vorlieben. Ich werde mich hier jetzt nicht tief in das Thema Schriftarten einarbeiten – das ist nochmal eine ganz eigene Welt. Mir geht es darum, wie Schrift eingesetzt wird, damit sie für möglichst viele Menschen gut lesbar ist. Und genau da kommt die Barrierefreiheit ins Spiel.

Ich habe mir die aktuellen WCAG-Standards angeschaut – soweit ich weiß, sind die auf diesem Stand. Es gibt zwar schon einen Draft für die WCAG 3, aber als ich da mal mit STRG + F „font“ gesucht habe, bin ich ehrlich gesagt nicht wirklich fündig geworden. Deshalb fundierte meine Layout-Entscheidung auf den folgenden Grundsätzen:

• Schriftgröße für großen Text: mindestens 18pt oder 14pt fett
• Zeilenhöhe (Line Height): mindestens 1,5-fache der Schriftgröße
• Absatzabstand: mindestens 2-fache der Schriftgröße
• Buchstabenabstand (Letter Spacing): mindestens 0,12-fache der Schriftgröße
• Wortabstand: mindestens 0,16-fache der Schriftgröße

Wie ich das konkret für diesen Blog umgesetzt habe und warum ich an manchen Stellen bewusst abweiche, das schauen wir uns jetzt an.

Schriftgrößen?

px, pt, rem, em … wie groß muss das Ganze jetzt sein?

Ich arbeite grundsätzlich mit rem. (Der Unterschied zwischen rem, em und px? – Google am besten mal. Sollte ich dazu irgendwann was schreiben, verlinke ich dir das hier. ) Für die WCAG-Empfehlung habe ich die Standardwerte mal auf rem umgerechnet (Basis: 1rem = 16px):

Und was nehme ich jetzt? Mein persönliches Empfinden: 1,5rem im Fließtext ist für mich persönlich – vor allem auf dem Handy – viel zu groß. Wir setzen ja stark auf Mobile First, und da fühlt sich das einfach nicht gut an. Deshalb habe ich mich für 1,25rem (15pt) als Basisgröße entschieden – auch wenn das nicht 100% den WCAG-Empfehlungen entspricht.

Zeilenhöhe?

Wie viel Luft braucht der Text?

Die WCAG empfehlen eine Zeilenhöhe von mindestens dem 1,5-fachen der Schriftgröße.
Das passt für mich auch in der Praxis sehr gut. Zum Vergleich habe ich mir mal drei Varianten angeschaut:

Mein Fazit: Der Standard von 1,5 ist super leserlich – den übernehme ich genauso.

Buchstabenabstand?

Kann zu viel Abstand auch eine Barriere sein?

Die WCAG empfehlen ein Buchstabenabstand von mindestens 0,12-mal der Schriftgröße. Das wäre bei 1,2rem Schriftgröße eine zusätzliche Weite von 0,144rem. Ich habe testweise verschiedene Varianten ausprobiert: 0rem – Standard, gewohntes Schriftbild, 0,12rem – nach WCAG, 0,2rem – deutlich weiter auseinandergezogen. Und hier muss ich ganz ehrlich sagen: Das ist für mich das Schwierigste.

Ich bin selbst Legasthenikerin, und gerade für mich ist es extrem wichtig, dass ich die Buchstaben als zusammengehörig erkenne. Wenn der Abstand zu groß ist, zerfällt das Wort für mich quasi – ich kann es nicht mehr flüssig erfassen, wie im dritten Beispiel bei 0,2rem. Und wenn ich als geübte Leserin schon kämpfe, frage ich mich, wie sich das erst für jemanden mit einer Sehschwäche oder stärkerer Lese-Rechtschreib-Schwäche anfühlen muss. Deshalb: Hier gebe ich dem WCAG-Standard eine klare Abfuhr. Ich bleibe beim gewohnten Buchstabenabstand (0rem) – weil das für mich (und vermutlich viele andere) die bessere Lesbarkeit bringt.

Überschriften?

Struktur, Lesbarkeit und ein bisschen Monk-Denken

Wer sich schon mal mit Suchmaschinenoptimierung (SEO) beschäftigt hat, weiß: h1 bis h6 sind nicht nur Deko – die geben der Seite ihre Struktur. Suchmaschinen – und übrigens auch Screenreader – nutzen diese Hierarchie, um die Inhalte zu verstehen. Die Reihenfolge muss also logisch sein, auch wenn wir Designer das optisch manchmal gern anders hätten. Aber jetzt die Frage: Wie groß müssen Überschriften sein – damit sie einerseits die Struktur abbilden, andererseits lesbar bleiben?

Was sagen die WCAG dazu? Da hab ich ehrlich gesagt nichts Konkretes gefunden. In einem Beispiel tauchte mal eine h1 mit 200% der Basisgröße auf – das hab ich als groben Anhaltspunkt genommen. Und was hab ich jetzt draus gemacht? Ich habe ein bisschen recherchiert, mich von ChatGPT ein paar Empfehlungen geben lassen, aber im Großen und Ganzen hat mir das alles nicht gefallen. Also, hier meine Aufstellung, mit der ich jetzt für den Blog arbeite: