Das Dressing für den Buchstabensalat
Optimale Textaufbereitung im WWW

von Eva & Michel Birnbacher (Ausgabe 03/2, Oktober 2003)

 

Die Zeiten, in denen der reine Wissensaustausch innerhalb des WorldWideWeb im Vordergrund stand und ein einfacher Textbrowser zum "Surfen" ausreichend war, sind längst vorbei. Bereits Mitte der neunziger Jahre hielten mit den ersten grafischen Browsern die Bilder und Farben Einzug ins WWW, und selbsternannte WebdesignerInnen begannen sich unter dem Motto "je schriller, desto besser" gegenseitig zu übertrumpfen. Schon der Begriff Webdesign verleitet ja dazu, der optischen Gestaltung einer Webseite mehr Bedeutung beizumessen als der Vermittlung von Informationen. Demgemäß wurde lange Zeit mit allen Mitteln versucht, Aufmerksamkeit zu erregen: Wo immer es möglich war, wurden Grafiken - am besten animated gifs - anstelle von Text verwendet, um das Auge der BetrachterInnen zu bannen. Die Entwicklung neuer Techniken spielte diesem Trend in die Hände: Mitunter konnten Webseiten nicht mehr ohne Spezialeffekte auskommen, ohne als langweilig zu gelten oder gar den Eindruck zu erwecken, daß ihre EntwicklerInnen technisch nicht mithalten könnten. Wer seine Erinnerung an diese "bewegte" Zeit auffrischen möchte, kann im Internet Archive in längst aufgelassenen Webseiten stöbern.

Mittlerweile ist allerdings eine Trendumkehr zu beobachten: Der Großteil der WebdesignerInnen konzentriert sich auf ein harmonisches Zusammenspiel von Information und Design, Grafiktext wird aufgrund zu hoher Ladezeiten so weit wie möglich vermieden, und selbst die Navigation funktioniert auf den meisten Seiten wieder über HTML-Text. Die Gründe für diesen Sinneswandel liegen unter anderem in der Vielzahl von Studien, die die Verhaltensweisen und speziell die Lesegewohnheiten der Internet-BenutzerInnen untersuchen. So ist es kein Geheimnis mehr, daß das Lesen vom Bildschirm anstrengender ist als das Lesen gedruckter Texte. Glaubt man einer Studie des Usability-Gurus Jakob Nielsen, so benötigt das Lesen vom Monitor sogar um rund 25% mehr Zeit. Auf jeden Fall ist erwiesen, daß immer noch mangelnde Schärfe, zu geringer Zeichenkontrast, unzureichende Schriftgrößen sowie Verzerrungen die Hauptursachen für die schlechte Lesbarkeit von Texten am Monitor sind.

Im Rahmen einer weiteren Studie fand Nielsen heraus, daß selbst kurze Texte im Web meist nicht vom Anfang bis zum Ende durchgelesen werden. Der Besucher "scannt" lediglich die für ihn relevanten Webseiten, indem er nach Schlüsselwörtern sucht, die als Einstieg für eine intensivere Lektüre dienen. Daher ist es nicht empfehlenswert, ein bereits vorhandenes Printmedium eins zu eins für das WWW aufzubereiten: Nur 16% der Besucher werden die Webseite linear (d.h. Wort für Wort) lesen. Was liegt also näher, als auf diesen Umstand Rücksicht zu nehmen und die Inhalte mittels geeigneter Schriftart, Schriftgröße und Schriftfarbe aufzubereiten?

Zur Wahl der Schriftart

Im WWW findet man zwei Arten von Text: Zum einen den reinen HTML-Text, der im Zusammenspiel mit Cascading Style Sheets (CSS) kaum noch Gestaltungswünsche offen läßt und zumeist für längere Textpassagen, aber auch für die Navigation genutzt wird. Zum anderen existiert nach wie vor eine Vielzahl grafisch aufbereiteter Texte - vorwiegend bei Navigationselementen (z.B. Schaltflächen) und bei Kopfinformationen (z.B. Firmenlogos oder Schriftzüge).

