Typografie = Usability

Wussten Sie, dass die Begriffe „Schusterjunge“ und „Waise“ etwas mit der Satzgestaltung, genauer gesagt mit Typografie gemeinsam haben? Mehr als dreiviertel der Informationen im Internet werden durch Schrift übermittelt. Die Disziplin, die sich mit der Visualisierung schriftlicher Informationen beschäftigt, ist die Typografie. Dabei hängen Usability und Typografie eng zusammen, die neben der Lesbarkeit auch die Barrierefreiheit bedingen. In den kommenden Blogartikeln möchte ich mich dem Thema des Einsatzes von Schrift und der Schriftgestaltung widmen. Ziel soll es sein, einen Überblick zu liefern, der Ihnen die Kontaktpunkte mit der User Experience aufzeigt.

Was ist Typografie?

Typografie ist die Kunst von der Gestaltung sprachlicher Informationen durch Schrift. Dabei spielen verschiedene Überlegungen eine Rolle, die derjenige meist durch viel Erfahrung und Präzisionsarbeit erlangt: Mikrotypografie, Makrotypografie, Schriftsatz, Darstellungsmedium, Ästhetik, Lesbarkeit im Sinne der Usability etc. In unserem alltäglichen Arbeitsprozess laufen diese Prozesse leider meist eher unterschwellig ab. Im klassischen Sinne ist mit Typografie das Druckhandwerk gemeint, auf die sich auch die eingangs genannten Begriffe „Schusterjunge“ (auch „Waise“) und „Witwe“ (auch „Hurenkind“) beziehen. Sie stellen Fachbegriffe der Typografie aus dem 19. Jahrhundert dar und beschreiben zwei Typen von Satzfehlern, die auch heute noch Bestand haben:

• „Als Witwe, wird die letzte Zeile eines Absatzes bezeichnet, wenn sie zugleich die erste einer neuen Seite oder Spalte ist. Sie heißt so, weil sie ihre ‚Herkunft‘ respektive ‚Partner‘, also den inhaltlichen Zusammenhang verloren hat.“
• „Als Schusterjunge wird eine am Seiten- oder Spaltenende stehende Zeile eines neuen Absatzes bezeichnet, der auf der Folgeseite fortgesetzt wird – die sich also ‚vorwitzig wie ein Schusterjunge‘ auf die vorhergehende Seite wagt.“

(Quelle: Aus https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge)

Im Artikel verwende ich die Begriffe Schrift und Font, die ich kurz definiere:

• Schrift = die visuelle Umsetzung, das was wir als Leser sehen und auswählen können.
• Font = Digitale Repräsentation einer Schrift, die Computer nutzen, um die Schrift darzustellen.

Was leistet Typografie?

Typografie leistet im Wesentlichen zwei Dinge:

1. Sie muss dem Leser die Möglichkeit geben, sich auf die Informationen im Text zu konzentrieren. Sie und ihre Formatierung fallen bestenfalls nicht auf, sondern stellen den Inhalt in den Vordergrund. Viele meiner Kollegen berichteten mir, dass sie selbst das Thema Typografie bisher eher nebensächlich betrachtet haben. Fällt Probanden die Schrift negativ auf, so liegt das meist daran, dass sie den Lesefluss stört oder anderweitig Probleme mit dem Inhalt verursacht, sodass der Inhalt schwerer zu erfassen ist. Dann spricht man von schlechter Typografie, die Einfluss auf die Usablility hat. In den kommenden Blogartikeln werde ich zeigen, dass Typografie noch aus mehr besteht.
2. Sie muss dem Leser das bestmögliche Leseerlebnis bieten. Das heißt, Typografie unterstützt den Inhalt durch die richtige Auswahl der Schrift auch auf einer emotionalen Ebene. Sie gibt den Textinformationen Charakter. Eines der wohl bekanntesten Beispiele ist die Schrift „Comic Sans“. Deren Verwendung sorgt nicht nur unter Typographen meist für Kopfschütteln, da sie den Text (meist nicht-intentional vom Autor) als eher kindische Ansammlung von Buchstaben degradiert. Stellen Sie sich nur einmal eine Rede der Bundeskanzlerin vor, die in Comic Sans in der Frankfurter Allgemeinen Zeitung abgedruckt wird. Das wäre ein Bild voller Widersprüche.

