{"id":10065,"date":"2025-06-08T15:22:18","date_gmt":"2025-06-08T13:22:18","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10065"},"modified":"2026-03-28T14:36:48","modified_gmt":"2026-03-28T12:36:48","slug":"barrierefreie-schrift-gestaltung","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/","title":{"rendered":"Barrierefreie Schrift-Gestaltung"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/272-barrierefreie-schrift-gestaltung\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nH\u00e4ufig werden wir nach dem ultimativen Tipp f\u00fcr die barrierefreie Schrift gefragt. Generell ist Schrift ein schwieriges Thema, da die Design-Abteilung alles andere als Flexibel ist. Man kann mit einem Klick Schrift, Farben und Kontraste in digitalen Anwendungen ver\u00e4ndern. Allerdings steckt hinter diesem einen Klick ein harter ritt durch alle Abteilungen hin zur Gesch\u00e4ftsf\u00fchrung. Tats\u00e4chlich ist es weniger irgendein Code, der die h\u00e4rteste Abstimmung zur Barrierefreiheit erfordert, sondern die Kontraste und Farben. Die Schrift ver\u00e4ndern zu wollen w\u00fcrde da einem Kampf mit einem Drachen gleichen. Dennoch soll es an dieser Stelle Hinweise dazu geben, wie die Schrift-Gestaltung barrierefreier erfolgen kann.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Keine_harten_Standards\" >Keine harten Standards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Technische_Voraussetzungen\" >Technische Voraussetzungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Schrift-Familien\" >Schrift-Familien<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Gibt_es_die_barrierefreie_Schrift\" >Gibt es die barrierefreie Schrift?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Die_Schriftgroesse\" >Die Schriftgr\u00f6\u00dfe<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Textfluss\" >Textfluss<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Silbentrennung\" >Silbentrennung<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Schriftgrad\" >Schriftgrad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Sonderformatierung_und_Hervorhebungen\" >Sonderformatierung und Hervorhebungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Schrift-Grafiken\" >Schrift-Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Abstaende\" >Abst\u00e4nde<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Farben\" >Farben<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/#Kontraste\" >Kontraste<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Keine_harten_Standards\"><\/span>Keine harten Standards<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sowohl die \u00c4sthetik als auch die Lesbarkeit einer Anwendung h\u00e4ngen entscheidend von der Typographie, vor allem von der Schriftart, ab. Typographie befasst sich mit der \u00e4sthetischen Textgestaltung. Es gibt eine DIN-Norm f\u00fcr barrierefreie Schriften, die DIN 1450. Schriften mit dem Zusatz 1450 sind f\u00fcr diese DIN optimiert. Bisher scheint es aber au\u00dfer der Frutiger 1450 keine solche Schrift zu geben.<br \/>\nDie Lesbarkeit eines Textes h\u00e4ngt von verschiedenen Aspekten der Typographie ab:<\/p>\n<ul>\n<li>die Auswahl der Schriftart<\/li>\n<li>Abst\u00e4nde von Zeichen, Worten, Zeilen und Abs\u00e4tzen<\/li>\n<li>Schriftfarbe und Hintergrundfarbe<\/li>\n<li>Schriftgrad<\/li>\n<\/ul>\n<p>Normalerweise besch\u00e4ftigt man eine Expertin, die sich mit graphischer Textgestaltung auskennt. Es kann aber nicht schaden, ein wenig Grundwissen dar\u00fcber zu haben. Insbesondere Redakteur:Innen k\u00f6nnen die Texte aufwerten, wenn sie sich ein wenig mit Typographie auskennen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Technische_Voraussetzungen\"><\/span>Technische Voraussetzungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grunds\u00e4tzlich wird im Web empfohlen, alle gestalterischen Angaben \u00fcber CSS vorzunehmen. Das hei\u00dft, es sollten keine HTML-Tags f\u00fcr Design-Zwecke verwendet werden. Dazu geh\u00f6ren auch die Tags f\u00fcr fett und kursiv. Zum Einen k\u00f6nnen sich diese Formatierungen negativ auf die Lesbarkeit auswirken. Zum Anderen sind sie schlecht durch Lese-Werkzeuge anpassbar. Hervorhebungen werden entweder \u00fcber strong\/em oder eine Klasse in HTML vorgenommen, die dann im CSS gestaltet werden kann.<br \/>\nDiese Trennung von Struktur und Layout entspricht nicht nur einer sauberen Arbeitsweise. Sie erleichtert auch die Anpassung des Inhalts an beliebige assistive Technologien. Online-Redakteur:Innen sollte deshalb nicht erm\u00f6glicht werden, die genannten HTML-Tags zu verwenden, sondern mit strong bzw. mit CSS-Klassen zu arbeiten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Schrift-Familien\"><\/span>Schrift-Familien<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im wesentlichen werden Schriften nach zwei Familien unterschieden: die Serifenschriften haben Verzierungen an den Buchstaben. Serifenfreie Schriften haben keine solchen Verzierungen und wirken dadurch klarer, aber oft auch langweiliger. Daneben gibt es noch die Monotype-Schriftarten als spezielle Variante. Dort nimmt jeder Buchstabe die gleiche Breite ein. Bekannte Varianten sind Courier oder Lucida. Diese Schriften werden vor allem f\u00fcr Computer-Code oder in Konsolen-Anwendungen verwendet. Sie sind h\u00e4ufig f\u00fcr Sehbehinderte schlecht lesbar und sollten deshalb nicht f\u00fcr konventionellen Text verwendet werden.<br \/>\nF\u00fcr den Druckbereich, insbesondere f\u00fcr Belletristik und Magazine werden Serifenschriften bevorzugt eingesetzt. Im Computerbereich und f\u00fcr Sachtexte werden hingegen serifenfreie Schriften bevorzugt. Das liegt auch daran, dass das Schriftbild im Druck eine h\u00f6here Aufl\u00f6sung als am Bildschirm hat. Die Buchstaben k\u00f6nnen also im gedruckten Bereich wesentlich leichter erkannt werden. In Zukunft wird sich dies wahrscheinlich durch bessere Darstellungs-Technik bei Ebook-Readern und selbstleuchtenden Bildschirmen \u00e4ndern. Die Aufl\u00f6sung vieler hochpreisiger Smartphones und Tablets ist heute bereits recht hoch. Premium-ebook-Reader auf eInk-Basis erreichen bereits eine \u00e4hnliche Aufl\u00f6sung von 300 dpi wie gedruckte Texte.<br \/>\nF\u00fcr praktisch jeden denkbaren Einsatzbereich gibt es eigens entwickelte Schriften. Es gibt spezielle Schriften f\u00fcr Anzeigetafeln, f\u00fcr Stra\u00dfenschilder, f\u00fcr tragbare Ger\u00e4te und vieles mehr.<br \/>\nEs mag zun\u00e4chst \u00fcberraschend sein, aber die Lesbarkeit einer Schrift h\u00e4ngt weniger davon ab, welche Schriftart eingesetzt wird als davon, wie vertraut die Leserin mit einer bestimmten Schrift ist. Die Benutzer von Word arbeiten sehr h\u00e4ufig mit Calibri oder Arial, deswegen sind beide Schriftarten weit verbreitet und gelten als gut lesbar. Arial und Calibri zeichnen sich durch einfache Gestaltung der Zeichen-Linien aus. Dennoch wird auch die Arial kritisiert, weil zum Beispiel das gro\u00dfe I und das kleine l sich relativ \u00e4hnlich sehen.<br \/>\n\u00c4sthetik und Lesbarkeit k\u00f6nnen sich nicht nur erg\u00e4nzen, sondern auch widersprechen. Viele Zeitungen setzen den Zeitungsnamen in Fraktalschrift. Sie k\u00e4men aber nicht auf die Idee, l\u00e4ngere Texte in dieser Schrift zu setzen, weil das niemand lesen w\u00fcrde. Aus dem gleichen Grund werden immer seltener Texte in Schreibschrift geschrieben, wenn sie nicht gerade f\u00fcr pers\u00f6nliche Belange gedacht sind. Schreibschrift kann \u00e4sthetisch sehr ansprechend sein, weil wir aber nicht mehr daran gew\u00f6hnt sind, unterschiedliche Schreibschriften unterschiedlicher Personen zu lesen, f\u00e4llt es schwer, l\u00e4ngere Texte in Schreibschrift zu lesen.<br \/>\nF\u00fcr die Lesbarkeit am Bildschirm sollten g\u00e4ngige serifenfreie Schriften verwendet werden. Serifenschriften verschlechtern h\u00e4ufig die Lesbarkeit, sie sind bei gleicher Punkt-Gr\u00f6\u00dfe kleiner als serifenfreie Schriften. Die Times New Roman nimmt bei gleichem Schriftgrad rund zehn Prozent weniger Platz ein als die Arial. Entscheidet man sich dennoch f\u00fcr eine Serifenschrift, sollte ein etwas h\u00f6herer Schriftgrad gew\u00e4hlt werden als man ihn f\u00fcr eine serifenfreie Schrift nehmen w\u00fcrde.<br \/>\nAls schlecht lesbar k\u00f6nnen Schriften gelten, deren Zeichen:<\/p>\n<ul>\n<li>sehr d\u00fcnne Buchstabenlinien haben wie die Times New Roman<\/li>\n<li>viele Verzierungen haben<\/li>\n<li>die Buchstabenlinien ihre St\u00e4rke innerhalb eines Zeichens ver\u00e4ndern, h\u00e4ufig erkennbar am M oder W<\/li>\n<li>die Buchstaben sehr breit oder schmal sind<\/li>\n<\/ul>\n<p>Als Referenz-Rahmen k\u00f6nnen g\u00e4ngige Schriften wie Source Sans, Helvetica oder arial gelten.<br \/>\nGenerell sollte es der Leser:In \u00fcberlassen bleiben, den Text an Ihre Bed\u00fcrfnisse anzupassen. Man wird es nie allen Leser:Innen recht machen k\u00f6nnen. Weitere Hinweise zu barrierefreien Schriften. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Gibt_es_die_barrierefreie_Schrift\"><\/span>Gibt es die barrierefreie Schrift?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die Antwort auf die Frage nach einer barrierefreien Schrift ist ein klares Nein. Vergleicht man einige Schriften wie etwa Arial oder Times New Roman ist klar, das Arial unter gleichen Bedingungen besser lesbar ist.<br \/>\nAber die Umst\u00e4nde sind eben nicht gleich: Schriftfarbe, Gr\u00f6\u00dfe, Hintergrund und Schriftstellung k\u00f6nnen unterschiedlich sein. Es kann dann nicht gesagt werden, dass Schrift A unter allen Umst\u00e4nden besser ist als Schrift B.<br \/>\nEs gibt Schriftarten, die f\u00fcr bestimmte Zielgruppen wie Personen mit Dyslexie oder Sehbehinderung optimiert wurden. Das hei\u00dft aber nicht, dass diese Schriften auch f\u00fcr Personen ohne Dyslexie oder Sehbehinderung gut oder angenehm zu lesen sind.<br \/>\nAls spezielle Schriftarten f\u00fcr lese-behinderte Personen werden unter anderem die Open Dyslectic, die Atkinson Hyperlegible und Semikolon Plus. als besonders lesbar empfohlen. Da spezielle Schriftarten teils recht teuer sind, empfehlen wir, auf g\u00e4ngige Schriftarten wie Source Sans, Arial oder Calibri bzw. auf Schriften zu setzen, die diesen recht \u00e4hnlich sind. Wie oben gesagt kommt es nicht so sehr auf die eingesetzte Schrift an, sondern auf die Lese-Erfahrung mit der Schriftart. Schauen Sie auch gerne nach, ob f\u00fcr eine spezielle Schrift tats\u00e4chlich auch wissenschaftliche Nachweise zu deren Qualit\u00e4t vorliegen. Es ist zum Beispiel sehr schwierig, eine gut lesbare Schrift f\u00fcr zwei Personen mit unterschiedlichen Sehbehinderungen zu finden. F\u00fcr die eine Sehbehinderung kann Schriftart X gut lesbar sein, f\u00fcr die Andere kann diese Schrift schlecht lesbar sein. So galt lange Zeit die Comic Sans als f\u00fcr Lesebehinderte gut geeignet. Das konnte in Tests nicht belegt werden. Im Gegenteil schneidet sie im Vergleich zu Mainstream-Schriften schlechter ab. Was nicht hei\u00dft, dass sie f\u00fcr Individuen nicht angenehm lesbar sein kann.<br \/>\nAuch wenn die Arial einige Schw\u00e4chen hat, ist sie meines Erachtens nach wie vor der Referenz-Rahmen f\u00fcr barrierefreie Schriften. Weicht eine Schrift stark von der Arial ab, ist sie wahrscheinlich f\u00fcr viele Leute schlecht lesbar. An dieser Stelle m\u00fcssen wir es den Leser:Innen \u00fcberlassen, in ihren Lese-Werkzeugen diese speziellen Schriften einzubauen, wenn sie davon profitieren. Die ultimative barrierefreie Schriftart per se kann es nicht geben, weil daf\u00fcr die Bedarfe der einzelnen Gruppen zu unterschiedlich sind.<br \/>\nAuch andere Schriftarten, die sich als barrierefrei oder inklusiv bezeichnen k\u00f6nnen nicht jede Person \u00fcberzeugen. Sie m\u00f6gen in speziellen Kontexten sinnvoll sein, am Ende muss eine Schriftart aber f\u00fcr die Allgemeinheit funktionieren, wenn sich das Schriftst\u00fcck an die Allgemeinheit wendet.<br \/>\nGerade bei Webseiten spielt die eingesetzte Schriftart f\u00fcr die Barrierefreiheit eine untergeordnete Rolle. Durch Lese-Werkzeuge kann diese Schriftart ersetzt werden. Im gedruckten Bereich sowie bei PDF ist das schwieriger. Deshalb sollte auch hier eine m\u00f6glichst gut lesbare Schrift verwendet werden. Ich tendiere wie oben gesagt eher zu den Mainstream-Schriftarten und weniger zu angeblich barrierefreien oder inklusiven Schriften.<br \/>\nBei der Auswahl von Schriften sind immer auch die verschiedenen Schnitte zu beachten: Ist die Schrift auch bei Fettung, Kursiv-Stellung, bei dem wahrscheinlich h\u00f6chsten bzw. geringsten zu erwartenden Schriftgrad noch gut lesbar? Wird die Schrift schlecht lesbar, wenn sie in Rastergrafiken wie Diagrammen verwendet wird?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Die_Schriftgroesse\"><\/span>Die Schriftgr\u00f6\u00dfe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Als Mindest-Schriftgr\u00f6\u00dfe liest man in verschiedenen Ratgebern zu User Experience 16 Pixel = 12 pt f\u00fcr Flie\u00dftext. Webdesignerinnen arbeiten heute in der Regel nicht mehr mit Pixeln, sondern mit relativen Gr\u00f6\u00dfen wie em oder rem. Auf der gerenderten Website kann man dann \u00fcberpr\u00fcfen, wie viele Pixel es am Ende sind.<br \/>\nGenerell ist allerdings wichtig, dass Text gesehen wird, er sollte also bei der kleinsten Schriftgr\u00f6\u00dfe noch gut zu erkennen sein. Weiterhin wichtig ist, dass die Schrift sich lesen l\u00e4sst, ohne dass sich Elemente \u00fcberlagern.<br \/>\nWord hat aktuell 11 pt als minimale Schriftgr\u00f6\u00dfe f\u00fcr Flie\u00dftext. Meines Erachtens ist das auch die Untergrenze, Kleingedrucktes sollte nicht kleiner als 10 pt sein, so meine pers\u00f6nliche Empfehlung. Das gilt nat\u00fcrlich f\u00fcr serifenfreie Schriften mit klaren Linien wie Calibri oder Arial. Wie oben gesagt: Je komplexer die Schriftgestaltung, desto h\u00f6her der minimale Schriftgrad.<br \/>\nAls Faustregel, auch daf\u00fcr gibt es keine feste Regel, w\u00fcrde ich eine maximale Schriftgr\u00f6\u00dfe von 20 pt empfehlen. Wir h\u00e4tten damit eine Spannweite von 100 Prozent Unterschied zwischen der kleinsten und der gr\u00f6\u00dften Schriftgr\u00f6\u00dfe.<br \/>\nAbraten m\u00f6chten wir von den aktuell h\u00e4ufig zu sehenden riesigen \u00dcberschriften. Manche Webseiten haben riesige \u00dcberschriften und sehr kleinen Flie\u00dftext. F\u00fcr Sehbehinderte ist das sehr anstrengend, da sie die Vergr\u00f6\u00dferung st\u00e4ndig anpassen m\u00fcssen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Textfluss\"><\/span>Textfluss<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Text sollte immer linksb\u00fcndig und im Flattersatz gesetzt werden. Der Blocksatz hat sich nur f\u00fcr mehrspaltige Texte bew\u00e4hrt, hinterl\u00e4sst aber bei<br \/>\nfehlender Silbentrennung unsch\u00f6ne L\u00fccken im Text. Schwerer wiegt, dass im Flattersatz die unterschiedlichen Zeilenl\u00e4ngen dem Auge zus\u00e4tzliche Orientierungspunkte bieten. Der Blocksatz sieht zu gleichm\u00e4\u00dfig aus und erschwert damit die Orientierung. Das ist vor allem relevant, wenn man eine breite Textspalte hat. Bei schmalen Spalten verliert man weniger schnell die Orientierung.<br \/>\nDurch den linksb\u00fcndigen Text wird f\u00fcr Sehbehinderte die Orientierung erleichtert, weil auf der linken Seite eine imagin\u00e4re Linie entsteht. Hat man einen zentrierten Text und benutzt eine Bildschirmvergr\u00f6\u00dferung, hat man Probleme, den Beginn der Zeile zu finden.<br \/>\nGerade bei gro\u00dfen Displays oder starker Vergr\u00f6\u00dferung und schmalen Spalten kann es bei Zentrierung schnell dazu kommen, dass zentrierte Inhalte schnell \u00fcbersehen werden.<br \/>\nEmpfohlen wird eine Zeilenl\u00e4nge von maximal 80 Zeichen. Der Text sollte nicht den gesamten Bildschirm einnehmen und die Zeilen sollten nicht zu lang werden. Je l\u00e4nger die Zeilen sind, desto schwieriger ist es f\u00fcr das Auge, den Beginn der n\u00e4chsten Zeile zu finden. Bei zu kurzen Zeilen hingegen muss das Auge zu oft hin und her bewegt werden.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Silbentrennung\"><\/span>Silbentrennung<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die manuelle Silbentrennung ist im Internet nicht sinnvoll, weil sie das \u00dcberfliegen des Textes erschwert. F\u00fcr langsame Leser und Nutzer von Sprachausgaben ergibt sich das Problem, dass lange W\u00f6rter schwerer zu lesen sind. Der Leser muss sich den Anfang des Wortes merken, zum Anfang der n\u00e4chsten Zeile springen, das Wort wieder zusammensetzen und wiederum im Gesamtkontext des Satzes setzen. Der geringe Vorteil der Silbentrennung besteht darin, dass die L\u00fccken im Blocksatz vermieden werden, aber den wollen wir &#8211; wie gesagt &#8211; ohnehin vermeiden. Wenn Sie Silbentrennung w\u00fcnschen, ziehen Sie immer die maschinelle Silbentrennung der manuellen vor, auch die weichen Trennzeichen k\u00f6nnen einigen Lese-Tools Probleme bereiten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Schriftgrad\"><\/span>Schriftgrad<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr die Schriftgr\u00f6\u00dfen sind Standardgr\u00f6\u00dfen zu w\u00e4hlen. F\u00fcr Menschen mit verringertem Gesichtsfeld zum Beispiel w\u00e4ren zu gro\u00dfe Schriftgr\u00f6\u00dfen schlecht lesbar. Fr\u00fcher wurde von den Webseiten eine Funktion zur Vergr\u00f6\u00dferung von Text erwartet, mittlerweile beherrschen aber alle g\u00e4ngigen Browser die Textvergr\u00f6\u00dferung. Im responsiven Webdesign werden heute Schriftgr\u00f6\u00dfen nicht absolut, sondern relativ festgelegt. Dadurch und durch responsive Gestaltung der Website ist ein hoher Zoom f\u00fcr Text in der Regel kein Problem mehr.<br \/>\nStarke \u00c4nderungen der Schriftgrade innerhalb eines Dokuments sind zu vermeiden. Sehbehinderte sind nicht immer in der Lage, das Auge schnell an \u00c4nderungen zu adaptieren. Sie m\u00fcssen st\u00e4ndig den Zoom-Grad neu einstellen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sonderformatierung_und_Hervorhebungen\"><\/span>Sonderformatierung und Hervorhebungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mit Sonderformatierungen ist immer sparsam umzugehen. Kursiv-Stellung, Versalien (GROSSBUCHSTABEN), Unterstreichung und Schmuckschriftarten verschlechtern in jedem Fall die Lesbarkeit. Ganze Abs\u00e4tze in solchen Formatierungen f\u00fchren wirken erm\u00fcdend. Vielen Sehbehinderten und allen Blinden entgehen Hervorhebungen durch gefetteten Text.<br \/>\nHervorhebungen und Text-Formatierungen sollten m\u00f6glichst technisch ausgezeichnet werden, in HTML geht das \u00fcber strong oder em. Spezielle Formatierungen wie W\u00f6rter in Gro\u00dfbuchstaben sollten mit CSS formatiert werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Schrift-Grafiken\"><\/span>Schrift-Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ebenfalls zu vermeiden sind Schriftgrafiken, also l\u00e4ngerer Text, der in ein Bild eingebettet ist. Solche Texte werden bei Vergr\u00f6\u00dferung unscharf, sie sind au\u00dferdem f\u00fcr Blinde gar nicht lesbar und werden au\u00dferdem oft bei gro\u00dfen Bildschirmen verzerrt, auf kleinen Displays sind sie hingegen gar nicht lesbar, weil die Grafiken zu klein dargestellt werden.<br \/>\nM\u00fcssen Sie aus irgendeinem Grund Schrift-Grafiken verwenden, sollten Sie auf Vektorgrafik-Formate wie SVG setzen. Bei Rasterformaten wie JPG, PNG oder WEBP entsteht das oben genannte Problem der Pixeligkeit bei Vergr\u00f6\u00dferung.<br \/>\nEine andere M\u00f6glichkeit ist das Platzieren von Text via CSS auf einer Hintergrund-Grafik. Beachten Sie hier aber den ausreichenden Kontrast. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Abstaende\"><\/span>Abst\u00e4nde<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Abst\u00e4nde f\u00fcr Buchstaben, W\u00f6rter, Zeilen und Abs\u00e4tze sollten dem Standard entsprechen. Zu enge Buchstaben etwa als graphischer Effekt verschlechtern die Lesbarkeit ebenso wie zu weit gesetzte Buchstaben.<br \/>\nAbs\u00e4tze sollten nicht zu lang werden. Lange Abs\u00e4tze verraten oft, dass sich der Schreiber keine Gedanken zu einer sauberen Gliederung gemacht hat. Mehr als drei oder vier mittellange S\u00e4tze sollte ein Absatz nicht umfassen.<br \/>\nDas selbe gilt dann auch f\u00fcr Textabschnitte. Lange Texte sollten durch Zwischen\u00fcberschriften angeteasert oder zusammengefasst werden.<br \/>\nKonkrete Vorgaben gibt es in der WCAG 2.1 unter 1.4.4 Resize text (AA). Text soll ohne assistive Technologien und Informations-Verlust auf 200 Prozent vergr\u00f6\u00dferbar sein.<br \/>\nHarte Vorgaben f\u00fcr Textabst\u00e4nde gibt es in der WCAG 2.1 unter 1.4.8 Visual Presentation. Diese Anforderung muss aber nur auf der h\u00f6chsten Stufe der Barrierefreiheit erf\u00fcllt werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Farben\"><\/span>Farben<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Jede andere Kombination als Schwarz auf Wei\u00df verschlechtert den Kontrast. Es mag Leute geben, f\u00fcr die andere Kombinationen besser sind. Tats\u00e4chlich ist es aber eher schwierig f\u00fcr die Textgestalterin, f\u00fcr alle individuellen Sehschw\u00e4chen sinnvolle Farbkombinationen bereit zu stellen. Hier ist der Nutzer gefragt, der sich seine bevorzugten Farben auf seinem Computer einstellen kann. Der Gestalter sollte sich vor allem darum k\u00fcmmern, dass Anpassungen der Farben nicht dazu f\u00fchren, dass der Text unlesbar wird, etwa wegen eines Hintergrundbildes. Bei Flie\u00dftext sollten generell Hintergrundbilder oder Farbeffekte wie Farbverl\u00e4ufe vermieden werden.<br \/>\nIn anderen L\u00e4ndern gibt es tats\u00e4chlich die Tradition, keinen rein wei\u00dfen Hintergrund f\u00fcr Pr\u00e4sentationen zu verwenden, weil diese Hintergr\u00fcnde zu stark blenden. Stattdessen wird der Hintergrund leicht abgedunkelt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Kontraste\"><\/span>Kontraste<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr Kontraste gibt es bei digitalen Texten Mindest-Vorgaben. Das sind auf Stufe AA der WCAG 2.1 4,5:1 f\u00fcr normalen und 3:1 f\u00fcr gro\u00dfen Text. Ob Sie diese Kontraste erf\u00fcllen, k\u00f6nnen Sie \u00fcber Kontrastrechner pr\u00fcfen.<\/p>\n<ul>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">Kontrast-Rechner von WebAIM<\/a><\/li>\n<li><a href=\"https:\/\/leserlich.info\/kontrastrechner\">Kontrast-Rechner von leserlich.info<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e4ufig werden wir nach dem ultimativen Tipp f\u00fcr die barrierefreie Schrift gefragt. Generell ist Schrift ein schwieriges Thema, da die Design-Abteilung alles andere als Flexibel&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreie-schrift-gestaltung\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreie Schrift-Gestaltung<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10065","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=10065"}],"version-history":[{"count":3,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10065\/revisions"}],"predecessor-version":[{"id":10815,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10065\/revisions\/10815"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}