Typografie und Barrierefreiheit Akt 1: So wählen Sie die richtige Schriftart aus

Text zu klein, Typografie schlecht lesbar, Zeichenabstand zu klein (oder zu groß), Kontrast zu gering… All diese Elemente sind wichtig, wenn es um die Lesbarkeit und Zugänglichkeit von Texten geht. Doch welche Typografie soll man dann aus der Vielzahl der vorhandenen wählen, um eine optimale Zugänglichkeit für alle zu gewährleisten?

Wenn wir von Barrierefreiheit sprechen, denken wir insbesondere an die Barrierefreiheit für Menschen mit eingeschränkter Mobilität, mit Seh- und/oder Hörbehinderung ... und dies war insbesondere einer der ersten Ansatzpunkte bei der Entwicklung der Barrierefreiheit von Gebäuden. Aber im digitalen Zeitalter ist Barrierefreiheit zu einem wichtigen Thema in diesem Bereich geworden und geht jeden etwas an, da jeder von Barrierefreiheitsproblemen betroffen sein kann. Nehmen wir zum Beispiel den Fall von Livebox Wi-Fi-Codes:

„Ist das ein großes o oder eine Null? Ein großes i, ein kleines L oder eine 1?“ → WLAN-Schlüssel sind Meister darin, uns beim Kopieren den Kopf zu verdrehen.

In diesem Zusammenhang sind wir alle mit einem Problem der Lesbarkeit und Zugänglichkeit konfrontiert, und in dieser „behinderten“ Situation zu sein, bedeutet nicht unbedingt, eine spezifische Behinderung zu haben. Ein Zugänglichkeitsproblem kann uns alle in diese Situation bringen und Louis-Pierre Grosbois fasst es sehr gut zusammen:

« Eine behinderte (unfähige) Person wird in einer barrierefreien Umgebung zu einer nicht behinderten (fähigen) Person. Eine gültige Person in einer unzugänglichen Umgebung wird zu einer behinderten Person. »

Barrierefreiheit ist daher ein zentrales digitales Thema, und dies betrifft insbesondere die Wahl der Schriftarten. Ich nehme Sie mit in eine Serie von zwei Artikeln, um Ihnen einige Tipps und Tricks zu geben und Ihnen bei der Auswahl der richtigen Typografie für Ihre digitale Lösung zu helfen.

Welche Typografie wählen?

Könnte genauso gut den Kern der Sache angreifen und es gleich sagen, es gibt keine einzige Antwort auf diese Frage. Die Variabilität der Internetnutzer lässt es nicht zu, eine Typografie zu identifizieren

spezifisch, um 100 % der Internetnutzer zufrieden zu stellen. Einige werden sich mit einer bestimmten Schriftart wohler fühlen, während andere mehr Schwierigkeiten damit haben werden.

Dies wird durch gezeigt Die neueste Studie von Nielsen Norman Gruppe über die beste Typografie für das Online-Lesen. Auf dem Papier erreicht die Garamond-Schrift im Durchschnitt die schnellste Lesegeschwindigkeit (Ergebnis bezogen auf die Anzahl der pro Minute gelesenen Wörter). Tatsächlich schnitten jedoch nur etwa 50 % der Studienteilnehmer mit dieser Schriftart besser ab (für jeden Leser wurden die getesteten Schriftarten von der schnellsten bis zur langsamsten eingestuft). Mit anderen Worten, wenn eine Oberfläche die Garamond-Typografie verwendet, wären nur 50 % der Internetnutzer wirklich damit zufrieden.

Die Lösung könnte darin bestehen, Benutzern die Möglichkeit zu geben, die von ihnen bevorzugte Typografie auszuwählen. Leider ist diese Lösung nicht praktikabel. Die Forscher zeigten tatsächlich, dass die Teilnehmer nicht wirklich erkennen konnten, was für sie am besten ist, da die Teilnehmer mit der von ihnen bevorzugten Schriftart 14 % langsamer lasen. EIN eine weitere Studie der Nielsen Norman Group zeigt auch, dass die Mehrheit der Benutzer die Personalisierung nicht verwendet, wenn sie verfügbar ist, und einfach die Standardansicht beibehält.

