Gehirngerecht Digital

Barrierefreie Schriftarten: Die richtige Typografie wählen

Veröffentlicht am 19. Dezember 2023
Autor*in: Tobias Roppelt
Eine Schrift für die gute Lesbarkeit. Daneben ist eine 1 ein großes I und ein kleines L. Buchstaben, die sich gut unterscheiden müssen.

Die Auswahl einer barrierefreien Schriftart ist zwar nicht von der WCAG vorgeschrieben, aber dennoch ziemlich wichtig, zum Beispiel für Menschen mit Sehbehinderung aber auch Dyslexie. Davon gibt es nicht weniger in Deutschland – etwa 7,5 Millionen!

Bevor wir eine Schrift bewerten können, müssen wir erst mal verstehen, was genau wir an der Schrift überhaupt bewerten wollen. Dabei gibt es zwei wichtige Faktoren, an denen man im Allgemeinen misst, wie gut verständlich eine Schriftart ist. 

Die zwei Dimensionen der Lesbarkeit:

  • Erkennbarkeit einzelner Zeichen (Legibility): Wie klar und unterscheidbar sind einzelne Buchstaben und Zahlen?
  • Generelle Lesbarkeit (Readability): Wie flüssig und einfach ist der gesamte Text zu lesen, insbesondere in längeren Absätzen?

Wir schauen uns zuerst an, was eine Schrift mitbringen kann, um ihre eigene Erkennbarkeit zu verbessern.

Bessere Erkennbarkeit einer Schrift: Zeichen, die sich deutlich voneinander unterscheiden

Stell dir vor, wie es wäre, wenn du nur verschwommen sehen könntest, und Texte für dich so aussehen würden, wie auf diesem unscharfen Bild:

Jetzt wäre es für dich extrem hilfreich, wenn die Schrift deine Sehbeeinträchtigung mitbedacht hätte und sich:

  • Die einzelnen Buchstaben maßgeblich voneinander unterscheiden
  • große Abstände zwischen den Buchstaben bestehen
  • und mit dem Weißraum in den Buchstaben umgeht

1. Deutliche Unterscheidung zwischen ähnlichen Zeichen:

Das typische Beispiel von Zeichen, die sich bei vielen Schriften zu ähnlich sehen: die Eins (1), das große I (I) und das kleine l (l).

Oft sind das einfach nur drei Striche, die sich maximal in der Höhe ein wenig unterscheiden. Das macht es aber natürlich schwierig, sie auseinanderzuhalten. Besser ist es, wenn die Schrift dafür sorgt, dass die Eins oben einen Haken hat und das kleine L unten etwas ausschweift.

Eine 1, ein großes i und ein kleines l

2. Großzügige Abstände:

Ein ausreichender Abstand zwischen den Zeichen sorgt dafür, dass Buchstaben auch bei unscharfem Sehen nicht miteinander verschmelzen. Ein klassisches Beispiel sind die Buchstaben r und n. Wenn diese Buchstaben zu nah beieinander stehen, können sie leicht wie ein m wahrgenommen werden.

Die Buchstaben r und n stehen links, der Buchstabe m rechts. Stehen r und n nebeneinander, dürfen sich nicht mit einem m verwechselt werden.

Eine Schriftart sollte den Buchstaben also ein bisschen Luft geben, dann kann man immer noch ein wenig Abstand wahrnehmen, auch wenn sie Sehkraft nachlässt. Wie man an dem Beispielbild mit dem r und n sieht, spielt auch die Form der Buchstaben wieder eine Rolle. Wenn das r einen kleinen Knick nach innen macht, ist die Form auch besser von einer geradlinigen m zu unterscheiden, wenn sie doch zu nah einander stehen sollten.

3. Umgang mit „Weißraum“ der Buchstaben:

Zu guter Letzt schauen wir uns den Weißraum innerhalb der Buchstaben an. Hierfür it der Buchstabe O, die Zahl Null (0) und der Buchstabe C immer in gutes Beispiel. 

Bei vielen Schriftarten sind das große O und die 0 kaum auseinanderzuhalten, selbst, wenn man nicht verschwommen sieht. Um das zu verbessern, behelfen sich manche Schriftarten zum Beispiel mit einem Strich durch den inneren Weißraum der 0, um die Zahl klarer von dem großen O abzuheben.  Beim C kommt wieder die Sehschwäche mehr zu tragen. Wenn die Öffnung des Cs zu klein ist, dann kann es schnell für ein O oder eine 0 gehalten werden, wenn man verschwommen sieht. Darum sorgt ein guter Font dafür, dass die Öffnung des Cs groß genug ist.