Grundsätzlich stehen sowohl für Printmedien als auch für das Publizieren im WWW zwei Schrifttypen zur Verfügung - die Serifenschrift und die serifenlose Schrift:

  • Die Serifenschrift - mit Querstrichen an den Enden der Grundstriche und Verzierungen (siehe Abb. 1) - kommt vor allem bei Printmedien zum Einsatz, da die einzelnen Buchstaben durch die Serifen einfacher voneinander zu unterscheiden und infolgedessen besser lesbar sind. Zu den Serifenschriften zählen u.a. die Schriftarten Times bzw. Times New Roman und Bookman.
Abb. 1: Schrift mit Serifen (Times New Roman)
  • Im Gegensatz dazu steht die serifenlose Schrift ohne Querstriche und Verzierungen (siehe Abb. 2). Die bekanntesten Vertreter dieser Kategorie sind die Schriftarten Verdana und Tahoma, die mit Vorliebe im WWW verwendet werden, sowie Arial und Helvetica.
Abb. 2: Schrift ohne Serifen (Arial)

 

Für welchen der beiden Schrifttypen man sich entscheidet, ist nicht nur eine Frage des persönlichen Geschmacks. Wie bereits erwähnt, finden Serifenschriften vor allem im Buch- und Zeitschriftendruck Verwendung. Dort wird mit Auflösungen ab 600 dpi gearbeitet, bei denen selbst die feinsten Details exakt wiedergegeben werden. Jeder, der im Besitz eines hochwertigen - und daher sehr teuren - Monitors ist, wird auch an Serifenschriften auf Webseiten wenig auszusetzen haben. Auf durchschnittlichen Bildschirmen mit einer Auflösung von 72 dpi werden die feinen Serifenschriften jedoch meist ausgezackt und verschwommen dargestellt; deshalb ist es empfehlenswert, für Webseiten serifenlose Schriftarten zu verwenden, die auch auf dem Monitor klar und deutlich lesbar erscheinen.

Das zweite Problem, das im Zusammenhang mit der Schriftart auftreten kann, basiert auf der Tatsache, daß nicht alle Schriften auf jedem Rechner verfügbar sind. Falls Sie beispielsweise eine exotische Schriftart wählen, können Sie davon ausgehen, daß Ihre Webseite auf den meisten PCs vollkommen anders aussieht als mit Ihrem Browser, sofern nicht zufällig die gleiche oder eine ähnliche Schrift installiert ist. Dieses Problem läßt sich am einfachsten lösen, indem man sich bei der Gestaltung der Seite auf die sogenannten Standardschriftarten beschränkt, die sowohl auf Windows- wie auch auf Mac-Systemen zu finden sind. Dazu gehören z.B. die Schriftarten Arial bzw. Helvetica, Times bzw. Times New Roman und Courier bzw. Courier New.

Als Alternative dazu können Sie auch innerhalb des font-Tags bzw. mittels CSS die favorisierten Schriftarten definieren - beispielsweise font face="Verdana, Arial, Helvetica" (HTML) oder font-family {font-family: Verdana, Arial, Helvetica} (CSS). Bei dieser Vorgangsweise werden im HTML-Code bzw. im Style Sheet mehrere verwandte Schriften angeführt, um sicherzustellen, daß die Webseite auf jedem Rechner zumindest ähnlich aussieht. Findet der Browser die an erster Stelle genannte Schrift nicht, verwendet er zur Darstellung die zweite; fehlt auch diese, versucht er die dritte.

Ein weiterer Ausweg aus dem Dilemma besteht darin, im HTML-Code eine Referenz auf Schriften anzugeben, die im WWW zum Download bereitstehen. Browser, die solche Anweisungen interpretieren können, laden die gewünschten Schriften gemeinsam mit dem HTML-Dokument. Dieses Verfahren hat sich allerdings bislang nicht durchgesetzt, da kein entsprechender Standard entwickelt wurde und sich der Umgang mit dem Kopierschutz mitunter sehr mühsam gestaltet.

Abschließend sei noch angemerkt, daß gerade bei der Wahl der Schriftarten weniger oft mehr ist. Beispielsweise sollten Sie bei der Verwendung verschiedener Schriftarten sparsam vorgehen und vor allem Konsistenz zeigen, also gleichwertige Inhalte oder Strukturierungen (z.B. Überschriften) mit derselben Schriftart darstellen.

Die Schriftgröße: klein - kleiner - unleserlich

