Eine barrierefreie Schrift ist besonders gut für Menschen mit Sehschwäche oder Lesestörungen wie Legasthenie geeignet. 

Eine barrierefreie Schriftart zeichnet sich durch klare Linien aus, die es einfach machen, Buchstaben und Wörter zu erkennen. Zum Beispiel sieht ein grosses "I" nicht wie die Zahl "1" aus.

Warum barrierefreie Schriften?

Kurz und knapp: Weil du es so allen Menschen einfacher machst, deine Texte zu lesen.

Denn immerhin sind 10 % der Bevölkerung von einer Legasthenie (Lese-Rechtschreibstörung) betroffen. Das sind Millionen von Menschen, denen du es einfacher machen kannst, deine Website zu nutzen. Einfach, indem du eine gut leserliche Schrift wählst.

Gleichzeitig hilfst du damit allen Website-Besuchern.

Denn auch Menschen, die keine Sehschwäche haben, profitieren davon. Beispielsweise, wenn sie deine Texte bei schlechten Lichtverhältnissen lesen.

Zur Website des Legathenie-Verbandes

Die Schrift Inklusive Sans ist auf dem Bild abgebildet. Die Buchstaben o c e O 0 1 i I l bd p q 6 9 und ein grüner Haken.

Warum viele Schriften für Menschen mit Sehschwäche schwierig zu lesen sind

Leider sind die meisten Schriften bisher nicht so gestaltet worden, dass sie besonders gut leserlich sind.

Ich zeige dir hier fünf Probleme auf die Menschen mit Sehschwäche oder anderen Lesestörungen immer wieder stossen.

Imposter – Zeichen und Zahlen sehen fast gleich aus

Hierbei geht es um Buchstaben, die wie andere Zeichen aussehen. Zum Beispiel sieht das grosse "I" aus wie die Zahl "1" oder das kleine "l" wie das grosse "I". Das macht das Lesen auch für Menschen ohne Einschränkungen schwierig.

Imposter: Schriften die zeigen was Imposter sind. Es sind die 1, das grosse I und  das grosse O sowie ein 0 abgebildet.

Buchstaben die fast geschlossen sind

Für Menschen mit Sehbehinderungen sind die Buchstaben c, e und o schwer zu unterscheiden, wenn das c oder e fast wie ein geschlossener Kreis aussieht.

Geschlossene Buchstaben: c, o, e sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Spiegelungen – Zahlen und Zeichen die gespiegelt gleich aussehen

Das betrifft vor allem die Buchstaben „d“ und „b“ oder „p“ und „q“ sowie die Zahlen „6“ und „9“, können schwierig zu erkennen sein. Viele Schriften sind so gestaltet, weil Designer Wert auf ein einheitliches Aussehen legen.

Leider erschwert das das Lesen für Menschen mit Legasthenie.

Gespiegelte Buchstaben: d. b, p, q, 69 sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Strichstärken verändern sich stark.

Das belastet die Augen und es erfordert mehr Konzentration, solche Schriften zu lesen. Für Menschen mit Dyslexie (Leseschwierigkeit) wird es dadurch auch schwieriger, die Buchstaben auseinanderzuhalten.

Buchstaben mit verschiedenen Strichstärken sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Crowding-Effekt – Enger Buchstabenabstand

Dieses Problem tritt vor allem auf, wenn ähnliche Buchstaben, wie „r“ und „n“, direkt hintereinander stehen. Dann kann es schnell so aussehen, als wäre es ein „m“.

Je kleiner die Schrift ist, desto grösser das Hindernis. Besonders betroffen sind Menschen mit eingeschränkter Sehschärfe.

Crowding Effekt r n m sind abgebildet. Einmal in einer nicht barrierefreien Schrift, einmal in einer barrierefreien Schrift.

Welche Schrift lässt sich am besten lesen?

In den 5 Beispielen hast du schon gesehen, worauf du achten musst, wenn du eine barrierearme Schriftart für deine Website auswählen willst.

Natürlich gibt es mittlerweile auch einige barrierefreie Fonts. Auch kostenlos bei Google.

Gefällt dir, was du liest? 

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Barrierefreie Google-Schriftarten

Google bietet verschiedene Schriftarten an, die barrierefrei oder zumindest barrierearm sind.

Zum Beispiel die Schriftart «Inclusive Sans»:

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Inclusive Sans.

Wie du siehst, ist hier zum Beispiel ein Punkt in der Null, damit es sich klar vom grossen O unterscheidet.

