Gut Lesen mit richtiger Größe

Würde man eine Website programmieren, sich selbst über­lassen und keine weiteren CSS-Angaben zum Text bringen, dann hätte man folgende Standardwerte: 16 Pixel Schrift­grad, Times als Schrift­art, Schrift­farbe schwarz und der Zeilenabstand liegt bei mageren 120 %. Das geht natürlich gar nicht. Die Times hat echte Probleme mit der Lesbarkeit (ok, eines Tages, wenn überall Retina-Displays genutzt werden, dann vielleicht nicht), kommt also nicht in Be­tracht. Schwarz auf dem hellem Hintergrund des Bild­schirms hat allgemein zu hohen Kontrast, der Zeilenabstand ist für das Web zu gering. Nur eines kann im Grunde bleiben: der Schriftgrad.

Basisschriftgrad finden

unterschiedliche X-HöhenDie Schriftgröße/der Schriftgrad ist grundlegend für gute Lesbarkeit, abgesehen von weiteren Faktoren wie Zeilen­abstand, Zeilenbreite, Schriftfarbe usw. Interessant ist, dass die verschiedenen Schriften trotz gleichen Schrift­Grads verschieden groß wirken. Das liegt an der sogenannten X-Höhe. Grundsätzlich kann man sagen, dass dadurch Gro­tesk­schriften (serifenlos) größer als Serifenschriften wirken. Das trägt erstmal zur Verwirrung bei, ist aber halb so schlimm, wenn es nur um den Basisschriftgrad geht. Der Fließtext sollte also gut lesbar sein. Abhängig von den oben genannten Faktoren guter Lesbarkeit gibt es nur ein Mittel, relativ sicher die passende Größe zu bestimmen: einen A/B-Test. Bauen Sie einen Klickdummy Ihrer Website mit Blind­text. Laden Sie die Website mehrfach (Tabs) in den Browser Ihrer Wahl (z.B. Firefox). Dann verändern Sie mit Firebug oder einem anderen Developertool stufenweise die Schriftgröße. In jedem Browsertab zeigt sich ein anderes Schriftbild. Durch Hin- und Herklicken zwischen den Tabs erkennt man schnell, welcher Schriftgrad am besten geeignet ist.

Überschriftengrade

Ausgehend vom Basisschriftgrad des Fließtextes justiert oder findet man Überschriftengrade. Das ist nicht so einfach wie vorher, denn jede Überschrift fällt besonders stark ins Gewicht. Die verwendeten Grade korrespondieren auf der Site, sodass später weitere Nachbesserung und Abstimmung notwendig wird. Schon bei den folgenden Beispielen wird deutlich, wie unter­schied­lich alles wirken kann.

Unterschiedliche Überschriftengrade
Beispiel A hat eine Überschrift mit 15 Pixel Größe Beispiel B mit 18 Pixel. Was wirkt besser? Für literarische Texte ist das zurückhaltende Beispiel A vielleicht besser und für journalistische Texte das kontrastreichere Beispiel B. Dass ein Zwischen­wert von 17 Pixel gut wirken kann, sehen Sie an diesem Blog …
Mein Rat ist: probieren Sie wieder diverse Grade aus. Vergessen Sie nicht, dass alle umgebenden Elemente das Erscheinungsbild beeinflussen können. Manchmal muss eine Überschrift viel größer werden, um in entsprechender Umgebung als solche wahrgenommen zu werden.

Das Gesamtbild zählt

Die A/B Tests haben den Vorteil, das eine intuitive Abstimmung vorgenommen werden kann. Nachteil ist, dass nur ein einziger Zustand bewertet wird. Zu Anfang mag alles gut aussehen, später nicht mehr. Sehen Sie folgenden verkleinerten Siteausschnitt—die Abstimmung der Schriftgrade scheint so in Ordnung zu gehen:

Grundschrift Barack Obama Site

Allerdings im Zusammenhang mit anderen Sitelementen haut das vielleicht nicht so hin. Mein Beispiel ist, wie Sie nun unschwer erkennen können, ein Ausschnitt der (ersten) Site von Barack Obama. Aufgrund der vielen graphischen Elemente, die dort um Aufmerksamkeit drängeln, ist eine vernünftige Abstimmung der Schriftgrade nicht mehr so einfach. Die Gesamtabstufung sollte überdacht werden, aber wenigstens ist es für den reinen Textteil gelungen:

Website Barack Obama

Webdesign ist immer eine Frage der Abstimmung aller Elemente zu- und untereinander. Das macht es so schwierig, akzeptable Lösungen zu erreichen. Ist man zu vorsichtig, dann entsteht eine lesbare, aber langweilige Site:

PSD 2 HTML

Rein typografische Lösungen sind langwierig zu entwickeln. Gute Abstimmung (Jason-Santa-Maria) zeigt aber eine einsichtige Staffelung aller Größen und wirkt umso befriedigender, weil mit wenig Aufwand viel erreicht wurde.

Typografische Lösung gut abgestimmt

Das unbekannte Wesen, der User

Leider ist im Web nicht alles vorhersehbar, wie etwa im Print planbar ist. Was ist, wenn der Betrachter einer Website eine sehr hohe Monitorauflösung gewählt hat? Die Schrift würde dadurch viel kleiner dargestellt. So ist genaue Abstimmung des Schriftgrades unwirksam gemacht. Ein User sieht an einem Windows-Monitor andere Schriftdarstellung als am Mac. Selbst die Browser stellen die Schrift unterschiedlich dar: in Safari sieht es anders aus als in Firefox. Puristisch gesehen kann man auf die voreingestellten Browser-Schriftgrade verbleiben und nichts weiter designen. Uns Jakob Nielsen, der Usability-Papst zieht das durch. Aber nicht ganz: bei ihm ist Verdana als Schriftart voreingestellt. Wenigstens verzichtet er damit auf die Times, was der durchschnittlichen Lesbarkeit schon sehr entgegen kommt.

Jakob Nielsen Usability

Comments are closed.

QR Code Business Card