Achte also bei der Wahl der Schrift darauf, dass die Öffnungen der Buchstaben groß genug sind!

Die barrierefreie Schriftart „Atkinson Hyperlegible“

Eine Schriftart, die die drei Punkte von oben schon optimal umsetzt, ist die „Atkinson Hyperlegible“. Sie wurde vom Braille Institute of America entwickelt, um Menschen mit Sehbehinderungen zu helfen, Buchstaben und Zahlen klar voneinander zu unterscheiden.

Buchstaben der Schriftart: Atkinson Hyperlegible. Ein mal sind sie klar und ein mal verschwommen. Das Bild soll zeigen, dass man die Buchstaben auch verschwommen gut voneinander unterescheiden kann.

Die Schrift ist kostenlos nutzbar. Du kannst sie direkt auf der Webseite des Braille Institute herunterladen: Zur Webseite der Atkinson Schriftart oder aber auch bei Google Fonts finden.

Also sollte ich keine Standard-Schriftarten mehr für meine Seite nutzen?

Das kommt ein wenig darauf an. Wie gerade schon beschrieben, haben diese Schriftarten oft das Problem, dass sie nicht unbedingt Buchstaben haben, die perfekt voneinander zu unterscheiden sind. Trotz dessen sind viele Standard-Schriftarten für die Erkennbarkeit und die Lesbarkeit vollkommen okay, wenn es nicht der Hauptfokus ist, dass sie speziell für Menschen mit Sehbehinderung optimiert sein sollten. 

Fonts, die wir unter anderem empfehlen können:

  • Arial
  • Helvetica
  • Tahoma
  • Calibri
  • Century Gothic
  • Times New Roman
  • Georgia
  • OpenDyslexic

Hinweis zu den Lizenzen: Nach unserem aktuellen Wissensstand sind alle genannten Schriften kostenlos und auf Google Fonts verfügbar. Du kannst sie bedenkenlos und ohne zusätzliche Lizenzgebühren auf deiner Seite nutzen. (Am besten herunterladen und selbst auf der Webseite installieren, um Abmahnungen wegen der Nutzung von Google Fonts auf Google-Servern zu vermeiden.)

Arial: Die richtige Schriftart für Menschen mit Leseschwierigkeiten?

Bisher haben wir nur über Menschen mit Sehproblemen geredet. Die Wahl der Schrift kann aber auch einen großen Einfluss auf die Lesbarkeit der Schrift für Menschen mit Dyslexie haben – behauptet man. 

In einer Studie wurden Standard-Schriftarten mit speziell für Legasthenie entwickelten Schriften verglichen, um zu sehen, welche Schriften die Lesbarkeit wirklich erhöhen.

Die Ergebnisse zeigen ein paar ziemlich spannende Dinge:

  • Empfohlene Schriftarten für Menschen mit Legasthenie sind eher Standardschriften wie Helvetica, Courier, Arial oder Verdana. Schriftarten, die speziell für Legasthenie entwickelt wurden, wie OpenDyslexic oder Dyslexia, haben in der Studie eher schlechter abgeschnitten.
  • Allgemein bessere Lesbarkeit: Serifenlose Schriften (Sans Serif), Monospace-Schriften (bei denen jedes Zeichen gleich viel Platz einnimmt), romanische Schriftarten (wie Arial oder Helvetica). Diese Eigenschaften verbessern die Lesbarkeit und erhöhen die Leseleistung signifikant.
  • Was die Lesbarkeit verringert: Kursivschrift (Text in Kursiv) verschlechtert die Leseleistung und sollte vermieden werden.

Zur Studie über die Lesbarkeit von Schriften für Menschen mit Legasthenie.

Workshop für Designer*innen

Du willst wissen, wie du als (UI / UX) Designer*in Webseiten und Apps barrierefrei gestaltest? In unserem Workshop zeigen wir dir alles, was du als Designer*in benötigst, um digitale Barrierefreiheit umzusetzen!

Zur Workshop-Seite

Kurzer Hinweis: Der richtige Schriftschnitt

Ein wichtiger Punkt zur Schriftwahl: Achte darauf, dass dein Font einen eigenständig gestalteten Kursiv-Schriftschnitt bietet, anstatt die Buchstaben einfach nur schräg zu stellen. Solche gestalteten Schnitte sind besser lesbar und wirken professioneller.

Eine neue Technologie für barrierefreie Schriftarten: dynamische Fonts

Dynamische Fonts ermöglichen Leser*innen, Parameter wie Buchstabenbreite und Abstände individuell anzupassen. Dadurch kann die Schrift optimal an die eigenen Bedürfnisse angepasst werden, was die Lesbarkeit erheblich verbessern kann.

