Die ergonomische Gestaltung von WWW-Seiten: Lesbarkeit & Typografie

Probleme mit der Schriftgestaltung in HTML

Trotz der Möglichkeit Bilder, Grafiken, Video- und Audioelemente in eine Webseite zu integrieren, werden doch die wesentlichen Informationen immer noch per Text dargestellt. Damit die Nutzer eine Seite auch wirklich lesen, müssen die Inhalte nicht nur interessant sein. Sie müssen auch ansprechend und gut lesbar gestaltet sein.

HTML, die Sprache mit der Webseiten kodiert werden, bietet eine Reihe von Möglichkeiten der Textgestaltung, allerdings sehr viel weniger als man von einem Textverarbeitungsprogramm gewöhnt ist. So sind z.B. nur sieben fest vorgegebene Schriftgrößen möglich. An Schrifttypen (Fonts) stehen zwar prinzipiell beliebig viele zur Verfügung, ob sie aber vom Computer des Nutzers dargestellt werden können, hängt davon ab, daß die verwendete Schrift dort auch installiert ist. Und hinsichtlich der Schriften gibt es große Unterschiede, z.B. zwischen Mac- und Windows-Rechnern.

Die wichtigsten Gestaltungselemente

Wesentlich für eine gute Lesbarkeit ist es also, die Möglichkeiten von HTML zu kennen und im ergonomischen Sinne optimal zu nutzen. Dies gilt für die Auswahl von geeigneten Schrifttypen, Textauszeichnungen, Farben, Abständen und Zwischenräumen, Hervorhebungen und Überschriften, um nur die wichtigsten Aspekte zu nennen.

Empfehlungen

Geeignete Schrifttypen

Wird bei einer Webseite keine Angabe zum Schrifttyp (Font) gemacht, so wird die Schrift zur Wiedergabe verwendet, die im Browser des Nutzers als Standardschrift eingestellt ist. Will man eine Schrift bei der Seitengestaltung fest vorgeben, so ist zu bedenken, daß nur folgende Schriften im jeweiligen Betriebssystem als sicher vorausgesetzt werden können:

Windows: Times New Roman, Arial
Mac: Times, Helvetica

Im allgemeinen gelten Schriften mit Serifen wie Times aufgrund ihrer größeren Formenvielfalt als besser lesbar. Dies gilt aber nicht für kleine Schriftgrößen am Bildschirm, da wegen der geringen Auflösung viele Details nur unzureichend dargestellt werden. In diesem Fall empfiehlt sich die Verwendung einer serifenlosen Schrift wie Arial und Helvetica. Gerade Arial ist aber bei kleiner Schrift auch nicht sonderlich gut lesbar, da viele Buchstaben ein sehr enges Schriftbild mit dünner Strichstärke haben.

Der speziell fürs Web entwickelte Font Verdana, in dem auch die Seiten von ergo-online gesetzt sind, eignet sich da wesentlich besser. Damit die Anzeige auch paßt, wenn Verdana beim Nutzer nicht installiert ist, kann eine Ersatzschriftart beim FONT-Tag in HTML angegeben werden, z.B.:

<FONT FACE="Verdana, Arial, Helvetica" SIZE="2">

Dies ist ein Absatz in der Serifenschrift Times New Roman. Diese Schriftart wird zwar in Zeitungen verwendet, aber sie ist bei kleiner Schriftgröße am Bildschirm nicht gut lesbar.

Dies ist ein Absatz in der serifenlosen Schrift Arial. Diese Schriftart ist bei kleiner Schriftgröße zwar lesbarer als Times, aber durch das enge Schriftbild auch nicht besonders geeignet.

Dies ist ein Absatz in der serifenlosen Schrift Verdana (falls die Schrift auf Ihrem PC installiert ist). Diese Schriftart ist auch bei kleiner Schriftgröße am Bildschirm relativ gut lesbar.

Schriftgröße

Auf die Schriftgröße hat man nur einen geringen Einfluß. Sie hängt ab von der Bildschirmauflösung, den Voreinstellungen der Schriftgröße für den Desktop (Windows) sowie im Browser des Nutzers. Insofern sollte man für den "normalen" Text die Standardschriftgröße und nur für Hervorhebungen größere Schriften wählen. Die Schriftgröße 1 (8 pt) ist generell zu vermeiden.