The Medium Is The Message & Eine Schrift für alles?

Marshall Mcluhan beschrieb meiner Auffassung nach in seiner Phrase auch, dass das Medium die Botschaft beeinflusst. Dies bezieht sich auch auf die Gestaltung der Information, und somit die Typografie. Die Herausforderungen des Einsatzes von Schrift, steigen mit der Vielfältigkeit der medialen Darstellung: Schrift muss flexibel und cross-funktional sein. Neben den klassischen Printprodukten erfordern verschiedene Displayarten und Displaygrößen diese Flexibilität. Herausforderungen sind dabei vorprogrammiert.

Bereits vor meinem Design-Studium entdeckte ich die Faszination an der Typografie. Besonders das Editorial Design mit der klassischen Magazingestaltung hatte es mir angetan. So war es nicht verwunderlich, dass ich gerne ein paar Haufen Magazine als Inspirationsquelle ansammelte. Das Gesellschaftsmagazin „DUMMY“ mit seiner ständig wechselnden Layout-Gestaltung, ist auch bis heute eines meiner Lieblings-Magazine geblieben. Die Aussage des Covers der DUMMY 17 zum Thema „Liebe“, beschreibt aus meiner Sicht gut das heutige Problem mit Typografie.

Das Cover der Zeitschrift DUMMY 17 zum Thema „Liebe“

Wie der Fotograf die gute Frau auf dem Cover der DUMMY zum Weinen gebracht hat, erfahren wir leider nicht. Vielleicht liest sie gerade einen Text auf einem Display und tut sich schwer, die Schrift zu erkennen? Schaut man sich an, wie Schrift gegenwärtig in digitalen Medien dargestellt wird, ist einem im wahrsten Sinne manchmal zum Heulen zumute.

Unterschiede zwischen Print und Digital(-Schriften)

Schwierigkeiten ergeben sich bei der Gestaltung von Print- und Digitalprodukten. So wird versucht, Schriften wie sie in Print-Produkten eingesetzt werden mit den unterschiedlichen Anforderungen digitaler Medien, z. B. durch die Darstellung auf einem Display, zu vereinigen.
Megan Molteni schreibt hierzu: „Fonts have a serious image__ __problem. A font that looks great on your Mac might look bloated on mom’s Chromebook or blocky on a friend’s Nexus 6. Send them a funny listicle and they might never find out why No. 11 will amaze them, because the type is such a nightmare they don’t bother reading.“

Es werden meist Schriften verwendet, die einfach nicht für Displays optimiert sind. Hier leidet häufig die Lesbarkeit sehr, was sich negativ auf die Faktoren der Usability auswirkt. Beispielsweise verwendete Apple lange Zeit „Helvetica“ als Systemfont für seine Software-Produkte. Bekannt ist, dass „Helvetica“ seinen Ursprung im Printbereich hat. „Helvetica“ wirkte bei der Darstellung im Display häufig zu austauschbar und je nach Displayauflösung zu dünn. Hier gab es teils heftige Kritik seitens der Nutzer. So werden Buchstaben und Zahlen – wie 1, i, l, I – nicht mehr unterscheidbar. Dies kann besonders bei der Anzeige wichtiger Daten, wie z. B. Passwörtern, für Ärger beim Nutzer sorgen. Apple entschloss sich daher für eine Neuentwicklung der Systemfont „San Francisco“, die insbesondere den Anforderungen verschiedener Display-Auflösungen gerecht wird. Welchen Aufwand Apple hierfür betrieben hat, wird aus dem Einführungsvideo zur „San Fancisco“ deutlich.

9 Tipps zum richtigen Umgang mit Typografie

Die folgenden 9 einfachen Tipps helfen, die Usability für Leser des Contents, den man erstellt, zu verbessern.

