Der Content ist geschrieben, getestet und wurde angepasst, die richtige Zielgruppe wird mit den richtigen Worten angesprochen, die für uns relevanten Informationen werden vermittelt und verstanden und auch die Lesbarkeit ist gut – Zeit also, dass wir uns um die Leserlichkeit kümmern.
Die Leserlichkeit ist von der Norm DIN 1450:2013-04 als »Eigenschaft einer Folge erkennbarer Zeichen, die es ermöglicht, diese Zeichen im Zusammenhang zu erfassen« definiert. Vereinfacht gesagt beschreibt sie, wie gut oder schlecht Informationen objektiv entziffert werden können – abhängig von Einflussfaktoren wie der Schriftart, der Schriftgröße oder dem Layout (Herrmann 2013). Faktoren, die wir uns im Weiteren im Detail ansehen werden.
Typografie trägt wesentlich zum ersten Eindruck unserer Website bei. Sie verstärkt den Charakter unserer Website und unterstreicht die Aussagen unseres Contents. Typografie ist die Körpersprache der Inhalte (Walker 2018).
Sie schafft eine Art Lesevergnügen und macht – richtig angewandt – das Lesen nahezu mühelos. Die Nutzer werden sich beim Lesen wohl fühlen und damit auch die Inhalte bewusster wahrnehmen. Schlecht angewandte Typografie hingegen kann bei den Nutzern schnell zu Frustration führen, die es unbedingt zu vermeiden gilt, da damit eine negative Nutzererfahrung einhergeht (Batagoda 2017). Deshalb sehen wir uns auf den kommenden Seiten an, wie wir mit herausragender Typografie positive User-Experiences schaffen können.
Einer der zentralsten Punkte für eine die User-Experience aufwertende Typografie ist tatsächlich die Schriftgröße. 10 Pixel kleine Schriften haben Sinn gemacht, als unsere Bildschirme 640 Pixel breit waren – heutzutage kann man mit so einer Schriftgröße eigentlich nur noch verlieren.
So mancher würde nun möglicherweise argumentieren, dass man mit kleinen Schriften den Nutzern das Scrollen erspart und man ohnehin auch immer zoomen kann. Zu ersterem sei gesagt, dass Studien mittlerweile belegen, dass wir uns als User-Experience-Designer keine Gedanken darüber machen müssen, ob wir dies den Nutzern zumuten können (Harrison 2017). Denn wir können. Und wir sollten. Auch Bücher muten es den Lesern zu, hin und wieder umblättern zu müssen, für den »Luxus«, Text in einer Größe vor sich zu haben, der aus einer angenehmen Entfernung leicht leserlich ist.
Und klar, unsere Nützer können selbstverständlich zoomen und damit die Schriftgröße verändern. Die Frage, die wir uns aber stellen sollten, ist doch: Wollen unsere Nutzer die Schriftgröße verstellen? Wollen wir, dass unsere Nutzer zoomen müssen, um etwas auf unserer Seite lesen zu können?
Die traurige Nachricht für den Designer in uns gleich zuerst: Die Wahl der Schriftgröße sollte niemals etwas mit unserem persönlichen Geschmack zu tun haben – zumindest nicht, wenn es um Leserlichkeit und gute User-Experience geht (Reichenstein 2006).
In der digitalen Welt ist es oftmals sehr hilfreich, die analoge Welt abzubilden oder uns zumindest wertvolle Erkenntnisse von ihr abzuschauen. In diesem Fall liegt die Orientierung an Büchern und Magazinen und an die darin verwendete Schriftgröße nahe.
Die Schriftgröße dieses Textes hier beträgt 10 Punkt (nicht zu verwechseln mit Pixeln), eine sehr häufig in Büchern verwendete Größe. Grob in Pixel umgerechnet entsprechen 10 Punkt ungefähr 13 Pixel (Rinas 2014). Dabei haben wir allerdings momentan den Leseabstand komplett ignoriert, der bei Büchern typischerweise deutlich geringer ist als bei Bildschirmen. Rechnen wir diesen mit ein, landen wir für Bildschirme bei einer empfohlenen Mindestschriftgröße von 16 Pixel (Bnonn Tennant 2011).
Vielen Designern werden 16 Pixel anfangs als übertrieben viel erscheinen. Meiner Erfahrung nach will man aber nie mehr zu einer kleineren Schriftgröße zurück, wenn man sich erst mal daran gewöhnt hat und den Wert von guter Leserlichkeit auf Websites erkannt hat. Führen wir uns letztlich auch noch vor Augen, dass eine Studie eindeutig belegt, dass größere Schriften stärkere emotionale Bindungen mit unseren Websites erzeugen (Bayer et al. 2012), wäre es doch nahezu fahrlässig, weiterhin auf zu kleine Schriftgrößen zu setzen, oder?
Es gibt unzählige von ihnen und jede hat ihre ganz eigene Charakteristik, viele große Unternehmen lassen sich gar eigene Schriften entwickeln. Hierbei geht es mir aber eher weniger um die Charakteristik als viel mehr – richtig geraten – um die Leserlichkeit. Und dabei in erster Linie um die Frage, ob wir lieber auf Serifenschriften oder serifenlose Schriften setzen sollten.
Bis heute gibt es allerdings tatsächlich keine eindeutige Studie, die einem der beiden Schrifttypen den Vorzug geben würde. So kommt eine von Beymer et al. (2008) durchgeführte Studie zwar zu dem Ergebnis, dass Serifenschriften gegenüber serifenlosen Schriften 7,9 Prozent schneller gelesen werden können, allerdings konnte kein Unterschied im Textverständnis festgestellt werden.
Eine Studie von Mansfield et al. (1996) hingegen kommt zum Schluss, dass Studienteilnehmer zwar bei Serifenschriften eine bessere Performance wahrgenommen beziehungsweise vermutet haben, in Wirklichkeit aber die Lesegeschwindigkeit wie auch das Textverständnis bei serifenlosen Schriften höher waren.
Ob sich diese Wahrnehmung der Leser, dass Serifenschriften eine bessere Leserlichkeit aufweisen, in der Schrifttypenwahl bei den fünfzig meistbesuchtesten Websites der Welt niederschlägt, hat Jan Constantin untersucht. Im Jahr 2009 setzten 66 Prozent dieser Websites auf serifenlose Schriften für ihre Fließtexte (Martin 2009), vier Jahre später hat sich diese Zahl nahezu gedreht und es setzten plötzlich 61,5 Prozent dieser Websites auf Serifenschriften (Constantin 2013). Die Vermutung liegt nahe, dass dies auch mit dem Aufkommen von höher auflösenden Bildschirmen zusammenhängt, die die feinen Serifen deutlich besser darstellen können.
Zusammengefasst müssen wir diesbezüglich also zum Schluss kommen, dass es keinen Konsens darüber gibt, ob nun Schriften mit oder ohne Serifen die bessere Wahl für die Leserlichkeit sind, es aber einen sehr deutlichen Trend gibt, der in die Richtung geht, Serifenschriften für Fließtexte auf Websites zu verwenden.
Einig ist man sich allerdings darüber, dass es der visuellen Hierarchie zuträglich ist, wenn man verschiedene Schrifttypen beziehungsweise Schriften kombiniert. Wissenschaftliche Studien dazu gibt es keine, Typografen bevorzugen aber ohnehin, dass die Kombination von Schriften als Kunst verstanden wird. Die drei für mich wesentlichsten Orientierungspunkte bei der Kombination von Schriften für eine bessere User-Experience sind dabei folgende:
Sprechen wir von starken Kontrasten zur Erzeugung von visuellen Hierarchien, ist es für so manchen möglicherweise naheliegend, bei Überschriften oder gar bei Unterüberschriften ausschließlich auf Majuskeln, das ist der Fachterminus für Großbuchstaben, zu setzen. Viele Websites nutzen tatsächlich auch längere Texte, die ausschließlich in Großbuchstaben gesetzt wurden, um ihre Inhalte hervorzuheben. Was sie damit allerdings unfreiwillig in Wirklichkeit machen, ist, die Inhalte abzuwerten.
Dies nicht nur deshalb, weil in Großbuchstaben geschriebene Texte für uns Menschen etwas schreiendes und möglicherweise auch aggressives an sich haben, sondern vor allem auch, weil der Kontrast der einzelnen Buchstaben zueinander abnimmt und die Worte damit deutlich schwerer zu lesen sind. Es entsteht ein »Buchstaben-Einheitsbrei«.
Wie man sehr eindrucksvoll sieht, nimmt das Wort »Papeterie« in Großbuchstaben die Form eines Rechtecks an – wie im Übrigen auch alle anderen Worte, die in Majuskeln gesetzt werden. Das in Groß- und Kleinbuchstaben gesetzte »Papeterie« hingegen hat an der Oberkante vier unterschiedliche und an der Unterkante zwei unterschiedliche Höhen. Unser Auge hat damit deutlich mehr Orientierungspunkte und es fällt uns leichter, das Wort zu lesen (Tseng 2010).
Damit soll nicht gesagt sein, dass von in Großbuchstaben geschriebenen Worten grundsätzlich Abstand genommen werden sollte. Ganz im Gegenteil machen sie in einigen Fällen sogar sehr viel Sinn – beispielsweise im Menü unserer Website, wo im Normalfall keine ganzen Sätze stehen. Dort haben Großbuchstaben den Vorteil, dass sich das Menü damit noch deutlicher vom restlichen Content der Seite abhebt.
Möchte oder kann man auf einen etwas längeren Text in Großbuchstaben nicht verzichten, schafft eine erhöhte Laufweite – das ist ein erhöhter Abstand zwischen den einzelnen Buchstaben – Abhilfe. Der Typograf Matthew Butterick (2013) empfiehlt eine Laufweite zwischen 5–12 Prozent. Durch den erhöhten Buchstabenabstand werden Kontraste wiederhergestellt, die durch die Majuskeln verloren gegangen sind (Tseng 2016).
Wie wichtig die Zeilenlänge für die User-Experience ist, kann man sehr leicht selbst ausprobieren, indem man einen Wikipedia-Artikel auf einem großen, breiten Bildschirm öffnet und liest. Nahezu über die gesamte Breite des Bildschirms läuft der Text von links nach rechts – mit der Folge, dass wir als Leser sehr schnell ermüden, da es bei solch langen Zeilen zu starken Augen- und sogar Kopfbewegungen kommt (Soyter 2013).
Die Lösung, die Zeilenlänge zu beschränken, liegt damit auf der Hand – wird aber leider immer noch viel zu häufig vergessen oder ignoriert. Der beste Weg, die optimale Zeilenlänge zu bestimmen, ist, die Zeichen pro Zeile zu zählen. Ein guter Richtwert für die durchschnittliche Zeichenanzahl ist 70 Zeichen inklusive Leerzeichen (Butterick 2013).
Wie zu lange sollten ebenso zu kurze Zeilen vermieden werden, da dabei unser Auge zu häufig an den Zeilenanfang zurückspringen muss und damit der Lesefluss merklich gestört wird. Dies kann zu einer Art Stress beim Lesen führen, was letztlich dazu führt, dass in die nächste Zeile gesprungen wird, bevor die aktuelle gelesen wurde und damit Wörter und möglicherweise wichtige Informationen übersprungen werden (Holst 2010).
Dass es bei Wikipedia bis heute noch zu keiner Anpassung der Zeilenlänge gekommen ist, liegt übrigens nicht an Wikipedia selbst, deren Designteam schon längst eine Änderung durchsetzen wollte, sondern viel mehr am »wilden Mob einiger Wikipedia-Fundamentalisten« (Wilson 2014), die Veränderungen an ihrer geliebten Plattform nicht tolerieren wollen.
In den allermeisten Fällen sollte auch der Abstand zwischen den einzelnen Zeilen manuell eingestellt werden, da der Standard-Zeilenabstand deutlich zu eng für eine gute User-Experience beim Lesen ist. Das liegt daran, dass unser Auge bei zu eng aneinander liegenden Zeilen auch die darüber und darunter liegenden Zeilen mit erfasst und der Fokus leichter verloren geht. Für uns Leser heißt das, dass wir uns intensiver darauf konzentrieren müssen, in der richtigen Zeile zu bleiben, dass wir schneller ermüden und Energien aufwenden, die wir beispielsweise viel eher für das Textverständnis benötigen würden.
Wie auch bei der Zeilenlänge sollte man hierbei mit Bedacht vorgehen, da auch zu große Zeilenabstände das Lesen erschweren – wir müssten uns wahnsinnig darauf konzentrieren, die richtige nächste Zeile beim Zeilensprung zu finden.
Einen absoluten Wert für den Zeilenabstand zu nennen wäre unsinnig, da dieser auf Basis der Schriftgröße eingestellt werden sollte – aus diesem Grund ist es deutlich sinniger, den Wert in Prozent anzugeben. Ich persönlich präferiere dabei 140 Prozent des Standard-Zeilenabstandes. Dieser Wert liegt auch ziemlich genau in der Mitte von dem, was Typografen weltweit empfehlen (Butterick 2013).
Linksbündig, zentriert oder dieses Mal im Blocksatz? Eine Frage, die wir uns als Designer alle wahrscheinlich schon gestellt haben – dabei könnten wir uns wahnsinnig viel Zeit sparen, wenn wir grundsätzlich Fließtexte linksbündig ausrichten würden. Wieso? Für die User-Experience.
Zentrierter Text ist wahnsinnig beliebt – und für kurze Überschriften auch absolut nicht problematisch, oft sogar sehr sinnvoll. Längere Absätze jedoch sollten nicht zentriert gesetzt werden, da der Zeilenanfang wie auch das Zeilenende in jeder Zeile variiert, wir als Leser ständig nach Orientierung suchen müssen und dies den Lesefluss stört (Butterick 2013).
Noch deutlich problematischer ist aber in Blocksatz gesetzter Text – wie dieser Absatz hier. Einerseits vor allem aus Sicht der User-Experience deshalb, weil unser Auge durch den damit auch rechtsbündig ausgerichteten Zeilenanfang einen wichtigen Orientierungspunkt verliert. Andererseits entstehen sehr schnell unschöne Lücken, die sich wie kleine Schlangen durch unseren Text ziehen.
Dadurch, dass wir im Responsive Design meist keinen Einfluss auf die Zeilenlänge auf Mobilgeräten haben, können wir den Blocksatz nicht wie in professionellen Programmen genau einrichten und kontrollieren. Besonders viel Leid tun wir damit Menschen an, die unter Dyslexie – einer Lesestörung – leiden. Die teils großen Wortabstände sorgen dafür, dass jene Personen ständig den Fokus verlieren und damit schlimmstenfalls den Text überhaupt nicht lesen können (Tseng 2011).
Der letzte für mich wesentliche Punkt bezüglich Typografie und UX ist der Farbkontrast – also der Kontrast des Textes zum Hintergrund. Grundsätzlich gilt, dass ein relativ hoher Kontrast vorhanden sein sollte. »Relativ« deshalb, weil auch tiefschwarzer Text auf reinweißem Hintergrund schnell problematisch werden kann.
Studien belegen, dass – genauso wie zu niedrige Kontraste – auch zu hohe Kontraste unsere Augen belasten (Pribadi 1990). Bei unter Dyslexie leidenden Menschen führen zu hohe Kontraste zudem möglicherweise zu Unschärfeeffekten, die das Lesen der Texte unmöglich machen. Es empfiehlt sich daher, als Schriftfarbe ein dunkles Grau zu verwenden und dies eventuell auch noch zusätzlich mit einem leicht hellgrauen Hintergrund zu kombinieren. Unseren Nutzern zuliebe.