Du wirst aber auch noch andere Schriften finden, die viele der wichtigen Punkte berücksichtigen und damit zumindest ausreichend barrierefrei sind.

Zum Beispiel:

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Fira Sans.
Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Signika.

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Reddit Mono.
Es sind die Buchstaben 1 I l O 0 6 9 r n m w s abgebilddet in der Schrift Sometype Mono.

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Nunito Sans.
Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Mooli.

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift ABeeZee.
Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Allerta.

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift AR One Sans.
Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Finlandica.

Atkinson Hyperlegible Font – besonders gut leserlich

Auch das ist eine Schrift, die du direkt bei Google Fonts herunterladen kannst.

Die Atkinson Hyperlegible wurde extra entwickelt, um Menschen mit Sehbehinderungen das Lesen zu erleichtern. Sie stammt vom Braille Institute und wurde in Zusammenarbeit mit der Designagentur Applied aus New York gestaltet. Ihren Namen verdankt sie J. Robert Atkinson, dem Gründer des Braille Institute.

Die Schrift ist perfekt für alle, die eine gut lesbare Schriftart brauchen – besonders für Menschen mit eingeschränktem Sehvermögen. Ihr klares Design und die deutliche Unterscheidung der Buchstaben sorgen dafür, dass Texte leichter zu lesen sind und barrierefreier werden.

Es sind die Buchstaben 1  I l O 0 6 9  c e o r n m w  s abgebilddet in der Schrift Aktinson Hyperlegible.

Lexend

Auch das ist eine Schrift, die du direkt bei Google Fonts herunterladen kannst.

Die Lexend gilt laut Studien als besonders gut leserlich. Deshalb nutze ich sie nun auch auf meiner Website für den Fliesstext. Das heisst, du liest diesen Text gerade in Lexend. 

Zur Schrift Lexend

Es sind die Buchstaben 1 I l O 0 6 9 rn m w s c o e abgebildet in der Schrift Lexend.

Weitere wichtige Kriterien für barrierefreie Typografie

Die Font-Auswahl ist die Grundlage für barrierefreie Texte. Aber natürlich gibt es noch etliche weitere Punkte, die beachtet werden sollten.

Kontrast der Schrift zum Hintergrund

Ein klarer Kontrast zwischen der Schriftfarbe und dem Hintergrund macht einen riesigen Unterschied, wenn es um Barrierefreiheit und Lesbarkeit geht.

Deshalb hat die WCAG (Web Content Accessibility Guidelines) auch klare Regeln dafür erlassen. Ob der Kontrast ausreicht, kannst du mit dem Tool von leserlich.info testen. So stellst du sicher, dass auch Menschen mit einer Sehschwäche deine Texte gut lesen können.

Zu den Web Content Accessibility Guidelines
Zum Tool von leserlich.info

Dark Mode

Immer häufiger sieht man Apps oder auch Websites im sogenannten «Dark Mode». Also dunkler Hintergrund mit weisser Schrift. Das kann tatsächlich für einige Menschen den Text leserlicher machen. Aber andere, zum Beispiel Menschen, die an einer Hornhautverkrümmung leiden, wie ich, haben mehr Mühe diese Texte zu lesen.

Das merke ich bei mir selbst auch immer wieder. Überlege dir also gut, ob das bei deiner Website Sinn macht, denn in Europa sind immerhin zwischen 30 bis 60 % der Bevölkerung von einer Hornhautverkrümmung betroffen.

Zum Wikipedia-Eintrag über Hornhautverkrümmung

Ein Beispiel für den Dark Mode. Weisse Schrift auf schwarzem Hintergrund.

Gefällt dir, was du liest? 

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Die Strichstärke: Ein entscheidender Faktor für die Lesbarkeit

Die Strichstärke einer Schriftart, also wie dick die Linien der Buchstaben sind, beeinflusst stark, wie gut wir sie lesen können.

Zu dünne Striche:

  • Wenig Kontrast: Dünne Striche können auf dem Bildschirm oder bei schlechtem Licht verschwimmen.
  • Buchstaben-Wirrwarr: Buchstaben, die sich ähnlich sehen, wie „l“ und „I“, werden bei dünnen Linien noch schneller verwechselt.

Bei zu dünnen Linien müssen wir uns sehr stark konzentrieren, um die feinen Linien zu erkennen. Das macht müde.

Ein Beispiel für eine Schrift mit sehr dünnen Strichstärken. Sie wird dadurch schwer zu lesen.