Sie können den zweiten Teil der Überschrift nur mühsam lesen (wenn überhaupt)? Der Text ist zu klein, die Schriftart zu undeutlich? Aber daran müßten Sie doch mittlerweile gewöhnt sein, falls Sie regelmäßig im Web nach Informationen suchen! - Die weitverbreitete "Zwergenschrift" ist ein typisches Beispiel dafür, daß sich die Information nur allzu oft dem Design unterordnen muß. Auf den meisten Webseiten ist ja schlicht und einfach zu wenig Platz, weil der gesamte Inhalt auf den ersten Blick erfaßbar sein soll, ohne den Rahmen des vorgegebenen Designs zu sprengen.

Dabei wäre dieses Problem einfach zu lösen, indem die BesucherInnen selbst die gewünschte Schriftgröße festlegen. Doch nur die wenigsten BenutzerInnen wissen überhaupt, daß sie beispielsweise im MS-Internet Explorer via Menü Ansicht - Schriftgröße die Darstellung von HTML-Text von sehr groß bis sehr klein frei wählen können.

Um die Schriftgröße dennoch in einem bestimmten Rahmen zu halten, kann man als GestalterIn einer Webseite sowohl absolute (numerische) Angaben als auch relative (prozentuale) Angaben verwenden. Auch relative Werte der Form small, medium oder large sind möglich; hierbei variiert die Größe der Einzelelemente in Bezug auf die ursprünglichen Größenverhältnisse. Man kann aber auch beginnen zu programmieren, um den BesucherInnen der Webseite die Wahl der Schriftgröße per Knopfdruck zu erlauben. Ein prominentes Beispiel dafür findet sich auf den Seiten der Tageszeitung Kurier, wo rechts oben unter Schriftgröße drei verschieden große Buchstaben angezeigt werden, mit deren Hilfe man die gewünschte Schriftgröße einstellen kann.

Zusammenfassend bleibt zu sagen, daß Sie aufgrund der unterschiedlichen Vorlieben und Bedürfnisse der Besucher Ihrer Webseite kaum eine Chance haben, die optimale Schriftgröße vorzugeben. Sie sollten jedoch darauf achten, die Schriftgröße nicht absolut, sondern relativ festzulegen, damit sie beispielsweise auch Sehbehinderte - sofern sie über die nötigen Kenntnisse verfügen - ihren Erfordernissen anpassen können. Wenn Sie nicht ganz sicher sind, welche Auswirkungen die Verwendung von relativen bzw. absoluten Größenangaben auf die Anpassungsmöglichkeiten durch die LeserInnen hat, können Sie mit Hilfe der Font-size Testsuite Aufschluß darüber erhalten.

Die Schriftauszeichnung: Hervorheben, aber wie?

Wie bereits erwähnt, liest ein Großteil der BesucherInnen einer Webseite die Texte nicht Wort für Wort, sondern überfliegt sie nur. Der gezielte Einsatz von Hervorhebungen ist daher äußerst empfehlenswert. Gut geeignet sind:

    • Fettdruck,
    • färbige Hervorhebungen,
    • die Kombination von fett und färbig .
    >

Weniger gut geeignet sind:

    • Kursivschrift, da die Buchstaben auf dem Monitor nur unscharf angezeigt werden können,
    • VERSALIEN (GROSSBUCHSTABEN), die wegen der einheitlichen Buchstabengröße die Lesbarkeit deutlich erschweren,
    • S p e r r d r u c k, der wegen der großen Abstände zwischen den Zeichen schwer lesbar ist.

Verpönt ist die Verwendung von

    >
    • <blink>blinkenden Elementen</blink>, da diese ständig die Aufmerksamkeit auf sich ziehen und deshalb von anderen Inhalten ablenken,
    • unterstrichenem Text, der - egal in welcher Farbe - immer einen weiterführenden Link signalisiert und den Besucher dazu verleitet, darauf zu klicken.

Schriftfarbe und Hintergrund - Kontrast oder Harmonie?

Um es gleich vorwegzunehmen: Die ideale Kombination von Schriftfarbe und Hintergrund gibt es nicht. Grundsätzlich können Sie davon ausgehen, daß Texte, die in einem starken farblichen Kontrast zum Hintergrund stehen, das Lesen erleichtern; als besonders angenehm werden jedoch gemäßigte Kontraste empfunden.

