Sichtbare Textgestaltung fürs Web

20. 04. 2017

Webtypografie muss sich neben der Visualisierung um alle Belange des interaktiven Textes kümmern – bereits damit beginnt Usability: zuerst die Information, dann die Gestaltung.

Jegliche visualisierte Gestaltung ist aber nur ein Angebot an den User, der diese ausschalten kann oder sie einfach nicht sieht.

Lesbarkeit und sichtbare Darstellung

Viele Artikel über Webtypografie beschäftigen sich mit den Vorzügen, die Webfonts bieten. Sie erläutern die Fontformate, geben Hilfen zum Gebrauch wie auch Anleitungen zur Einbettung. Dies soll hier nicht wiederholt werden.

Webfonts sind eine feine Sache. Ihre Anzahl steigt ständig, und ihre Verfügbarkeit auf externen Servern gilt mittlerweile als relativ sicher. Web-safe sind sie damit jedoch nicht. Auch gibt es kritische Stimmen, die sich gegen den Gebrauch von Webfonts aussprechen. Richard Fink führt entscheidende Argumente an und weist darauf hin, dass sich der Traffic bei der Nutzung von Webfonts unverhältnismäßig erhöht.

Demnach reagieren die Browser unterschiedlich auf die Font-Requests und ziehen sich womöglich zuerst auf den Fallback zurück, was mit einem Timeout verbunden sein kann.

Webfonts are not a requirement for great typography.

Adam Morse  |  Vollständiger Artikel

Webfonts sind allein für die Visualisierung gut. Dann sind sie cool. Für die Vermittlung der Information nehmen sie jedoch nur den zweiten Rang ein. Damit wird wieder einmal deutlich, wie sehr sich Webtypografie von der Print-Typografie mit ihren Variationen unterscheidet.

Wichtiger sind sichtbare Erfassbarkeit, Gliederung und Kontrast. Der Webtypograf muss sich allen Aufgaben stellen, die zur Vermittlung von Informationen notwendig sind. Visuelle Ästhetik muss sich dem unterordnen. Mit anderen Worten: Für jede typografische Spielerei bezahlt der User mit seiner Geduld.

Fonts und Satz

Die Schriftart selbst sollte gut unterscheidbare Zeichen aufweisen, um Verwechslungen auszuschließen. Bewährt haben sich serifenlose Schriftarten (sans-serif). Antiquas sind nicht immer so gut erfassbar, trotz zunehmender Qualität der Displays. Antiquas mit verstärkten Serifen sind allerdings zu empfehlen, vor allem serifenbetonte Antiquas (slab-serif), die zur Zeit sehr beliebt sind.

Ungewöhnliche Schriftarten wie Schreibschriften, Frakturen und Designerfonts sollten jedoch höchstens für entsprechend große Darstellung wie Überschriften verwendet werden. Dabei ist zu entscheiden, ob diese Maßnahme wirklich notwendig ist.

The best text faces generally have some personality, but not so much that it distracts us from the content or experience of reading.

Jason Santa Maria  |   Vollständiger Artikel

Die allgemeine Schriftgröße wird am besten mit 100 % bestimmt, was im Normalfall 1em entspricht. Diese relativen Werte erlauben dem User, die Ansicht nach seinen persönlichen Bedürfnissen zu skalieren. Anzumerken ist an dieser Stelle, dass moderne Websites mit informativen Artikeln größere Schriftgrade verwenden und auch insgesamt viel großzügigere Layouts benutzen.

Die Zeilenlänge sollte mit Leerzeichen zwischen 60 und 70 Zeichen betragen, weniger oder mehr können die Erfassbarkeit erschweren. Abweichungen sollten also aus triftigem Grund geschehen, wie bei mehrspaltigen Seitenlayouts.

Der Zeilenabstand ist jedenfalls größer als im Druck. 150 % Abstand gilt hier als brauchbare Empfehlung für den Fließtext. Die Schreibweise sollte dezimal ohne Einheit erfolgen:

line-height: 1.5;

Überschriften können jedoch, abhängig von ihrer Größe, kompakter dargestellt werden; das bezieht auch Zeichen- und Wortabstand mit ein.

Die genannten Richtlinien schlagen nur Werte vor, die zunächst ein allgemein angenehmes Bild ergeben sollten. Davon ausgehend können alle Angaben angepasst und verfeinert werden. Dies wird vermutlich für verschiedene Displaygrößen nötig sein.

Kontrast

