Design & Entwicklung,

Typographie und barrierefreie Texte – Do’s and Dont’s

Du bastelst bereits an deiner eigenen Webseite? Du arbeitest in einem CMS und suchst noch nach
geeigneten Schriften für deinen Webauftritt? Du willst deine Texte möglichst barrierefrei gestalten um sie für ein breites Publikum zugänglich zu machen? In diesem Blogbeitrag bekommst du hilfreiche Tipps zum Thema Typographie und barrierefreie Texte im Web. Die allermeisten der Tipps kannst du auch für Präsentationen berücksichtigen!

Typographie im Web

Bei Typographie im Web gilt: Weniger ist mehr! Unterscheide zwischen Überschriften und Fließtext und wähle die Schrift danach aus. Dabei solltest du auf folgende Kriterien achten:

  • Lesbarkeit: Ist die Schrift auch in kleiner Schriftgröße gut lesbar?
  • Zeichensatz: Sind alle benötigten Zeichen vorhanden? Wenn du ein zusätzliches Sprachenset benötigst, schau nach, ob dieses angeboten wird!
  • Schnitte: Du möchtest die Schrift dünn, normal und fett einsetzen? Dann achte darauf, ob die benötigten Schnitte auch angeboten werden. Manche Schriften gibt es nur in einem Schnitt, was weniger Flexibilität bedeutet.

5 Tipps für barrierefreie Texte

Du bist unsicher, ob die Schnörkel-Schrift für alle User gut lesbar ist? Im Zweifel: Keep it simple, ohne
viel Schnick-Schnack!

Hier eine Zusammenfassung, wie deine Texte im Web barrierefreier werden:

1. Schriftgröße für Device-Breiten anpassen

Es gibt eine Vielzahl an Ausgabegeräten, die alle unterschiedlich genutzt werden, daher macht es Sinn die Schriftgrößen entsprechend anzupassen. Ein Desktop-Computer ist tendenziell weiter entfernt von deinen Augen als ein Smartphone. Der Text am Smartphone sollte also etwas kleiner gestylt werden als für breite Screens.

2. Zeilenabstand

Auch der Zeilenabstand (Zeilendurchschuss) spielt hier eine Rolle. Dieser sollte weder zu eng, noch zu hoch sein. Die ideale Höhe gilt es beim Styling der Schrift zu ermitteln. Je nach Font eignet sich meist ein Wert zwischen 140 und 150 Prozent.

3. Kontrast zwischen Text und Hintergrund

Achte darauf, dass Text und Hintergrund einen hohen Kontrast aufweisen. Je kleiner der Text ist, desto höher sollte der Kontrast sein. Schwarzer Text auf weißem Hintergrund hat den höchsten Kontrast. Darunter gibt es ganz viele Abstufungen. Ob dein Text  einen genug Kontrast hat, kannst du zum Beispiel bei checkmycolours überprüfen.

4. Strukturiere den Text semantisch richtig

Deinen Body-Text solltest du hierarchisch richtig mit Überschriften (H1 – H6), Aufzählungen, Fettschrift, optisch hervor gehobenen Links etc. strukturieren.

5. Definiere Websafe-Schriften als Fallback

Bei Fallback-Schriften nimmst du am besten Systemschriften, die alle Browser standardmäßig unterstützen. Das sind zum Beispiel Arial, Helvetica oder Georgia. Der Fallback wird ausgespielt, wenn der Browser deine Schrift nicht laden oder darstellen kann. Mit einer Websafe-Schrift stellst du sicher, dass in einem solchen Fall browserübergreifend deine Alternative dargestellt wird und nicht jeder User eine andere Schriftart sieht. Natürlich kannst du auch gleich auf Websafe-Schriften zurückgreifen, wenn sie zu deinem Projekt passen.
Praktisch: Websafe-Schriften müssen bei Webseiten nicht extra eingebunden werden, weil sie auf jedem System schon standardmäßig installiert sind. Das verringert die Ladezeit deiner Webseite und je besser die Ladezeit, desto besser dein SEO-Ranking. Lies hier mehr dazu.

https://raidboxes.at/typographie-grundlagen-webfonts-tipps/

https://www.netz-barrierefrei.de/wordpress/barrierefreies-internet/barrierefreie-redaktion/texte/visuelle-text-gestaltung

https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

Falls du dich gerne noch tiefer mit dem Thema Typographie und barrierefreie Texte auseinandersetzen willst kann ich dir diesen Talk empfehlen:

Du brauchst Hilfe dabei, deine Texte barrierefrei zu gestalten? Dann wende dich ganz einfach an unsere Expertinnen und Experten via office@datenwerk.at!

Schreib uns

Eva Angerer

Eva ist in der Agentur die Allrounderin der Programmiersprachen und Frameworks. Ob PHP und Symfony, ob Java oder Apps – Eva gets it done! Bei ihr wird der Code zur Kunst. Sie experimentiert gerne mit Farben und Formen, um ein ansprechendes und vor allem userInnenfreundliches Ergebnis zu erhalten. Obendrein ist Eva zertifizierte Web-Accessibility Expertin und kümmert sich darum, dass unsere Webseiten auch von motorisch-, kognitiv-, oder sehbeinträchtigten Usern genutzt werden können.

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.