Die Kombination von weißem Hintergrund und schwarzem Text, die häufig verwendet wird, stellt die kontrastreichste Verbindung dar. Allerdings läßt ein weißer Hintergrund den Besucher schnell ermüden, da beim Lesen am Monitor der Blick direkt auf eine Lichtquelle gerichtet ist, während Papier das Licht lediglich reflektiert. Je heller der Monitor eingestellt ist, desto stärker werden die Sinneszellen auf der Netzhaut angeregt und umso schneller ermüden die Lesenden. Deshalb ist es sinnvoller, für den Hintergrund kein reines Weiß, sondern eine helle Graustufe oder dezente Pastellfarben zu verwenden. Damit werden störende Blendeffekte reduziert, was sich wiederum positiv auf das Durchhaltevermögen der Lesenden auswirkt. Kontrastarme Farbkombinationen - beispielsweise hellgraue Schrift auf mittelgrauem Hintergrund - sollten Sie nach Möglichkeit vermeiden.

Von Rot-Grün-Farbkombinationen ist dringend abzuraten: Rote Schrift auf grünem Hintergrund (und vice versa) bereitet dem Auge Schwierigkeiten bei der Wahrnehmungsschärfe. Abgesehen davon ist die sogenannte "Rot-Grün-Blindheit" die am häufigsten auftretende Farbfehlsichtigkeit.

Falls es Ihnen im Umgang mit Farben an Erfahrung mangelt, finden Sie unter http://www.colorschemer.com/online.html einen Online-Farbwähler, mit dessen Hilfe Sie rasch passable Ergebnisse erzielen können. Eine weitere empfehlenswerte Hilfe zur Farbwahl steht unter http://www.knorrpage.de/colormatch.html zur Verfügung.

Generell sollten Sie sich bei der Gestaltung von Webseiten auf vier Grundfarben beschränken - exzessive Farbexperimente verleihen Ihrer Seite einen unruhigen und verwirrenden Charakter. Ebenso wichtig ist es, bei der Verwendung der gewählten Farben konsistent zu bleiben: Gleichartigen Inhalten (z.B. weiterführenden Links, strukturierenden Überschriften oder Hinweisen) sollten Sie stets die jeweils gleiche Farbe zuweisen, damit die intuitive Zuordnung des Inhalts erleichtert wird.

800×600 oder 1024×768?

Obwohl es ohnedies unmöglich ist, alle BenutzerInnen zufriedenzustellen, gibt es kaum WebdesignerInnen, die sich mit der Frage nach der optimalen Monitorauflösung noch nie beschäftigt haben. Der Wert 800×600 - der mittlerweile als eine Art Standard gilt - hat den Vorteil, daß damit die Inhalte von Webseiten auf den meisten Bildschirmen ohne horizontale Scrollbalken angezeigt werden können. Niedrigere Auflösungen werden meist vernachlässigt. Manche Webseiten bieten die Möglichkeit, auf der Startseite die gewünschte Monitorauflösung auszuwählen; allerdings ist fraglich, ob ein solches Angebot wirklich genutzt wird oder ob nicht vielmehr der Großteil der BenutzerInnen mit dem Begriff "Monitorauflösung" und den dazugehörigen Pixel-Angaben wenig anzufangen weiß.

Eine einfache Lösung für dieses Problem stellt die Methode dar, die beispielsweise auf der Homepage der Universität Wien oder auf den Webseiten vieler Tageszeitungen angewendet wird: Diese Seiten sind so gestaltet, daß sie bei einer Auflösung von 800×600 die volle Monitorfläche beanspruchen, während bei höherer Auflösung (1024×768) die Fläche rechts frei bleibt.

Einen weiteren Lösungsansatz liefert CSS2 mit den Attributen max-width und min-width. Allerdings kann der MS-Internet Explorer diese Attribute auch in Version 6 noch nicht korrekt interpretieren, sodaß an einen Praxiseinsatz derzeit nicht zu denken ist.

Texte für das Lesen am Monitor optimieren

Die Zeilenlänge

Mittlerweile ist es kein Geheimnis mehr, daß der Länge von Textzeilen im Hinblick auf den Lesekomfort besondere Bedeutung zukommt: Sind Textzeilen zu lang, hat das Auge Mühe, den Beginn der nächsten Zeile zu finden. Sind die Textzeilen hingegen zu kurz, behindert dies ebenfalls den Lesefluß. Mit acht bis zehn Wörtern pro Zeile - dies entspricht in etwa 40 bis 60 Zeichen - haben Sie den optimalen Mittelweg gefunden.

