{"id":2249,"date":"2011-10-31T13:18:51","date_gmt":"2011-10-31T12:18:51","guid":{"rendered":"http:\/\/www.centigrade.de\/de\/blog\/?p=2249"},"modified":"2019-09-27T13:27:44","modified_gmt":"2019-09-27T11:27:44","slug":"die-auswahl-der-richtigen-schriftart-eine-einfuehrung","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/die-auswahl-der-richtigen-schriftart-eine-einfuehrung\/","title":{"rendered":"Die Auswahl der richtigen Schriftart &#8211; eine Einf\u00fchrung"},"content":{"rendered":"<p>Texte spielen in jedem Interface eine Rolle, sei es z.B. bei der Bezeichnung von Formularfeldern oder der Darstellung von l\u00e4ngeren Hilfe-Inhalten. Dieser Text soll eine allgemeine Einf\u00fchrung in das Thema \u201eAuswahl der richtigen Schrift\u201c geben. Einsteiger erhalten einige Hinweise, mit deren Hilfe sich die Suche nach der richtigen Schriftart vereinfachen l\u00e4sst.<\/p>\n<p><!--more--><\/p>\n<p>Bei der Erstellung eines Interface oder einer Webanwendung st\u00f6\u00dft jeder Designer irgendwann auf die Frage nach der richtigen Schrift. Auf den ersten Blick l\u00e4sst sich diese Aufgabe mit zwei simplen Fragen l\u00f6sen:<\/p>\n<p>&#8222;Welche Schriftart benutze ich?&#8220; und &#8222;Wie gro\u00df soll die Schrift sein?&#8220;<\/p>\n<p>In der Realit\u00e4t wird man dann leider schon bei der Beantwortung der ersten Frage von deren Komplexit\u00e4t \u00fcberrumpelt &#8211; die Anzahl der Schriftarten ist schier grenzenlos.<\/p>\n<p>Einfache, komplexe, verspielte, gradlinige, themenbezogene, zwei- sowie dreidimensionale Schriften&#8230; der Fantasie der Schriftgestalter sind offenbar kaum Grenzen gesetzt. Dazu kommen dann noch Parameter wie Gewichtung, die eventuelle Nutzung von Kapit\u00e4lchen und so weiter.<\/p>\n<p>Ist dann nach langer Suche die vermeintlich richtige Schriftart gefunden, wendet man sich der Frage nach der Schriftgr\u00f6\u00dfe zu. Doch auch hinter diesem Punkt verbirgt sich mehr als nur eine Zahl. Abgesehen von der H\u00f6he der Buchstaben, m\u00fcssen au\u00dferdem Zeilenabstand, Absatzh\u00f6he, Abstand der Buchstaben zueinander und viele weitere Faktoren ber\u00fccksichtigt werden.<\/p>\n<p>Wie findet man also zu <strong>der<\/strong> Schrift, die perfekt zum Interface passt?<\/p>\n<p>Leider existiert kein Erfolgsrezept, welches am Ende die perfekte Schriftart f\u00fcr ein bestimmtes Interface liefert. Wenn man sich jedoch n\u00e4her mit Typografie und einigen Regeln auseinander setzt, l\u00e4sst sich die Liste der in Frage kommenden Fonts auf eine \u00fcbersichtliche Anzahl reduzieren.<\/p>\n<h2>Worin unterscheiden sich Schriften? \u2013 Der normative Aspekt<\/h2>\n<p>L\u00e4sst man die &#8211; als Interface-Grundlage ohnehin unbrauchbaren &#8211; Spa\u00df-Schriftarten wie zum Beispiel <em>Hypmotizin<\/em> au\u00dfen vor, l\u00e4sst sich das Feld der Fonts in zwei Lager unterteilen: Serifenschriften und serifenlose Schriften. Als Serifen (auch F\u00fc\u00dfchen oder End-Querstrich) bezeichnet man die kleinen, quer zum Abschluss der\u00a0 Linie eines Buchstabens verlaufenden Striche.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2237\" title=\"Serifes\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Serifen.png\" alt=\"\" width=\"420\" height=\"320\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Serifen.png 420w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Serifen-300x228.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>Deutlich feiner lassen sich Schriften anhand der DIN-Norm DIN 16518:Schriftart unterteilen. \u00a0Diese teilt die Masse der Schriftfamilien in elf Gruppen auf, beispielsweise Gruppe II: franz\u00f6sische Renaissance-Antiqua,\u00a0 Gruppe IV: Klassische Antiqua, Gruppe X: Gebrochene Schriften oder Gruppe XI: fremde Schriften. Diese Gruppen unterscheiden sich durch ihre Herkunftszeit, die Strichf\u00fchrung, das Vorhandensein von Serifen, besondere Achsen, die Winkel und Form eventuell vorhandener Serifen und viele andere Merkmale. Zus\u00e4tzlich gibt es einige besondere Schriftgruppen wie Gruppe VIII: Schreibschriften, welche als Vorgabe nur die Verbindung der Buchstaben und das Aussehen einer heutigen Handschrift vorgibt.<\/p>\n<h2>Legibility und Readability \u2013 Der theoretische Aspekt<\/h2>\n<p>\u00dcbersetzt man die beiden Begriffe ins Deutsche, entsprechen sie dem deutschen Wort<\/p>\n<p>\u201eLesbarkeit\u201c. Dennoch beschreiben sie zwei unterschiedliche Eigenschaften.<\/p>\n<p>Die Legibility einer Schriftart bezieht sich auf die Lesbarkeit der einzelnen Buchstaben, beeinflusst durch Attribute wie zum Beispiel Strichst\u00e4rke, Serifen und Formeigenschaften. Die Legibility bezieht sich ausschlie\u00dflich auf die Form einer Schrift, andere Faktoren wie Farbe, Kontrast und \u00e4hnliches fallen in den Bereich der Readability.<\/p>\n<p>Dekorative Schriftarten haben beispielsweise meistens eine geringe Legibility, da sie auf das Aussehen und nicht die leichte Lesbarkeit ausgerichtet sind. F\u00fcr Zeitungen oder den Buchdruck entworfene Schriften hingegen zeichnen sich durch eine hohe Legibility aus.<\/p>\n<p>Bei der Schrift-Auswahl sollte man \u2013 um eine maximale Lesbarkeit zu gew\u00e4hrleisten \u2013 bez\u00fcglich der Legibility auf folgende Punkte R\u00fccksicht nehmen:<\/p>\n<ul>\n<li>Die Schriftart sollte keine besonderen Formen aufweisen\n<ul>\n<li>An Buchstaben, die eine au\u00dfergew\u00f6hnliche Form aufweisen (besondere Verzierungen, ungew\u00f6hnliche Proportionen\u2026) bleibt das Auge des Nutzers h\u00e4ngen. So stehen einzelne Buchstaben anstelle des gesamten Textes im Vordergrund.<\/li>\n<\/ul>\n<\/li>\n<li>Die richtige Laufweite finden\n<ul>\n<li>Als Laufweite wird der Abstand zwischen den einzelnen Zeichen einer Schriftart bezeichnet. Hier gilt:\n<ul>\n<li>F\u00fcr kleine Schriftgr\u00f6\u00dfen sollte eine eher gro\u00dfe Laufweite gesetzt werden, da die Buchstaben sonst f\u00fcr das Auge des Lesers schwer zu unterscheiden sind.<\/li>\n<li>F\u00fcr gro\u00dfe Schriftgr\u00f6\u00dfen sollte die Laufweite der Schrift reduziert werden, um den Zusammenhang der Buchstaben eines Wortes zu verdeutlichen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Die Buchstaben einer Schriftart sollten nicht zu schmal sein\n<ul>\n<li>Durch schmale Buchstaben wird es dem Leser erschwert, beispielsweise ein \u201ec\u201c von einem \u201ee\u201c zu unterscheiden. \u00a0Diese Regel ist jedoch nur in Kombination mit dem ersten genannten Punkt zu betrachten \u2013 die Breite sollte nur soweit erh\u00f6ht sein, dass noch ein nat\u00fcrliches Schriftbild gew\u00e4hrleistet ist.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2242\" title=\"Legibility\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Legibility1.png\" alt=\"\" width=\"420\" height=\"320\" \/><\/p>\n<p>Die Readability einer Schriftart wiederum bezieht sich nicht auf die einzelnen Zeichen, sondern deren Kombination in einem Text. Es geht also nicht darum, mit welchem Aufwand der Nutzer jedes Zeichen erkennt, sondern darum, wie gut sich ein Text in der Gesamtheit lesen l\u00e4sst. Es flie\u00dfen also Faktoren wie Gewichtung, Gr\u00f6\u00dfe, Ausrichtung, Farbe etc. mit in die Bewertung ein.<\/p>\n<p>Auch bez\u00fcglich der Readability gibt es einige Tipps:<\/p>\n<ul>\n<li>Eine Schriftart funktioniert nicht an jeder Stelle des Interface\n<ul>\n<li>Eine f\u00fcr eine \u00dcberschrift sehrmgut geeignete Schriftart l\u00e4sst sich beispielsweise oft schwieriger lesen, je l\u00e4nger der Text ist, f\u00fcr den sie verwendet wird.<\/li>\n<\/ul>\n<\/li>\n<li>Flattersatz anstelle von Blocksatz\n<ul>\n<li>Zu gro\u00dfe oder ungleichm\u00e4\u00dfige Abst\u00e4nde zwischen W\u00f6rtern, wie sie sich im Blocksatz zuweilen ergeben, erschweren die Lesbarkeit eines Textes.<\/li>\n<\/ul>\n<\/li>\n<li>Den richtigen Zeilenabstand finden\n<ul>\n<li>Liegen die Zeilen eines Textes zu nah zusammen, ist es f\u00fcr das Auge schwer, von einer Zeile in die n\u00e4chste zu springen. Hier gibt es keinen feste Formel, mit der sich die perfekte Zeilenh\u00f6he bestimmen l\u00e4sst, als Faustregel kann man sich jedoch merken: Die Zeilenh\u00f6he sollte in etwa 120%-130% des Schriftgrades betragen. Bei einem Schriftgrad von 10pt ergibt sich also eine Zeilenh\u00f6he von 12-13pt.<\/li>\n<\/ul>\n<\/li>\n<li>Die richtige Zeichengr\u00f6\u00dfe finden\n<ul>\n<li>Durch unterschiedliche Zeichengr\u00f6\u00dfen lassen sich Hierarchien innerhalb\u00a0 eines Textes abbilden.<\/li>\n<li>Bnonn Tennant behauptet in seinem Artikel \u201e16 Pixels: For Body Copy. Anything Less Is A Costly Mistake\u201d, Schriftarten unter 16 Pixeln seien schlicht zu schwer lesbar f\u00fcr einen gro\u00dfen Anteil der Bev\u00f6lkerung<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2243\" title=\"Readability\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Readability.png\" alt=\"\" width=\"420\" height=\"320\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Readability.png 420w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Readability-300x228.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>Der Aspekt der Readability spielt vor allem im Content-Bereich eines Interfaces eine gro\u00dfe Rolle, wenn Flie\u00dftexte in Form von Hilfetexten, Informationen etc. angeboten werden. In den Navigations- und Headerbereichen steht hingegen die Legibility im Vordergrund.<\/p>\n<h2>Kontextbedingte\u00a0 Einschr\u00e4nkungen \u2013 der technische Aspekt<\/h2>\n<p>Auch auf Einschr\u00e4nkungen, die sich durch den Einsatzkontext eines Interface ergeben, muss R\u00fccksicht genommen werden. Dies betrifft beispielsweise den Einsatz von Schriften bei Webanwendungen, da die korrekte Anzeige davon abh\u00e4ngt, ob die gew\u00e4hlte Schriftart auch auf den Rechnern der einzelnen Nutzer installiert ist. Als Alternative bieten sich Webfonts an, die nicht lokal installiert werden m\u00fcssen, sondern bei Bedarf aus dem Web geladen und eingebunden werden.<\/p>\n<p>Des Weiteren sollte gepr\u00fcft werden, ob alle ben\u00f6tigten Zeichen im Schriftpaket enthalten sind<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2246\" title=\"Technical\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Technisch.png\" alt=\"\" width=\"420\" height=\"320\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Technisch.png 420w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Technisch-300x228.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<h2>\u00c4sthetik \u2013 der emotionale Aspekt<\/h2>\n<p>Schlie\u00dflich darf auch die emotionale Komponente nicht zu kurz kommen. Ein Steuerberater wird keine Software mit Comic als Schriftart verwenden k\u00f6nnen, ohne seine Seri\u00f6sit\u00e4t in Frage zu stellen<\/p>\n<p>Jede Schriftart vermittelt eine gewisse \u201eAnmutung\u201c (Siehe Figure xx). Sei es das kindliche einer Comic-Schriftart (Comic Sans MS), das klare, seri\u00f6se Auftreten einer f\u00fcr den Print entworfenen Schrift mit besonders hoher Legibility\u00a0 (Garamond) \u00a0oder das bedr\u00e4ngende, fast schon aggressive Erscheinungsbild einer gedrungenen, fetten Schrift ohne oder gar mit negativem Zeichenabstand (Weltron Urban) \u2013 der gleiche Text kann durch Verwendung einer anderen Font eine komplett andere Wirkung erzielen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2247\" title=\"Emotional\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/emotional.png\" alt=\"\" width=\"620\" height=\"320\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/emotional.png 620w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/emotional-300x154.png 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>Dies hei\u00dft jedoch nicht, dass f\u00fcr jeden Bereich eine neue Schriftart verwendet werden sollte. Eine zu gro\u00dfe Anzahl an verschiedenen Schriften und Gr\u00f6\u00dfen lasst ein Interface extrem unruhig wirken und erschwert die \u00dcbersicht um ein vielfaches.<\/p>\n<p>Bei der Auswahl der gew\u00fcnschten Schrift m\u00fcssen nicht immer alle im System und Web vorkommenden Fonts getestet werden. Unter\u00a0 <a href=\"http:\/\/www.100besteschriften.de\/\">http:\/\/www.100besteschriften.de\/<\/a> gibt es eine Auflistung der hundert meistgenutzten Schriftarten \u2013 und diese sind nicht ohne Grund so h\u00e4ufig genutzt.<\/p>\n<h2>Fazit<\/h2>\n<p>Die korrekte Auswahl einer guten Schriftart ist eine Wissenschaft f\u00fcr sich. Die schier endlose Anzahl an verf\u00fcgbaren M\u00f6glichkeiten zur Gestaltung des Textbildes l\u00e4sst sich jedoch durch einige einfache Regeln auf ein \u00fcbersichtliches Ma\u00df reduzieren. Zus\u00e4tzlich spielen auch der pers\u00f6nliche Geschmack sowie das emotionale, von der Schrift gezeichnete Bild eine gro\u00dfe Rolle.<\/p>\n<p>Orientiert man sich zus\u00e4tzlich an den meist benutzten Schriften anderer Designer, lassen sich relativ schnell eine oder mehre passende Fonts f\u00fcr das eigene Interface finden.<\/p>\n<p>Unterst\u00fctzung bei der Suche liefern zahllose Quellen im Internet, wie <a href=\"http:\/\/www.typosuche.de\/\">http:\/\/www.typosuche.de\/<\/a> und viele mehr.<\/p>\n<h2>Quellen<\/h2>\n<p>Flowchart: <a href=\"http:\/\/gdesignbylaura.files.wordpress.com\/2011\/06\/font-selection-chart1.png\">http:\/\/gdesignbylaura.files.wordpress.com\/2011\/06\/font-selection-chart1.png<\/a><\/p>\n<p>Typosuche: <a href=\"http:\/\/www.typosuche.de\/\">http:\/\/www.typosuche.de\/<\/a><\/p>\n<p>16 pixels\u2026 <a href=\"http:\/\/www.smashingmagazine.com\/2011\/10\/07\/16-pixels-body-copy-anything-less-costly-mistake\/\">http:\/\/www.smashingmagazine.com\/2011\/10\/07\/16-pixels-body-copy-anything-less-costly-mistake\/<\/a><\/p>\n<p>100 beste Schriften: <a href=\"http:\/\/www.100besteschriften.de\/\">http:\/\/www.100besteschriften.de\/<\/a><\/p>\n<p>Choosing &amp; Using Type: http:\/\/www.will-harris.com\/use-type.htm (Webseite nicht mehr verf\u00fcgbar)<\/p>\n<p>DIN <a href=\"http:\/\/www.mufuku.de\/sk.pdf\">http:\/\/www.mufuku.de\/sk.pdf<\/a><\/p>\n<p>Hypmotizin: <a href=\"http:\/\/cooltext.com\/Download-Font-Hypmotizin\">http:\/\/cooltext.com\/Download-Font-Hypmotizin<\/a><\/p>\n<p>Webfonts: <a href=\"http:\/\/www.google.com\/webfonts\">http:\/\/www.google.com\/webfonts<\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"template":"","tags":[154,74,102,577,62],"class_list":["post-2249","blog","type-blog","status-publish","hentry","tag-typografie","tag-usability-de","tag-user-interface-design-de","tag-ux-de-1","tag-visuelles-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/2249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/22"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/2249\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=2249"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=2249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}