Aber wenn es keine bestimmte Typografie zu bevorzugen gibt und wir Internetbenutzern nicht erlauben, ihre Anzeige selbst zu personalisieren, wie wählt man dann die richtige Schriftart aus? Hier sind einige Tipps, auf die Sie bei der Auswahl achten sollten.

Tipps und Tricks zur Wahl der richtigen Typografie

Typografie-Familie

Die 5 wichtigsten typografischen Familien: Serif, Sans-Serif, Display, Cursive und Monospace

Es gibt fünf große typografische Familien :

  •  Serif : Schriftarten mit Serifen (Erweiterungen, die die Enden von Zeichen abschließen). Beispiel: Garamond, Times New Roman, Georgia…
  •  Serifenlos : serifenlose Schriftarten, schlanker als die vorherige Familie. Beispiele: Arial, Calibri, Helvetica …
  •  Display : mehr skurrile Schriftarten, sie haben normalerweise einen eher dekorativen Zweck.
  •  Kursiv : Schriftarten, die Handschrift simulieren. Beispiele: Comic Sans MS, Vorbehalt …
  •  Monospace : Schriftarten mit einer festen Breite für jedes Zeichen (z. B. das i in einer nicht monospaced Schriftart befindet sich in einem dünneren Bereich als ein m). Bsp.: Roboto Mono, Source Code Pro…

Dn Monospace-Typografie (hier oben), jedes Zeichen wird in einem Bereich gleicher Breite dargestellt. Umgekehrt wird bei einer Nicht-Monospace-Schrift (hier Serif ganz unten) die Breite an jedes Zeichen angepasst.

Bei der Entwicklung Ihrer Lösung hängt die Wahl der Schriftfamilie davon ab, wofür sie verwendet werden soll. Für die Zugänglichkeit von Textabsätzen und allgemein für das Web ist es jedoch vorzuziehen, eine vertraute Schriftart mit leicht identifizierbaren Zeichen vom Typ Sans Serif zu bevorzugen.

Serifenschriften eignen sich besonders gut für Printmedien oder für gezielte Akzente in Ihren Webinhalten. Die anderen Typografien können ihrerseits eher vereinzelt zum Beispiel auf Titeln eingesetzt werden, sofern alle Kriterien für eine gute Lesbarkeit erfüllt sind (ausreichender Kontrast, ausreichend große Schriftgröße etc.)

Verschiedene Typografiestile

Um die Zugänglichkeit, Lesbarkeit und das Verständnis Ihrer Texte zu optimieren, ist einer der Schlüssel, Ihre Inhalte zu priorisieren. Wählen Sie dazu Schriftarten mit mehreren Stilen, mit denen Sie Ihre Inhalte hervorheben können, ohne 10 verschiedene Typografien (Hervorhebungen, sekundäre Informationen usw.) verwenden zu müssen. Entscheiden Sie sich mindestens für eine Typografie mit den folgenden 4 klassischen Stilen:

● Regelmäßig ● Gras

Kursivschrift    Fett Kursiv

Einige Schriftarten enthalten Variationen dieser Zwischenstile. Dies ist beispielsweise bei der Raleway-Schrift der Fall, die es in 9 verschiedenen Versionen und ebenso vielen Versionen in Kursivschrift gibt.

Die Raleway-Typografie integriert 9 verschiedene Stile und ebenso viele für die kursive Version

Aber Vorsicht, um das berühmte Sprichwort „Das Beste ist des Guten Feind“ zu verwenden, wird die Verwendung zu vieler verschiedener Stile in Ihren Inhalten eher die Lesbarkeit erschweren, als die Zugänglichkeit zu optimieren. Die „dünne“ Version von Raleway zum Beispiel ist möglicherweise nicht sehr zugänglich, da sie (zu) dünn ist, um einen guten Kontrast und eine gute Lesbarkeit zu haben.

mehrsprachig

Ist Ihre Lösung international? Denken Sie darüber nach, den mehrsprachigen Charakter Ihrer Typografie zu planen. Unabhängig davon, ob Ihre Lösung nativ in mehreren Sprachen verfügbar ist oder der Benutzer ein Drittanbieter-Tool verwendet, um die Inhalte der Seiten zu übersetzen, muss sich die Schriftart anpassen und den übersetzten Text gut darstellen. Wenn dies nicht der Fall ist, besteht das Risiko, dass Ihre Texte durch eine Reihe unlesbarer Zeichen wie ⍰⍰ ⍰⍰⍰⍰⍰⍰⍰⍰ ersetzt werden.