• Vermeiden Sie es, unterschiedliche Schriften miteinander zu kombinieren. Mehr als 3 sind 2 zu viel. Unterschiedliche Schriftgrößen und Stile verschlimmbessern meistens das Layout. Sollten Sie unbedingt mehrere Schriften miteinander kombinieren wollen, achten Sie darauf, dass diese so komplementär wie möglich zueinander sind.
• Schränken Sie die Zeichen einer Zeile innerhalb des Textes ein. Die Länge von Zeilen ist kritisch für die Lesbarkeit. 60 Zeichen (inkl. Leerzeichen) sind gut für ein angenehmes Leseerlebnis. Befinden sich zu wenig Zeichen in einer Zeile, müssen Nutzer zu häufig zurück an den Anfang der Zeile springen. Das stört den Leserhythmus. Eine zu lange Zeile erschwert es, den Fokus auf den Text zu halten. Für mobile Displays empfiehlt sich eine Laufweite von 30 bis maximal 40 Zeichen.
• Wählen Sie eine Schrift, die eine gute Skalierbarkeit der Größe ermöglicht. Unterschiedliche Schriftschnitte sollten in ihrer Größe gut miteinander harmonieren.
• Vermeiden Sie es, Print-Fonts für die Display-Darstellung zu verwenden. Print-Fonts weisen andere Merkmale auf, die sich im Display-Bereich nachteilig auf die Lesbarkeit auswirken.
• Verwenden Sie Schriften mit gut unterscheidbaren Lettern (Negativbeispiel: „Myriad-Pro„).
• Vermeiden Sie eine zu geringe Laufweite. Eine Faustregel besagt, dass die Laufweite 30 % größer sein sollte als die der Zeichenhöhe (die Höhe eines Buchstabens).
• Vermeiden Sie Textanimationen wie blinkenden Text.
• Vermeiden Sie Textfarbenkombination von Rot und Grün. Das Problem: Für Menschen mit einer Farbsehschwäche ist sie nicht unterscheidbar.
• Stellen Sie einen ausreichenden Farbkontrast sicher. Für einen kleinen Text gilt ein Kontrast von 4,5 zu 1 gegenüber dem Hintergrund. Für einen größeren Text gilt 3 zu 1.

Wie bei allen Dingen im Leben, hilft auch hier meistens nur Ausprobieren und Testen, um ein besseres Ergebnis zu erhalten. Printprodukte sollten immer ausgedruckt begutachtet werden. Ebenso sollten Schriften auf verschiedenen Displaygrößen mit unterschiedlichen Auflösungen begutachtet werden, um eine bestmögliche Bewertung zu ermöglichen.

Fazit

Typografie ist heute nicht mehr einfach nur das Auswählen einer Schrift und der Rest erledigt sich von selbst. Sie ist bedeutend mehr als die Summe von Schriftauswahl, Schriftgröße, Zeilenabstand.

Die richtige Typografie macht den Text lesbar und sie verleiht ihm Charakter.

Displays stellen neue Anforderungen an den Einsatz der richtigen Schriftart und an die Schriftgestaltung.
Nutzer sollten sich über die Unterschiede in der Darstellung von Schrift im Bereich Print und im Digitalen bewusst sein.

Bei eresult arbeiten wir im User Design Hand in Hand mit dem Kunden. Anforderungen an die Typografie werden dabei direkt abgestimmt und neue Entwürfe mit Probanden getestet. Dabei profitieren die Entwürfe von der Erfahrung unserer Design-Spezialisten, die ebenso das Handwerk des Testings beherrschen.

Dieser Artikel ist eine Einführung in das Thema „Die Problematik des Einsatzes von Schrift im Digitalen und Print“. Ich möchte in meinem kommenden Beitrag darstellen, wie sich aktuelle Trends im Einsatz von Farbe, Kontrast auf Themen wie Barrierefreiheit auswirken. Auch werde ich behandeln, welche Möglichkeiten sich beim Einsatz crossfunktionaler Schriftarten auf unterschiedlichen Devices bieten.

Mcluhan, Marshall 1964: Understanding Media: The Extensions of Man, Mentor New York; Neu aufgelegt 1994, MIT Press, Cambridge.