Wer die Typografie optimiert, optimiert dabei gleichzeitig Lesbarkeit, Zugänglichkeit, Benutzerfreundlichkeit und grafisches Gleichgewicht, argumentiert Oliver Reichenstein in seinem Text „Web design is 95% typography“. Da Usability, Accessibility und gut lesbare Texte auch wichtige Komponenten der Content Strategie sind und ich mich persönlich sehr für gutes Grafik Design und schöne Schriften begeistern kann, widme ich diesen Blog Post der Typografie.

Was macht gute Webtypografie aus?

Typografie im Web muss im Gegensatz zum gedruckten Medium auf variable Bedingungen reagieren, wie unterschiedliche Endgeräte, Bildschirmauflösungen, etc. Ein guter Webdesigner behandelt Text laut Reichenstein nicht nur als Inhalt, sondern als Benutzeroberfläche. Er oder sie sollte sicherstellen, dass Texte auf allen gängigen Browsern und Plattformen einfach und ansprechend zu lesen sind. Korrekte Zeilenumbrüche, ausgewogene Wort- und Buchstabenabstände, aktiver Weißraum und die dosierte Nutzung von Farben erleichtern dabei die Lesbarkeit.

Die optimale Zeilenlänge liegt übrigens bei ungefähr neun Wörtern mit durchschnittlich fünf Zeichen und auch der Zeilenabstand sollte weder zu groß noch zu gering sein.

Außerdem sollte Typografie die Funktionalität einer Website nicht beeinträchtigen, also möglichst schnell laden. Ein dosierter Einsatz weniger Schriften mit vielen Gestaltungsmöglichkeiten ist daher ratsam.

Jürgen Genser fasst die wichtigsten Eigenschaften guter Typografie kurz und knackig zusammen. Für ihn sind die folgenden Punkte ausschlaggebend, wenn er eine Schrift für einen Online-Auftritt auswählt:

Geringe Dateigröße

Um möglichst kurze Ladezeiten zu erzielen, sollten Sie Zeichenumfang und Schnitte der eingesetzten Schriften reduzieren. Auch mit nur einer Schrift können Sie gut erkennbare Hierarchien gestalten: 

Ausgewogene Abstände

Klare Buchstabenabschlüsse

Kontrast

Lesbarkeit

Flexibilität

 

Details

Alle Bilder stammen aus den Slides zum Kurs Typografie und Webdesign von Jürgen Genser im Studiengang Content Strategie an der FH JOANNEUM – vielen Dank hierfür!

 

Typografie-Input im WWW

Zum Schluss habe ich für Sie noch einige Links zu spannenden (und natürlich gut gestalteten) Typografie-Webseiten zusammengestellt:

Typo Guide: Ein Leitfaden für Typografie im Alltag.

Type Terms: Die wichtigsten Typografie-Begriffe übersichtlich erklärt.

Beautiful Web Type: Die besten Schriften aus dem Google Webfont-Verzeichnis, schön aufbereitet.

Don’t Fear Web Typography: Grundlegendes HTML & CSS für Nicht-Web-Designer.