Die Beachtung dieses Punktes ermöglicht es daher zu überprüfen, ob der Internetnutzer auf den Inhalt der Lösung zugreifen kann, unabhängig davon, in welcher Sprache er ihn anzeigen wird. Bonus: Sie können damit auch die Anzeige Ihrer Bildschirme im Upstream überprüfen, um unter allen Umständen harmonische Schnittstellen aufrechtzuerhalten.

Charakterunterschiede

Bevorzugen Sie eine Schriftart mit allen unterschiedlichen Zeichen, insbesondere für das kleine L, die 1, das große i und die Spiegelbuchstaben.

Ähnliche Zeichen können verwirrend sein. Befindet sich der Buchstabe mitten in einem Wort, integriert der Internetnutzer ihn in der Regel als Ganzes und wird nicht besonders blockiert. Aber wie ich Ihnen am Anfang dieses Artikels gesagt habe, kann es bei einem alphanumerischen Code wie bei WLAN-Codes schnell kompliziert werden.

Um diese Situation zu vermeiden, müssen Sie die Unterschiede zwischen den Buchstaben Kleinbuchstabe L, Großbuchstabe i und der Zahl 1 überprüfen. In "extremen" Fällen, wie z. B. bei der Gill Sans-Typografie, sind die 3 Zeichen genau gleich, wodurch sie so wie sie sind nicht unterscheidbar sind . Andere Schriftarten wie Arial beinhalten eine Unterscheidung für die Zahl 1, aber die 2 Buchstaben bleiben gleich. Ideal ist es, sich für eine Schriftart wie Fira Sans oder Raleway zu entscheiden, die die Unterschiede zwischen den 3 Zeichen übernimmt.

Hüten Sie sich auch vor dbp q-Spiegelbuchstaben. In einigen Typografien wie Helvetica, Arial oder Gill Sans sind diese Buchstaben exakt symmetrisch, was leicht zu Umkehrungen führen kann. Bevorzugen Sie eine Schriftart wie Raleway, die eine leichte Unterscheidung zwischen den einzelnen Zeichen hinzufügt, um sie leichter zu identifizieren.

Verwendung & Anzeige von Schriftarten

Neben der Wahl der Typografie ist auch deren Verwendung wichtig. Sie können die am besten geeignete Schriftart auswählen, wenn Sie in 8 und in Weiß auf Hellgrau schreiben, wird es nicht funktionieren. Hier sind einige Tipps, die sich speziell auf die Verwendung von Typografie beziehen.

Größe & Abstand

Die Größe des Textes ist offensichtlich ein wesentlicher Bestandteil der Zugänglichkeit der Texte. Zu klein geschriebene Texte sind unweigerlich schwer lesbar. Die Repositories schreiben nicht wirklich eine Mindestgröße vor, vorausgesetzt, dass relative Größen verwendet werden (em, %…). Trotzdem ist es immer noch vorzuziehen, standardmäßig große Texte zu haben. Wir empfehlen insbesondere Texte von 14 bis 20 px auf dem Computer, 13 bis 19 px auf dem Tablet und 12 bis 16 px auf dem Handy. Beachten Sie, dass die Zeichengrößen für Computer tendenziell zunehmen, wenn Bildschirme immer größer werden. Die 14 px gehen gerne verloren, es ist heute üblicher Texte von 16 bis 20 px zu finden.

Neben der Textgröße sind auch die Abstände zwischen Buchstaben, Zeilen und Absätzen zu berücksichtigen. Linien, die zu nahe beieinander oder umgekehrt zu weit voneinander entfernt sind, erschweren es dem Auge, sich von einer Linie zur anderen zu bewegen. Zeichen oder Wörter, die zu nahe beieinander liegen, erschweren die Unterscheidung zwischen ihnen. Wenn sie zu weit voneinander entfernt sind, wird es umgekehrt schwieriger, die Verbindungen zwischen den Buchstaben zu identifizieren, die ein Wort bilden. Hier sind die WCAG-Empfehlungen für Abstände:

  • Zwischen den Zeilen: mindestens 1,5-fache Größe des Textes
  • Zwischen den Absätzen: mindestens doppelt so groß wie der Text
  • Zwischen Buchstaben: mindestens 0,12-fache Textgröße
  • Zwischen Wörtern: mindestens 0.16-fache Textgröße

