UX-Typografie erklärt

Lange hat die Typographie im UX-Design nur eine untergeordnete Rolle gespielt. Dabei ist die verwendete Schriftart und vor allem auch die Schriftgröße enorm wichtig. Denn eine Webseite sollte immer mit dem Leser, für den die Webseite gemacht wird, im Hinterkopf erstellt werden.

Obwohl die Webseite und mit ihr auch die Typographie schön anzusehen sein soll, soll diese nicht zeigen, was der Designer kann sondern die Bedürfnisse des Nutzers in den Vordergrund stellen. Zu einem guten UX-Design gehören aber nicht nur der Aufbau und die verwendeten Farben. Vielmehr geht es auch darum, eine gute UX-Typografie zu bieten.

Der Nutzer soll schließlich auf jedem Endgerät die Webseite nicht nur besuchen können sondern auch die Navigation problemlos benutzen und die Webseite auch lesen können. Dafür muss sich die UX-Typographie immer dem verwendetem Gerät anpassen.

Zielgruppe der Webseite klar definieren

Damit der Designer ein gutes UX-Design erstellen und die UX-Typographie anpassen kann, sollte er vorab die Zielgruppe der Webseite klar definieren. Als Webdesigner solltest du dir darüber im Klaren sein, wer der durchschnittliche Leser deiner Webseite ist. Welche Bedürfnisse hat er, welche Motivationen auf deine Webseite zu kommen und welche Bedürfnisse, wenn er schließlich angekommen ist?

Um die Benutzererfahrung zu optimieren, muss alles beachtet werden: Von den Farben bis hin zur UX-Typographie. Denn die für die Webseite richtige Typographie ist mit der Schlüssel zur Usability der Seite. So erkennt man schnell, wenn man mobil zu einer Webseite unterwegs ist, ob sich der Betreiber die Mühe gemacht hat, diese für das jeweilige Medium anzupassen. Abgedeckte Menüs, nicht zugängliche Untermenüs und Grafiken, die viel zu klein skaliert werden, sind leider keine Seltenheit.

Natürlich werden Informationen im Internet nicht nur schriftlich vermittelt, es gibt auch noch Videos, Bilder und sogar Audiodateien. Aber Dreiviertel der Informationen, die wir im Internet konsumieren, werden in geschriebener Form konsumiert. Selbst wenn sie uns in einem Video präsentiert werden, sind ober- oder unterhalb des Videos garantiert noch Erklärungen angegeben.

Was ist UX-Typografie eigentlich?

Typographie wird als die Kunst verstanden, sprachliche Informationen mit Hilfe von Schrift zu vermitteln. Im 19. Jahrhundert war damit das Druckhandwerk gemeint, heute dagegen muss die Typographie im Internet zwei weitere Dinge leisten.

1. Im Internet ist die UX-Typographie dazu gedacht, dass der User sich besser auf die Informationen im Text konzentrieren kann. Dazu muss die Schrift klar zu lesen sein und sich vom Hintergrund abheben. Das Lesen von Texten am Bildschirm ist für die Augen bereits ermüdend.

   Eine Schrift fällt meistens nur negativ auf, wenn sie den Lesefluss stört oder eben Probleme mit dem Inhalt verursacht. Das ist immer dann der Fall, wenn der Inhalt durch die verwendete Schriftart oder Schriftfarbe schlecht zu lesen ist.

   Man kann also sagen: Die Schrift spielt solange eine untergeordnete Rolle, wie sie ihren Zweck, nämlich das Konsumieren der Informationen, unterstützt.

2. Gerade im Internet sollte die auf einer Webseite angewandte Typographie dem Leser das bestmögliche Leseerlebnis bieten. Das bedeutet, dass die UX-Typographie den Inhalt der Webseite auf der einen Seite unterstützt und kaum wahrgenommen wird, wenn sie nicht stört.

   Auf der anderen Seite spricht die richtige Auswahl der Schrift den User auch auf einer emotionalen Ebene an. Denn sie gibt den Informationen im Text Charakter.

   Ein Beispiel wäre hier die Verwendung der Schriftart „Comic Sans“, die ja eher als eine kindliche Schrift verstanden wird, im Wirtschaftsteil einer angesehenen Tageszeitung. Die Typographie würde hier ein Bild der Widersprüche mit sich bringen. Keiner erwartet eine kindliche Schrift im Wirtschaftsteil einer renommierten Zeitung. Würde die Schriftart dagegen in einem Bilderbuch verwendet, würden wir sie nicht als störend wahrnehmen, da sie zum Kontext passt.

8 UX-Typographie Tipps, die du beim Design deiner Webseite berücksichtigen solltest

