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.io/blog/webdesign-development/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!