Im zweiten Teil zur digitalen Schriftsetzung geht es mit Betrachtung der Zeilenlänge und der Textausrichtung um weitere wichtige Faktoren für ein perfektes Schriftbild im Web.
Bevor ein Fazit gezogen wird, widmen wir uns außerdem der Typografie für mobile Endgeräte. Wer seine Statistiken kennt der weiß, dass von Smartphones und Tablets immer mehr Besucher stammen. Auch ihnen müssen lesbare Texte geboten werden.
Hier geht es zum ersten Teil des Artikels.
Zeilenlänge
Ein oft unterschätzter Faktor für die Leserlichkeit von Texten ist die Zeilenlänge. Sowohl zu kurze als auch zu lange Zeilen sind nicht gut. In Zeitungen und Zeitschriften umfassen Zeilen meist zwischen 40 und 50 Zeichen. Das ist im grünen Bereich.
Optimal ist eine Zeilenläge von 50 bis 80 Anschlägen. Dann muss das Auge nicht zu schnell in die neue Zeile rutschen und kann im Text versinken. In Magazinen ist das aber gar nicht so sehr gewollt, schließlich soll man auch die Werbung drum herum wahrnehmen. Spalten haben im digitalen Bereich eigentlich nichts verloren.
Mittels CSS gibt es verschiedene Möglichkeiten die Zeilenlänge zu definieren. Eine sind die Attribute ‘min-width’ und ‘max-width’.
Wer die Textzeilen nicht zu kurz und nicht zu lang lässt, der unterstützt das Auge beim flüssigen Lesen.
Textausrichtung
Zentrierung ist höchstens bei Überschriften und wenigen Sätzen im Haupttext erlaubt, beispielsweise für Zitate. Alles andere wirkt einfach nur amateurhaft. Rechtsbündig ausgerichtete Text sieht man glücklicherweise kaum. Bis auf einige bewusste gestalterische Anwendungen, zum Beispiel auf Werbeplakaten, ist Rechtsbündigkeit auch Tabu.
Deutlich beliebter ist da schon der Blocksatz. Keine Frage: Ein perfekter Blocksatz wie im Buch beruhigt längere Textpassagen. Das Gehirn fährt routiniert die immer gleichlangen Zeilen ab und springt quasi im Takt in die nächste Zeile. Der perfekte Lesefluss. Nur leider ist der Blocksatz alles andere als einfach herzustellen, auch wenn in CSS scheinbar nur ein Befehl ausreicht. Dort wird die Ausrichtung mit dem Attribut text-align gesteuert. Sie kann linksbündig (left), rechtsbündig (right), zentriert (center) oder als Blocksatz (justify) erfolgen.
In der Internetrealität ist Blocksatz vor allem ein Unruhestifter. Voraussetzung für einen ordentlichen Textblock sind eine ausreichende Zeilenlänge und noch wichtiger eine funktionierende Silbentrennung. Letztere ist im Web noch nicht wirklich ausgereift. Und so werden die Zeilen meist unnötig lang gestreckt und wimmeln nur so vor Durchschüssen. Unregelmäßige Wortabstände erschweren das Lesen und machen den Text ganz allgemein unansehnlich. Gerade die deutsche Sprache mit ihren zusammengeschriebenen Wortkombinationen ist eine Herausforderung für den Blocksatz.
Was WordPress betrifft macht der Blocksatz kleine Fortschritte. Bei einigen Themes, unter anderem den Standard-Themes von WordPress, ist die Silbentrennung mittlerweile automatisch aktiv. Wem diese zu unsauber arbeitet, dem sei das Typografie-Plugin wp-Typography empfohlen.
Die linksbündige Ausrichtung ist nicht zu Unrecht die häufigste Wahl. Wie an der Fahnenstange beginnt der Text an einer geraden Kante, während ihre Zeilen wie im Westwind gen Osten flattern. Links die feste Verankerung, rechts ein dynamischer Auslauf. Das wirkt lebendig und schick, ist modern und traditionell zugleich. Und lässt sich vor allem hervorragend lesen.
Blocksatz ist im Internet eine große Herausforderung, wie dieses Beispiel zeigt. Nur mit einer funktionierenden Worttrennung macht diese Textausrichtung Sinn.
Typografie für Smartphones und Tablets
Seitdem es zur Selbstverständlichkeit geworden ist, dass wir mit unseren Smartphones und Tablets immer und überall im Netz surfen, ist es noch wichtiger geworden, dass der typografischen Gestaltung mehr Aufmerksamkeit geschenkt wird. Was auf dem großen Bildschirm im Büro gut aussieht bewährt sich nicht automatisch auch auf einem kleinen Display. Ein großes Problem, das auch App-Entwickler kennen, ist die Fülle an unterschiedlichen Bildschirmgrößen der mobilen Endgeräte.
Bei Smartphones und Tablets kommt es vor allem auf vier Aspekte an: Schriftgröße, Zeilenabstand, Buchstabenabstand und Kontrast. Je größer die Distanz zwischen Betrachter und Gerät, desto größer muss die Schrift sein. Smartphones werden meistens aus der Nähe betrachtet, das Tablet dagegen liegt oft auf dem Tisch oder steht auf einem Ständer. Zudem bietet es mehr Platz für größere Schriften, der sollte genutzt werden.
Der Zeilenabstand ist unter anderem so wichtig, weil Texte auf modernen Endgeräten mit weniger Konzentration gelesen werden. In der Bahn, im Park und in der Warteschlange gibt es viel Ablenkungspotential. Es wird öfter vom Bildschirm aufgeschaut. Trotzdem muss die Zeile schnell wiedergefunden werden.
Viel bedeutsamer als beim Computer sind außerdem die richtigen Wort- und sogar Buchstabenabstände. Bereits bei der Auswahl einer geeigneten Schriftart muss man die Spationierung berücksichtigen. Auch an Absätzen sollte man nicht sparen, die fördern die Leserlichkeit und das Wiederfinden der letzten gelesenen Textpassage.
Apropos Schriftart. Nicht jede lädt gleich schnell. Je ausgefallener, desto länger dauert der Aufbau in der Regel. Was am Computer kaum merkbar ist, kann im Mobilfunknetz oder langsamen WLAN ziemlich nervig werden. Die wenigsten Nutzer sind besonders geduldig. Lieber surfen sie weiter. Außerdem können lange Ladezeiten dem Suchmaschinenranking schaden.
Die Bildschirme von Mobilgeräten sind ständig anderen, oft schwierigen Lichtverhältnissen ausgesetzt. Mal scheint die Sonne schwach, mal strakt. Oft spiegelt das Display. Dann wiederrum sitzt man im dunklen Kino. Trotz all der widrigen Umstände müssen Texte gut lesbar sein. Deshalb ist ein größtmöglicher Kontrast wichtig. Auf dieser Webseite kann man testen, wie sich die Leserlichkeit bei verschiedenen Divergenzen verhält.
Im Sinne eines responsiven Webdesigns muss die Schriftart möglichst flexibel gehalten werden um sich den unterschiedlichen Bildschirmgrößen anpassen zu können. Pixel als Maßeinheit wurden früher gern genutzt um Größenangaben in unterschiedlichen Browsern und auf verschiedenen Geräten konstant zu halten. Heute birgt das diverse Nachteile. Schon allein weil die Pixeldichte auf den diversen Displays von Gerät zu Gerät variieren kann.
Besser ist es die Schriftgrößte in CSS mit der relativen Maßeinheit “em” anzugeben. Das hat den entscheidenden Vorteil, dass die Schriftgrößen voneinander abhängig sind und nur ein Wert im gesamten Stylesheet geändert werden muss um alle Schriften auf einmal in ihrem Ausmaß zu verändern. Das Verhältnis der Schriftgrößen zueinander bleibt dabei erhalten.
Fazit
Wer ein paar Grundregeln beachtet (Wichtigste: Niemals Comic Sans!), der lädt seine Leser geradezu ein und wird beispielsweise mit längeren Aufenthaltszeiten belohnt. Vorausgesetzt der Inhalt stimmt, denn langweilige Erzählungen oder falsche Informationen kann auch die perfekteste Schriftsetzung nicht kaschieren. Die Schriftformatierung ist eigentlich nichts anderes als die Verpackung des Produkts.
Feste Regeln gibt es für die Webtypografie kaum. Neben idealer Leserlichkeit ist Einklang und Harmonie mit der Textumgebung das Ziel. Anders als in vielen anderen Bereichen kann zu viel Kreativität bei der Typografie schnell schaden. Seinen persönlichen Weg findet man am besten durch Ausprobieren und Vergleichstests. Dabei können Dienste wie Typecast helfen. Und seine Mitmenschen nach der Meinung zu Fragen hat auch noch nie geschadet.
Beim Thema Webtypografie sollte man die mobilen Endgeräte nicht vergessen. Sie brauchen aufgrund besonderer Bedingungen gesonderte Aufmerksamkeit. Ein gutes Schriftbild erkennt man auf Smartphones und Tablets daran, dass der Besucher es nicht manuelle anpassen muss, zum Beispiel durch Vergrößerung oder Verkleinerung der Schrift.
Die genannten Aspekte sind alle wichtig für eine gute Leserlichkeit. Doch oberstes Ziel sollte immer eine gute Lesbarkeit sein. Zu der gehören neben den typografischen Faktoren des Teilbereichs Leserlichkeit auch orthografische und stilistische Qualitäten, die man nach all der Formatierung nicht vernachlässigen sollte.
Beispiel
Dieser Blog einer Fotografin setzt auf minimalistisches Design. Die Typografie wurde darauf leider nicht abgestimmt.
Der Zeilenabstand ist zwar für die vorhandene Schriftgröße gut gewählt, allerdings ist diese für das Layout viel zu klein. Wäre die Schrift größer, könnte man die Buchstaben im kontrastarmen Grau besser lesen. Die zu langen Textzeilen erschweren die Leserlichkeit zusätzlich.
Mit wenigen Anpassungen könnte man das Schriftbild innerhalb von Sekunden deutlich optimieren.