1. Vermeide es, unterschiedliche Schriften miteinander zu kombinieren. Drei verschiedene Schriften auf einer Webseite sind bereits zwei zu viel, sie sorgen dafür, dass das Layout in den meisten Fällen nicht mehr einheitlich wirkt. Wenn du mehr als eine Schrift verwenden willst, solltest du darauf achten, dass diese entweder zueinander passen oder ganz bewusst einen starken Kontrast bilden.
2. Sorge für einen ausreichenden Farbkontrast. Schwarz auf weiß liest sich nun einmal am besten. Wenn du einen hellgrauen Hintergrund verwendest und weiß als Schriftart verwendest, kann dies, je nach Farbton, bereits dazu führen, dass der Kontrast nicht stark genug ist und der Leser so Probleme beim Lesen der Texte hat.
3. Denke an benachteiligte Anwender. Wenn du zum Beispiel eine Textkombination von Rot und Grün verwendest, können User mit der Farbsehschwäche die Farben nicht unterscheiden.
4. Achte darauf, dass du für das Web keine Print-Fonts nutzt, die eigentlich nicht für die Display-Darstellung gedacht sind. Sie weisen andere Merkmale auf und wirken sich oft negativ auf die Lesbarkeit aus.
5. Achte auf die Zeilenlänge. Da die Länge von Zeilen sich auch auf die Lesbarkeit des Textes auswirkt, ist es eine gute Idee, diese zu beschränken. 60 Zeichen, inklusive Leerzeichen, sind dabei für ein gutes Maß und sorgen für ein angenehmes Leseerlebnis.
   Hat eine Zeile dagegen zu wenig Zeichen, stört auch das den Leserhythmus des Users. Eine zu lange Zeile dagegen erschwert es dem User den Fokus auf den Text zu halten. Für mobile Displays dagegen gilt: Eine Laufweite von 30 bis maximal 40 Zeichen ist ausreichend.
6. Wenn du eine Schrift für deine Webseite auswählst, achte auch unbedingt darauf, dass du eine Schrift hast, die gut skalierbar ist. Denn unterschiedliche Schriftschnitte sollten gut miteinander harmonieren.
7. Verwende Schriften mit unterscheidbaren Lettern. Ein Beispiel für eine Schriftart, die keine gut unterscheidbaren Lettern bietet, ist Myriad-Pro.
8. Vermeide Textanimationen, wie blinkender oder drehender Text, da sie den Nutzer mehr ablenken als dass sie das Augenmerk auf eine bestimmte Aktion lenken. Daher solltest du so etwas unbedingt vermeiden. Hinzu kommt, dass diese Textanimationen nicht zur Seriosität der Webseite beitragen.

Ob bei einem Printprodukt oder eben am Computer, ausprobieren und testen hilft. So kannst du einen Flyer eben am besten begutachtet, wenn er ausgedruckt ist und die Wirkung eines Bildschirmtexts, wenn er auf verschiedenen Displaygrößen dargestellt wird. Auch die Auflösung der Displays spielt hier eine wichtige Rolle.

Die Auswahl der Schriftart ist unglaublich wichtig und kann die Aussage einer Webseite eben unterstützen oder sie billig, weil nicht zum Thema passend, wirken lassen.

Alle hier beschriebenen Gesetze gelten auch für die App-Entwicklung. Wenn ein Nutzer eine App öffnet, soll er nach Möglichkeit so lange wie möglich die App benutzen. Der Nutzer möchte nicht erraten, was der App-Entwickler ihm zu sagen hat, weil die Schrift viel zu klein ist. Alles soll gut lesbar sein und eben zum Kontext passen.

Fazit

Die UX-Typographie ist heute nicht mehr nur die Auswahl einer Schrift, die sich an alle Gegebenheiten anpasst. Vielmehr kannst du Typographie als die Summe von Zeilenabstand, Schriftgröße und Schriftauswahl sehen. Die richtige Schriftauswahl macht den Text lesbar und verleiht ihm Charakter. Wie in dem Beispiel oben angeführt, Comic Sans passt eben nicht zu einer offiziellen Rede, zu einem Kinderbuch dagegen schon.

Die unglaublich vielen Displays mit ihren unterschiedlichen Auflösungen, die auf dem Markt für Smartphone, Tablet und Computer verfügbar sind, stellen neue Anforderungen an den Einsatz der richtigen Schrift. Das bedeutet für den Webdesigner im Zweifelsfall, dass er sein Produkt, in diesem Fall die Webseite, auf verschiedenen Endgeräten testen muss.

Obwohl es schön wäre und dem Branding einer Marke auf jeden Fall helfen würde, kannst du leider nicht jede Schriftart für Digital- und Printmedien nutzen. Auch hier hilft nur wieder: testen.