{"id":4900,"date":"2017-04-16T21:10:55","date_gmt":"2017-04-16T19:10:55","guid":{"rendered":"https:\/\/8660.at\/?p=1137"},"modified":"2017-04-16T21:10:55","modified_gmt":"2017-04-16T19:10:55","slug":"schriftwahl-im-webdesign","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/typografie\/schriftwahl-im-webdesign\/","title":{"rendered":"Schriftwahl im Webdesign"},"content":{"rendered":"

Welche Schrift soll ich f\u00fcr mein Webdesign w\u00e4hlen? F\u00fcr viele eine schwierige Entscheidung, vor allem in Zeiten mit\u00a0einem schieren \u00dcberangebot an Webfonts. Doch mit den richtigen\u00a0Grundlagen ergeben sich automatisch einige Ausschlusskriterien, die es leichter machen eine passende Schriftart f\u00fcr den Mengentext im Web zu w\u00e4hlen.<\/p>\n

Warum ist die Schriftart \u00fcberhaupt wichtig?<\/h2>\n

Die Schriftart hat starken Einfluss auf die Leserlichkeit<\/strong> einer Website und \u00fcbt auf die Lesenden, noch bevor diese den Inhalt erfasst haben, gro\u00dfe Wirkung aus. Die Wahl einer geeigneten Schriftart sollte am Anfang der typografischen Gestaltung stehen und damit auch am Anfang des Webdesigns. Alle weiteren Schritte richten sich nach der Schrift, da Schriftgr\u00f6\u00dfe, Zeilenl\u00e4nge und Zeilenabstand fein darauf abgestimmt werden sollten.<\/p>\n

Auch wenn die Typografie der Bereich im Grafikdesign mit den meisten Konventionen und Fachbegriffen ist, sollte man sich davon nicht abschrecken lassen. Das Aussuchen einer geeigneten Schrift ist nichts \u201ewissenschaftliches\u201c, es ist viel mehr eine subjektive, gestalterische Entscheidung.<\/strong> Deshalb sollte man auch nicht zu gro\u00dfen Respekt davor haben, am besten man probiert einfach einmal aus und daf\u00fcr ist es hilfreich zu wissen welche Arten von Schriften es im Groben \u00fcberhaupt gibt.<\/p>\n

Welche Schrift ist die richtige Schrift?<\/h2>\n

Schriftklassifizierung<\/strong> ist ein umfangreiches wie auch kontroverses Thema f\u00fcr sich, aber halten wir es einfach. Sehr grob lassen sich Schriften in zwei Klassen einteilen:<\/p>\n

    \n
  1. Leseschriften f\u00fcr Mengensatz,<\/strong> die sich f\u00fcr l\u00e4ngere Lesetexte gut eignen, mit oder ohne Serifen. Darauf konzentriert sich dieser\u00a0Artikel.<\/li>\n
  2. Display Schriften f\u00fcr \u00dcberschriften und kurze Texte,<\/strong> die vorwiegend in gr\u00f6\u00dferen Schriftgraden funktionieren und oft auff\u00e4llig oder dekorativ sind.<\/li>\n<\/ol>\n
    \"Beispiel
    Leseschriften sollten m\u00f6glichst unauff\u00e4llig sein und sich im Hintergrund halten.<\/figcaption><\/figure>\n
    \"Display
    Display Schriften sind bei l\u00e4ngeren Texten und in kleinen Schriftgraden ungeeignet. Browser-Beispiel<\/a><\/figcaption><\/figure>\n

    Die typografische Qualit\u00e4t einer Website macht der richtige Umgang mit Schriften aus. Demnach gibt es auch<\/strong> keine schlechten Schriften, <\/strong>sondern nur schlecht eingesetzte Schriften. Unter den zahlreichen Webfonts, die uns heutzutage zur Verf\u00fcgung stehen, ist nicht jeder f\u00fcr alle Aufgaben gleich gut geeignet. Zum Beispiel ist die sehr auff\u00e4llige und dekorative Display Schrift aus dem oberen Beispiel f\u00fcr l\u00e4ngere Texte komplett ungeeignet, w\u00e4hrend sie als einzelnes Zeichen f\u00fcr eine Initialen oder kurze \u00dcberschriften sehr gut funktionieren kann. Es geht also darum die richtige Schrift f\u00fcr den richtigen Einsatz zu finden.<\/p>\n

    sans-serif oder serif?<\/h2>\n

    Mit oder ohne \u2013 die ewige Frage bei der Schriftwahl. Die einen behaupten nur serifenlose Schriften seien f\u00fcr den Bildschirm geeignet, da die Serifen zu fein f\u00fcr eine saubere Darstellung w\u00e4ren. Andere behaupten, dass Serifenschriften das einzig Wahre f\u00fcr l\u00e4ngere Text seien, da die kleinen Endstriche das Auge besser leiten. Beides ist\u00a0nicht richtig \u2013 es gibt zahlreiche f\u00fcr den Bildschirm optimierte Serifenschriften und in Zeiten von hochaufl\u00f6senden Displays r\u00fcckt das Thema zusehends in den Hintergrund. Auch, dass Serifenschriften besser lesbar sein als serifenlose ist\u00a0auch\u00a0nicht klar nachgewiesen.<\/p>\n

    Worum es viel eher geht als serif<\/em> oder sans-serif<\/em> ist, ob die Buchstabenformen gut unterscheidbar sind. <\/strong>Denn das beeinflusst die Lesbarkeit eines Textes deutlich. Wir lesen n\u00e4mlich keine Buchstaben, sondern erfassen Wortbilder. Je unterschiedlicher die einzelnen Buchstabenformen sind, desto leichter ist es einen Text zu lesen. Tendenziell haben zwar Serifenschriften unterschiedlichere Buchstabenformen, es gibt aber auch zahlreiche Serifenlose, die gut geeignet sind, wie das folgende Beispiel zeigt. Sehr geometrische Schriften hingegen haben eher leicht verwechselbare Buchstabenformen (ein Beispiel daf\u00fcr ist die Futura<\/a>)\u00a0und sind f\u00fcr den Mengentext weniger geeignet.<\/p>\n

    \"\"
    Unterscheidbarkeit von Buchstabenformen: Die linke Schrift ist sehr geometrisch, die oberen H\u00e4lften von a, g und q sehen gleich aus, I und l lassen sich ebenso nicht unterscheiden. Die mittlere Schrift hat auch als serifenlose gut unterscheidbarere Buchstabenformen. Die Serifenschrift ganz rechts hat die am deutlichsten unterscheidbaren Buchstabenformen.<\/figcaption><\/figure>\n

    Tipps zur Schriftwahl<\/h2>\n

    So, aber welche Schrift soll es nun sein? Unter der Vielzahl von M\u00f6glichkeiten machen es einem Einschr\u00e4nkungen leichter eine Auswahl treffen zu k\u00f6nnen. Deshalb hier ein paar Tipps als Anhaltspunkte f\u00fcr die Schriftwahl:<\/p>\n

    1. Technische Bedingungen kl\u00e4ren<\/h3>\n

    Die erste Frage ist, ob es im Zuge eines Performance Budgets<\/a> \u00fcberhaupt \u201eleistbar\u201c ist Webfont zu laden oder lieber auf Systemschriften zur\u00fcckgegriffen werden sollte? Wenn ja, wie viele und wie sollen diese Fonts integriert werden? Werden sie mit @font-face<\/code> vom eigenen Server geladen oder \u00fcber einen Service wie Typekit oder Google Fonts? Auf jeden Fall sollte man sich f\u00fcr eine Art<\/em> der Integration entscheiden um die Anzahl der HTTP-Requests gering zu halten. F\u00fcrs Erste reduziert man mit\u00a0dieser Entscheidungen schon die m\u00f6gliche Auswahl der Schriften, weil man eine\u00a0Plattform w\u00e4hlt.<\/p>\n

    2. Einsatzbereich und Zeichensatz bedenken<\/h3>\n

    Verf\u00fcgt die Schrift \u00fcber die f\u00fcr den Einsatz ben\u00f6tigten Schnitte (z.B. light, bold, italic), Sonderzeichen oder Ziffern? Wird auf der Website auch andere Alphabete au\u00dfer das Lateinische ben\u00f6tigt (z.B. Griechisch, Kyrillisch, Hebr\u00e4isch)? Je nachdem sollte man genau so eine Schriftart suchen, die\u00a0diese Voraussetzungen erf\u00fcllt und nicht z.B. f\u00fcr jede Sprache eine andere.<\/p>\n

    3. Den Inhalt lesen<\/h3>\n

    Welche Schriftart passt am besten zum Thema der Website? Serifenschriften vermitteln z.B. eher das Gef\u00fchl von Tradition und Seriosit\u00e4t, w\u00e4hrend serifenlose Schriften eher modern aber auch technischer\u00a0wirken. Im Endeffekt ist es eben eine gestalterische Entscheidung, welche Schriftart die Stimmung der\u00a0Website am besten tr\u00e4gt.<\/p>\n

    4. Je langweiliger, desto besser<\/h3>\n

    Eine gute Leseschrift bleibt im Hintergrund und wird im besten Fall von Lesenden gar nicht bewusst wahrgenommen. Sie sollten nicht durch au\u00dfergew\u00f6hnliche Formen, Zeichen oder Auszeichnungen auffallen. Sie wird unsichtbar und l\u00e4sst dem Inhalt den Vortritt. Display-Schriften f\u00fcr Mengentext zu verwenden ist demnach eine falsche Entscheidung.<\/p>\n

    Mehr dazu<\/h2>\n

    Hier eine Liste meiner liebsten Links zu dem Thema, f\u00fcr alle, die tiefer einsteigen wollen:<\/p>\n