Leider unterstützen bisher nicht alle Browser diese Technologie vollständig. Es wird also noch etwas dauern, bis wir dynamische Fonts flächendeckend im Einsatz sehen. Aber es ist nur eine Frage der Zeit, bis diese Entwicklung Barrierefreiheit und Lesefluss verbessern wird!

Eine dynamische und barrierefreie Schriftart „Lexend“

Die Schrift, in der du diesen Text gerade liest, ist die Lexend. Sie wurde speziell entwickelt, um den Lesefluss zu verbessern. Obwohl die Lexend einige ihrer Vorteile erst mit der vollständigen Unterstützung dynamischer Fonts entfalten kann, ist sie bereits jetzt eine herausragende Wahl für barrierefreies Design, weil sie sich auch um die gute Unterscheidbarkeit ihrer Buchstaben kümmert. Mehr Informationen über die Lexend findest du auf ihrer offiziellen Webseite: Zur Webseite der Schrift Lexend.

Barrierefreiheit im Fließtext sicherstellen

Nachdem wir uns sehr darum gekümmert haben, die Erkennbarkeit unserer Fonts zu verbessern, schauen wir uns jetzt an, was wir machen können, um die generelle Lesbarkeit von Texten zu verbessern.

Setzen den Text linksbündig für bessere Lesbarkeit

Vermeide es, Texte zentriert zu setzen. Zentrierte Texte sind wesentlich schlechter lesbar, als es linksbündige Texte sind – für alle Menschen. 

Zwei Kärtchen mit jeweils viel Text. Der Text im linken Kästchen ins mittig ausgerichtet, der Text im rechten Kästchen Linksbündig. Linksbündiger Text ist besser zu lesen.

Nutze am besten keine Versalien für längere Sätze

Setze lange Sätze nicht in Versalien. Großbuchstaben sind schwerer voneinander zu unterscheiden, denn sie ähneln sich mehr als Kleinbuchstaben (gleiche Höhe). Das erschwert das Lesen enorm. Außerdem bekommen viele dabei ein negatives Gefühl, da Großbuchstabe in Text oft damit in Verbindung gebracht werden, dass man angeschrien wird.

Text in jeweils 2 Kärtchen. Im linken Kärtchen ist der gesamte Text in Großbuchstaben verfasst. Im rechten normal. Das ist besser zu lesen.

Barrierefreie Schriftarten als Nutzer*in selbst einstellen

Was die digitale Welt angeht, sind intelligente Leute schon auf intelligente Ideen gekommen! Auch, wenn der Designer zum Beispiel sich weigert, eine barrierefreie Schriftart zu wählen, hat man als Nutzender heutzutage die Möglichkeit, das Zepter selbst in die Hand zu nehmen!

Gewisse Erweiterungen für deinen Browser, erlauben es dir, die Schrift auf einer Webseite in einer beliebigen Schrift anzeigen zu lassen, die dir gefällt.

Mit dem folgenden Plug-In kannst du zum Beispiel alle Schrift auf jeder Webseite dir in Comic Sans anzeigen lassen. Link zur Comic-Sans-Erweiterung für Google Chrome

Zusammenfassung über die Auswahl und den Umgang mit barrierefreier Schrift

  • Barrierefreie Typografie ist für alle hilfreich.
  • In den WCAG-Standards steht nichts über den Einsatz von barrierefreien Schriften, es ist also kein Muss.
  • Einzelne Buchstaben sollten gut erkennbar sein. (Legibility)
  • Lesbarkeit ist das Maß dafür, wie leicht der Text insgesamt zu lesen ist. (Readability)
  • Wähle eine Typografie, bei der sich die Buchstaben deutlich voneinander unterscheiden. (zum Beispiel großes I und kleines i)
  • Vermeide es, Texte zentriert zu setzen.
  • Serifenlose Schriften, Monospaced und romanische Schriftarten erhöhen die Leseleistung signifikant
  • Setze lange Sätze nicht in Versalien. (Außer du möchtest Menschen anschreien)

Vielleicht auch interessant: barrierefreie PDF

Häufige Fragen zum Thema

Tobias Roppelt lacht in die Kamera.

Über Tobias Roppelt

Hi, Ich bin Tobias, der Gründer und Geschäftsführer der Gehirngerecht Digital GmbH. Unser Mission ist es, das Internet barrierefrei und damit zugänglich für alle zu machen! Auf dieser Mission suchen wir immer Partner und Unterstützer. Wenn du Interesse hast, mit uns zusammenzuarbeiten oder selbst hier einen Blog-Eintrag zu veröffentlichen, melde dich jederzeit bei uns!

Du hast noch weitere Fragen?