Ausrichtungen

Bevorzugen Sie in der gleichen Zeile einen linksbündigen und nicht im Blocksatz ausgerichteten Text. Während Sie vielleicht denken, dass Blocksatz visuell ansprechender ist, wird es tatsächlich schwieriger, sich von Zeile zu Zeile zu bewegen. Auch zwischen den Wörtern entstehen ungleiche Abstände, wodurch Risse entstehen, die für das Lesen schädlich sind. Es ist auch einer von WCAG-Empfehlungen die sich dafür einsetzt, Texte nur auf einer Seite auszurichten.

Vermeiden Sie im Zeitalter immer größerer Bildschirme auch Text in voller Breite. Je größer der Text geschrieben wird, desto schwieriger wird es, seiner Leselinie zu folgen, insbesondere wenn der Text in einer normalen Größe von 14 bis 20 px geschrieben ist. Im Allgemeinen ist es am besten, eine Größe von etwa 100 Zeichen pro Zeile für ein reibungsloses Lesen zu haben.

Um das Lesen Ihrer Texte zu erleichtern, bevorzugen Sie die Linksbündigkeit gegenüber dem Blocksatz, was das Lesen erschwert.

Gegensatz

Damit ein Text lesbar und damit zugänglich ist, ist es wichtig, auf den Kontrast zwischen seiner Farbe und dem Hintergrund zu achten.

Hier sind die WCAG-Empfehlungen für diesen Punkt :

  • minimaler Kontrast (WCAG Level AA: Texte müssen ein Kontrastverhältnis von mind 4.5 für 1. Ausnahme bei großen Texten, bei denen das Verhältnis mindestens 3 zu 1 betragen muss.
  • Optimaler Kontrast (AAA-Level): Texte müssen ein Kontrastverhältnis von mind 7 für 1. Ausnahme bei großen Texten, bei denen das Verhältnis mindestens 4.5 zu 1 betragen muss. Flat: Seien Sie trotzdem vorsichtig mit zu starken Kontrasten, die das Lesen verkomplizieren und die Augen ermüden. Auf Papier hat Text in Schwarz (#000) auf Weiß (#fff) ein optimales Seitenverhältnis (21:1). Dieser starke Kontrast kann jedoch insbesondere bei älteren Menschen, Menschen mit Legasthenie oder lichtempfindlichen Menschen (Irlen-Syndrom) zu einem Bewegungsgefühl der Figuren oder einem Halo-Effekt führen. Um dieses Problem zu vermeiden, wählen Sie dunkelgrauen Text auf weißem Hintergrund oder schwarzen Text auf hellgrauem Hintergrund.

Die Lesbarkeit wird stark durch den Kontrast zwischen Text und Hintergrundfarbe beeinflusst. Entscheiden Sie sich für eine optimale Erreichbarkeit für ein Kontrastverhältnis von mindestens 7 zu 1.

Sie haben jetzt die Schlüssel, um die Schriftarten Ihrer zukünftigen Lösungen auszuwählen. Achten Sie darauf, nicht zu viele verschiedene Schriftarten auszuwählen. Dies wäre kontraproduktiv und überfrachtet Ihre Inhalte. Wählen Sie zwei oder sogar maximal drei Typografien aus.

Beachten Sie auch, dass es für die Webunterstützung vorzuziehen ist, für das Web geeignete Schriftarten zu verwenden, insbesondere um die Auswirkungen auf die Leistung der Lösung zu begrenzen und eine gute Anzeige auf allen Unterstützungen und Browsern zu ermöglichen. Wir finden zum Beispiel Google Fonts das mehrere hundert kostenlose, lizenzfreie, webfreundliche Schriftarten bereitstellt.

Andere haben sich auch mit besonderen Fällen befasst und Schriftarten entwickelt, die angepasst sind, um spezifische Leseschwierigkeiten zu überwinden. Aber dafür gebe ich Ihnen ganz schnell einen Termin, damit Sie sie in Akt 2 dieser Artikelserie entdecken können.

 

 


Justine PISMONT, UX-Designerin @UX-Republic


Unsere nächsten Schulungen