Hoher Kontrast zwischen Schrift- und Hintergrundfarbe

Ein hoher Kontrast zwischen Text und Hintergrund verbessert die Lesbarkeit der Seiten. Die beste Lesbarkeit ist bei einer schwarzen Schrift auf weißem Grund gegeben (der sog. "Positivdarstellung"). Besonders schwer lesbar ist blaue oder rote Schrift auf schwarzem Hintergrund oder gelbe Schrift auf weißem Hintergrund.

blaue Schrift

rote Schrift

gelbe Schrift

Darüber hinaus sind einige Farbkombinationen wie blau auf rot oder grün auf lila zu vermeiden. Dies liegt darin begründet, daß das menschliche Auge Farben mit weit auseinanderliegenden Wellenlängen nicht gleichzeitig scharf wahrnehmen kann.

Rote Schrift auf blauem Hintergrund ist schwer lesbar

Hervorhebungen verwenden

Webseiten, die nur aus Text bestehen, womöglich ohne irgendwelche Hervorhebungen und ohne Veranschaulichung durch Grafiken, sind sehr monoton und dadurch ermüdend für das Auge. Aber auch ohne Bilder lassen sich Texte lesefreundlich darstellen:

Nutzen Sie Hervorhebungen durch Fettdruck und durch Überschriften
Vermeiden Sie Kursivschrift (am Bildschirm schwer zu lesen). Ebenso sind NUR GROSSBUCHSTABEN schwer zu lesen.
Unterstreichungen sollten im Web nicht verwandt werden, da sie zur Darstellung von Links genutzt werden.
Verwenden Sie Aufzählungen (nummeriert oder mit sog. Bullets wie hier) zur Strukturierung.

Auflockerung durch Abstände zwischen Zeilen und Absätzen

Wichtig für die Lesbarkeit eines Textes sind auch Zwischenräume und Abstände zur Auflockerung eines Textes. Sie sind auch für ein Überfliegen oder schnelles Querlesen erforderlich. Auf die Zeilenabstände innerhalb eines Absatzes hat man in HTML keinen Einfluß, sie sind fest vorgegeben. Dennoch gibt es einige Gestaltungsmöglichkeiten:

Schreiben Sie in relativ kurzen Absätzen. Sie werden durch einen deutlichen Zwischenraum voneinander getrennt.
Mit dem neuen Mittel der Cascading Styles Sheets (CSS) lassen sich auch Zeilenabstände definieren. Das Ergebnis sehen allerdings nur Surfer, die einen Browser ab Release 4 einsetzen.
Sie können Zwischenräume auch über Tabellen steuern. Einen Zwischenraum erhält man über eine leeere Tabellenzeile, für die man die Höhe in HTML definieren kann. (Alle ergo-online-Dokumente sind als Tabellen realisiert). Auch Aufzählungen mit definierten Abständen und eigenen Aufzählungszeichen lassen sich gut über Tabellen gestalten, wie aus dem Beispiel unten ersichtlich ist.

Beispiel:

	Das ist eine Aufzählung, die über eine Tabelle realisiert ist.
	Sie können dabei die Abstände über die Tabellendefinition bestimmen (Textabstände oder Zellenabstände).
	In HTML sieht das so aus: <table border="0" cellpadding="10" cellspacing="0">
	Am besten geht das aber mit einem modernen Programm zur Webseitengestaltung, ohne daß man selbst dabei HTML beherrschen muß.
	Auch die Aufzählungszeichen sind so frei wählbar.

Nicht zu große Satzbreite

Bei zu langen Satz- oder Spaltenbreiten verliert das menschliche Auge leicht die Linie beim Zeilenwechsel. Deshalb werden z.B. Tageszeitungen in mehreren Spalten gesetzt. Bei den immer größer werdenden Bildschirmen sollten sich Texte nicht über die gesamte Bildschirmbreite erstrecken. Wenn die Zeilenlänge nicht schon durch Freiflächen oder Grafiken begrenzt ist, ist es ratsam den Text mindestens zweispaltig anzuordnen.

Weiterlesen

Ergonomische Gestaltung von WWW-Seiten

Einleitung und Überblick