Durch die gängige Beschränkung auf eine Monitorauflösung von 800×600 Pixel wurde dem weitverbreiteten Übel, den Text über die gesamte Bildschirmbreite laufen zu lassen, Einhalt geboten. Ein Gutteil des Browserfensters wird meist ohnehin für die Navigation genutzt, sodaß eine Fläche von etwa 400 Pixel Breite für die Plazierung von Text zur Verfügung steht. Innerhalb dieser verbleibenden 400 Pixel (die genaue Kontrolle über die Textbreite erhalten Sie beispielsweise mit Hilfe von unsichtbaren Tabellen) gilt es nun, den Text optimal aufzubereiten.

Die Absatzausrichtung

Während bei Printmedien mit Vorliebe Blocksatz verwendet wird, ist für das Lesen am Monitor der linksbündige Flattersatz am angenehmsten. Blocksatz ist aufgrund der teilweise sehr großen Wortabstände und des dadurch entstehenden "löchrigen" Satzbildes auf dem Monitor schlechter lesbar und sollte (ebenso wie die zentrierte Absatzausrichtung, die nur für kurze Überschriften akzeptabel ist) so weit wie möglich vermieden werden.

Der Zeilen- und Absatzabstand

Für die Darstellung auf dem Monitor sollte ein größerer Zeilenabstand gewählt werden als für Printmedien, damit auch beim flüchtigen Lesen eines Textes die Zeilen sauber voneinander getrennt werden können. Tendenziell ist außerdem bei der Verwendung serifenloser Schriften ein größerer Zeilenabstand einzuplanen als bei Serifenschriften. Als Richtwert empfiehlt sich ein Abstand von zumindest eineinhalb Zeilen. Während kurze Zeilen relativ eng aufeinanderfolgen dürfen, benötigen lange Zeilen einen entsprechend größeren Zeilenabstand. Ebenso sollten Sie für genügend Abstand zwischen den einzelnen Absätzen sorgen, damit diese auch optisch als Einheit wahrgenommen werden können.

Scrollen - Ja oder Nein?

Unter dem Begriff "Scrollen" versteht man das vertikale bzw. horizontale Verschieben des Fensterinhalts (bzw. eines Teilbereichs davon) mit Hilfe der Maus. Ermöglicht wird dies durch sogenannte Scrollbars, die in der Regel sowohl am rechten wie auch am unteren Fensterrand zu finden sind. Scrollen ist immer dann nötig, wenn nicht der gesamte Inhalt einer Webseite auf dem Bildschirm angezeigt werden kann. Damit stellt sich wieder die Frage, ob lange Texte am Bildschirm gelesen werden oder nicht.

Selbst Usability-Guru Jakob Nielsen ist sich bei diesem Thema nicht ganz sicher. Während er im Jahr 1996 noch die Ansicht vertrat, daß lediglich 10% der LeserInnen auch nach unten scrollen (und damit längere Webseiten schlichtweg verbannte), schwächte er bereits ein Jahr später seine Meinung ab: Mehrere aktuelle Studien hatten gezeigt, daß bei überlangen Texten meist automatisch nach unten gescrollt wird. Diesen Wandel der Verhaltensweise deutet Nielsen dahingehend, daß die LeserInnen im Laufe der Zeit in diesem Bereich an Erfahrung gewonnen haben.

Was immer man auch vom Scrollen halten mag: Überlange Texte lassen sich mitunter nicht vermeiden. In diesen Fällen empfiehlt es sich, am Beginn der Seite ein verlinktes Inhaltsverzeichnis anzubieten, damit der Leser gezielt einzelne Passagen ansteuern kann. Weiters sollten überlange Texte über eine möglichst klare und optisch auffällige Struktur verfügen. Dies erreicht man über die verschiedenen Möglichkeiten der Auszeichnung, von gezielter Farbgebung bis hin zur Hervorhebung von Schlüsselwörtern durch Fettdruck. Da der Leser die Gesamtinformation nicht auf einmal überblicken kann, geht oftmals der Zusammenhang verloren, d.h. er muß nochmals nach oben und wieder zurück scrollen, um sich wichtige Informationen in Erinnerung zu rufen - bei mangelhaft strukturierten Seiten ein Suchspiel der besonderen Art, dem man nach Möglichkeit von vornherein entgegenwirken sollte.