Zu dicke Striche:

  • Verschwommen bei kleinen Grössen: Wenn die Schrift klein ist, können dicke Buchstaben ineinanderlaufen. Dann sieht man nur noch eine Buchstaben-Suppe.

Du siehst: Ideal sind Schriften mit mittleren Strichstärken.

Ein Beispiel für eine Schrift mit fetten Buchstaben, die dadurch schwer leserlich ist.

Ausreichende Schriftgrösse

Es gibt leider keine perfekte Schriftgrösse, die für alle Schriftarten und jeden Menschen gilt. Wichtig ist, dass die Schriftgrösse vom Nutzer angepasst werden kann. Deshalb sollten Schriftgrössen auch nicht in px, sondern in rem angegeben werden.

Ich empfehle dir jedoch, mindestens 18px (also 1.125 rem) zu wählen, um auf der sicheren Seite zu sein.

Ein Beispiel dafür, wie eine sehr kleine Schrift den Text schwer leserlich macht.

Ausreichend Zeilenabstand

Wenn die Zeilen zu dicht aufeinander sind, wird es schnell anstrengend den Text zu lesen. Die Buchstaben vermischen sich und es braucht viel Konzentration, um den Text zu entziffern.

Deshalb: Lass genug Luft zwischen den Zeilen, damit das Lesen entspannt bleibt!

Ein Beispiel für zu wenig Zeilenabstand. Dadurch wird der Text schwer lesbar.

Fazit:

Schriften sind ein wichtiges Kriterium für barrierefreie Websites – vor allem, weil viele Menschen eine Sehschwäche haben. Und je älter die Bevölkerung wird, desto mehr Menschen sind davon betroffen.

Ich selbst habe seit meiner Kindheit mit einer ziemlich starken Hornhautverkrümmung und kann dir aus eigener Erfahrung sagen: Kleine Schriften können verschwimmen und sind so nur noch sehr mühsam zu lesen. Und jetzt, wo ich älter werde, freue ich mich jedes Mal, wenn die Schrift etwas grösser ist – trotz Brille!

Aber wie du gesehen hast, ist es wirklich kein Hexenwerk, barrierefreie Schriften auszuwählen und so einen kleinen Beitrag zur digitalen Barrierefreiheit zu leisten. Besonders, wenn bei dir ein Relaunch ansteht oder du deine Website gerade baust, lohnt es sich, auf inklusives Design zu setzen.

Und keine Sorge, ich habe noch mehr Lesestoff zum Thema inklusive Gestaltung in der Pipeline – es bleibt spannend!

Melde dich für meinen Newsletter an, damit dir keine aktuellen Tipps mehr entgehen:

Gefällt dir, was du liest? 

Dann abonniere doch meinen Newsletter. In meinen Website-Tipps bekommst du Woche für Woche inspirierenden Input und leicht umsetzbare Tipps für deine Website.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Hinterlasse einen Kommentar

Bitte fülle alle Felder mit einem * aus. Deine Mailadresse wird nicht angezeigt werden. 

  1. Danke Claudia für diesen sehr interessanten und hilfreichen Beitrag. Die Barrierefreiheit rückt mehr in den Vordergrund, das ist gut, obgleich für uns alle mit viel Arbeit verbunden, für alle Betroffenen aber sicher sehr wichtig.
    Mich würde interessieren, wie Betroffene es sehen, was sie sich wünschen.

    1. Liebe Gabriele
      Ich freue mich, dass dir dieser Beitrag gefallen hat. Ich bin im Austausch mit einer Betroffenen und das ist sehr spannend. Das ganze Thema betrifft tatsächlich uns alle. Stell dir nur vor, du hast einen gebrochenen Arm und kannst die Maus nicht mehr nutzen. Oder du leidest unter dem grauen Star und Buchstaben verschwimmen leicht. Deshalb finde ich das Thema so faszinierend, denn es stellt die Nutzer der Website noch stärker in den Fokus.

  2. Vielen Dank, Claudia, für diesen inspirierenden Blogartikel! Dank der vielen Beispiele konnte ich die Unterschiede und Wirkungen sehr gut erkennen.

    1. Hallo Nicole, danke dir vielmals für dein tolles Feedback und ich freue mich, dich in meiner Newsletter-Communitiy begrüssen zu dürfen.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Claudia Barfuss - Die Website-Mentorin WordPress Cookie Plugin von Real Cookie Banner