Schriftfarbe und Hintergrundfarbe brauchen genügenden Kontrast. Dies bedeutet nicht zwangsläufig schwarze Schrift auf weißem Grund: Dieser Kontrast kann zur schnellen Ermüdung der Augen führen. Dennoch sei erwähnt, dass gerade dieser Kontrast bei Menschen mit Sehbehinderungen bevorzugt wird.

Farbfehlsichtigkeiten bedeuten nur selten Farbenblindheit. Dennoch ist es eine gute Maßnahme, die Seite einmal in Graustufen umzuwandeln, um die Kontraste zu ermitteln. Zusätzliche Muster statt reiner Farben an entscheidenden Stellen senden dann wichtige Ersatzsignale.

I don’t miss out on any colors — I see them all. I just have trouble being able to label them or tell them apart.

Aaron Tenbuuren  |   Vollständiger Artikel

Über die Form hinaus erzeugt Farbe Gefühl, dezente Harmonie oder Signal. Die Farbharmonie auf einer Seite ist wichtig für das Wohlgefühl des Users. Dezente Farben geben der Seite eine Tönung, die nicht auffällt, aber wahrgenommen wird. Signalfarben weisen dagegen auf wichtige Inhalte oder Aktionen hin.

Gliederung

Jede Seite wirkt optisch angenehm, wenn ihre Inhalte nicht gedrängt stehen. Niemand mag Gedränge. Abstände dagegen erzeugen Ordnung und Struktur. Weißräume verschaffen einer Seite Luft zum Atmen. Bilder bieten Abwechslung und liefern weitere Informationen. Linien trennen nicht nur, sie gliedern auch.

Abbildungen wie bspw. Fotos bereichern Informationen. Jegliche Abbildung sollte dann aber dem Zweck der Übermittlung von Informationen dienen und den Textabschnitt visuell unterstützen. Die Größe einer Abbildung sollte angebracht sein, zu klein und zu groß jedoch niemals. Der Zweck ist dabei entscheidend. Eine zusätzliche Bildzuschrift (figcaption) liefert auch dem sehenden User eine Erklärung. Das Bild selbst kann mit dem title-Attribut Infos im Hintergrund liefern.

Abstände zwischen Absätzen und Abschnitten erleichtern die Erfassbarkeit und beruhigen die Seite. Diese Abstände brauchen nicht zu knapp ausfallen. Die Höhe einer Leerzeile darf es durchaus sein. Abstände sollten sich darin unterscheiden, ob Informationen innerhalb eines Abschnitts zueinander Trennung brauchen oder ob ganze Abschnitte voneinander dessen benötigen. Der Abstand nach unten darf in jedem Fall größer sein.

Treat white space as a thankless design element, because you can gauge its success by how much people don’t recognize it.

Jerry Cao  |   Vollständiger Artikel

Eine Seite im Web hat zwar eine maximale Breite, aber eine unendliche Höhe, wenn es sein muss. Der Gestalter sollte sich daher nicht scheuen, Weißräume zu nutzen. Die Befürchtung, dass zu wenig Informationen im Viewport stehen, ist unbegründet. Eine sinnvoll gestaltete Seite lädt zur Benutzung ein, der User wird dann scrollen, um mehr zu erfahren. Das Gegenteil einer solchen Seite ist demnach: schlecht gestaltet und informationsleer. Das ist der Unterschied.

Horizontale Linien (hr) sorgen ebenfalls für notwendige und sichtbare Trennung zwischen Abschnitten eines Artikels. Sie müssen jedoch zusätzlich in die HTML-Seite aufgenommen werden. Günstiger ist dann die Alternative, z. B. dem letzten Absatz eines Abschnittes eine Bodenlinie (border-bottom) zuzuweisen, die per Stylesheet bequem gestaltet wird. Ebenso einfach kann sie dadurch auch ausgeschaltet werden. Pseudo-Selektoren sorgen hier für gezielte Anwendung, ohne das Tag hr verwenden zu müssen.

Zusammenfassung

Allein die sichtbare Textgestaltung verlangt viel Aufmerksamkeit, da das Lesen vom Display schnell ermüden kann. Hinzu kommt, dass unterschiedliche Displaygrößen nach flexibler Textdarstellung verlangen. Die aufgezeigten Abhängigkeiten sind dabei keine messbaren Größen, sie müssen jeweils ermittelt werden.

Der sehende User stößt kaum auf Schwierigkeiten, sofern die Empfehlungen bedacht werden. Doch der blinde User sollte auch weitere Informationen über den Text erhalten, um ihn besser zu verstehen. Siehe auch: Das blinde Web – semantische Webtypografie.

Frank Baranowski