Usability-Tipps - Kapitel "Inhaltspräsentation"

Was bei Typografie im Web beachtet werden sollte

Design und Layout des generellen Aufbaus liefern die Rahmenbedingungen für die eigentliche Präsentation der Inhalte einer Seite. Im „Contentbereich“, der zumeist an einer fest wieder erkennbaren Stelle auf jeder Seite zu finden ist und der den Hauptinhalt einer Webseite beherbergt, gelten zunächst einmal die gleichen Regeln wie für die übergeordnete Ebene des Aufbaus „drumherum“. Er soll überschaubar, vertrauenerweckend, einfach zu konsumieren und informativ sein.

Damit dies gelingt, sind einige Regeln zu beachten, die – wie z. B. die Schriftart – auch die Gestaltung der Inhalte in anderen Bereichen wie der Navigation, dem Kopf etc. berühren. Über die Wahl der „richtigen“ Schriftart und deren Einsatz in Form unterschiedlicher Schriftschnitte oder -größen existieren bereits zahlreiche Abhandlungen in Büchern über Webdesign oder auf dieses Thema fokussierte Webseiten. Daher soll an dieser Stelle nur ein kurzer Überblick über die Faktoren gegeben werden, die das Gesamtbild einer „textlastigen“ Webseite bestimmen.

Die Auswahl der Schriftart und Schriftgestaltung ist nicht nur wichtig für das „Corporate Design“ Ihrer Website, sondern beeinflusst wie kaum ein zweites Element die Nutzbarkeit Ihrer Seite. Zu kleine Schriftarten sind – besonders in Zeiten stetig größer werdender Monitore – extrem kontraproduktiv.

Da nicht alle Fonts, die auf dem Papier prima aussehen, auch im Web funktionieren, sollten Sie im Zweifelsfall auch von Ihrem Firmendesign abweichen und für das Web eine andere Schriftart wählen, die gut auf einem Bildschirm lesbar ist. Schriftarten wie z. B. Verdana sind eigens dazu angefertigt worden; andere Fonts wie Tahoma oder Arial werden ebenso gern genommen, wenn eine serifenlose Schrift gefordert ist. Es gibt aber auch zahlreiche Serifenschriften, die im Web gut aussehen und gut lesbar sind; darunter viele Fonts, die Ihrer Site auf einfache Weise einen Hauch von „Web 2.0“ geben können, da sie auf modernen Seiten und textlastigen Blogs etc. oft zum Einsatz kommen.

Vergessen Sie bei der Angabe von Schriftarten auf keinen Fall, (am Ende der Liste der möglichen Schriftarten) auch eine generische Schriftfamilie anzugeben. Hinweise hierzu finden Sie unter http://www.w3.org/TR/REC-CSS2/fonts.html#generic-font-families

Auch anders als im Printbereich sollten Sie im Web eine größere Zeilenhöhe wählen. Per CSS kann dazu die Eigenschaft „line-height“ für Textabsätze oder spezielle Klassen zur Textausgabe definiert werden; vorzugsweise in Relation zur Schriftgröße. Die Anweisung line-height: 1.3em formatiert z. B. alle Zeilen auf das 1.3-fache der aktuellen Zeichenhöhe.

Gut lesbar sollte der Text ebenso bei Standardeinstellung der Schriftgröße sein. 14 Pixel darf ein Zeichen da schon für Standard-Fließtext haben, je nach Font und Layout ggf. auch mehr. Und da eine Zeile auch nur dann gut zu lesen ist, wenn sie nicht zu viele Zeichen enthält, ist auch oft eine Beschränkung der Zeilenlänge durch ein festes Layout der Seite oder Verwendung von Textcontainern erforderlich, die die Textgröße passend zur Breite des Browsers skalieren. Das Optimum ist schlecht zu nennen, ohne die konkrete Seite dabei in der Gesamtheit zu beurteilen, aber etwa 60 bis maximal 90 Zeichen pro Zeile sind ein guter Richtwert.

Als Textausrichtung sollten Sie bis auf wenige Ausnahmen ausschließlich den „Flattersatz“ verwenden und optische Trenner lieber durch umschließende Kästen oder Trennlinien organisieren. Denn damit die „saubere“ Ausgabe im Blocksatz funktioniert, sind viel zu viele Voraussetzungen zu erfüllen. So fällt der verfügbare Platz für einen Absatz je nach Browser und Layout einer Seite z. B. unterschiedlich aus; Schriften sind auf unterschiedlichen Systemen nicht alle gleich in der Darstellung und wenn wirklich mal eine der Ersatzschriftarten zum Einsatz kommt, sieht nichts mehr so aus, wie gewünscht.

Dadurch, dass Sie in der Regel auch noch manuelle Trennung einzelner Begriffe vornehmen, sieht ein im Blocksatz gestalteter Textabschnitt so sehr schnell unleserlich aus.