Textgestaltung

Auszug aus "Webdesign professionell" von Florian Dengler und Holger Volland erschienen bei Galileo Press GmbH, Bonn 2000

Typografie und Layout von Texten im Browser

UND DOCH HAT ES SINN; SICH MIT DIESEM THEMA auseinander zu setzen, denn kaum eine gestalterische Disziplin wird von vielen Webdesignern so sehr außer Acht gelassen wie die Typografie. Vor allem sollte den Screendesigner interessieren, wie sich Buchstaben, Wörter, Sätze und Absätze und Seiten zueinander verhalten müssen, um bestmögliche Erfassbarkeit des Inhaltes zu bieten. Und kaum ein anderes Medium macht es dem Auge so schwer wie der Bildschirm. Gründe genug, um ein paar Grundlagen zu erklären.

Einheitlichkeit

Beim Lesen springen unsere Augen permanent hin und her, sie überfliegen einen Satz, und wann immer unser Gehirn den Sinn eines Wortes nicht ganz erfasst hat, zwingt es die Augen, zu diesem Wort zurückzukehren und es im Zweifelsfall Buchstabe für Buchstabe noch einmal zu lesen. Da dieser Vorgang auch am Anfang einer Zeile geschehen kann, müssen die Augen schnell zum Ende der vorigen Zeile springen können.

Was bedeutet diese Art der Wahrnehmung für den Gestalter?

1. Rechtbündiger oder zentrierter Fließtext am Bildschirm ist tabu.
2. Texte über mehrere Seiten hinweg sollten grundsätzlich identisch aufgebaut sein, damit die Erfassbarkeit einzelner Elemente nicht immer wieder neu erlernt werden muss.

Satzlayout

Eine HTML-Seite wird immer von oben links nach unten rechts vom Browser eingelesen. Gibt es keine natürlichen Sperren, wie Tabellen oder Bilder, so läuft der Text in voller Breite des Browserfensters weiter. Die Lesbarkeit solcher Buchstabenwüsten ist entsprechend gering, und der Besucher wird es alsbald aufgeben, den Inhalt zu erfassen zu wollen. Wir haben es in der Hand, Seiten so zu gestalten, dass man die Inhalte gerne wahrnimmt.

Faustregeln

Es gibt einige Faustregeln für das Satzlayout von HTML-Seiten:

Elf Wörter je Zeile können vom Auge am Bildschirm noch leicht erfasst werden. Durch den Einsatz von Tabellen können Zeilen beschränkt werden. Da die meisten Nutzer an den eingestellten Standardschriften und Größen des Browsers nichts verändern und das Browserfenster meist nicht größer oder kleiner als 800 X 600 Pixel ist, gilt: Wenn auf einer Seite nur eine Tabellenspalte mit Text plaziert ist, sollte diese nie größer sein als 60% der Seitenbreite.

Bild-Text-Klammer
Oft sind Bilder aussagefähiger als Texte. Wenn jedoch beide zusammengehören, sollte dies auch optisch klar sein. Als Faustregel gilt: Text, der rechts neben einem Bild steht, wird eher im Zusammenhang mit dem Bild wahrgenommen, als wenn er links davon stünde.

Zu viele Links sind irritierend
Links zu weiterführenden Inhalten und Themen sind zwar durchaus sinnvoll, jedoch hat es keinen Sinn, diese wild im Fließtext zu verstreuen, da der Leser dadurch nur abgelenkt wird. Sinnvoller ist es, Links und Zusatzinformationen am Ende oder Rand eines Artikels zu platzieren.

Klicken statt scrollen

Die meisten Benutzer bewegen sich lieber horizontal als vertikal durch eine Website. Die höchste Aufnahmebereitschaft für Texte können Sie dann erwarten, wenn Sie diese in sinnvolle Einheiten aufteilen, die auf verschiedenen HTML-Seiten angeordnet sind. Hier gilt jedoch: Links, die vor und zurück springen, sind im Text unbedingt notwendig. Eine druckbare Version mit dem gesammelten Text auf gesonderten Seite ist äußerst empfehlenswert.

Vordefinierte HTML-Stile

Einige wenige Textauszeichnungen können von allen modernen Browsern interpretiert werden. Auch wenn damit keineswegs eine dem Printbereich ähnliche Gestaltung erzielt werden kann, sind jedoch minimale Möglichkeiten gegeben.

Textauszeichnungen

Verwendung von Schriftarten

Sowohl die beiden Browserhersteller Microsoft und Netscape als auch große Typo-Häuser lasen sich einiges einfallen, um verschiedene Schriftarten in HTML-Dokumenten möglich zu machen. Die Einbindung von Schriften ist jedoch immer noch mühsam und hat bei den wenigsten Besuchern den gewünschten Effekt.

Ursprünglich war in HTML der Einsatz verschiedener Typen nicht vorgesehen, man glaubte, verschiedene Stilformate reichen aus, um Dokumente ordentlich gegliedert darzustellen. Diese Stile (Fett, Kursiv,TeleType, Überschrift, etc.) können auch heute noch mit jedem Browser angesehen werden. Wenn der Autor eines HTML-Dokumentes keine Schriftart vorgibt, so wird die - für den jeweiligen Stil - voreingestellte des Browsers verwendet. Schön ist das nicht immer.
Theoretisch kann jede auf dem Rechner des Gestalters installierte Schriftart eingebunden werden, doch wird diese nur dann beim Besucher der Site angezeigt, wenn sie auch aktiv vom System geladen ist. Sicherer ist es also in jedem Fall, sich auf Schriftarten zu verlassen, die zusammen mit dem Betriebssystem ausgeliefert werden. Bei Windows-Nutzern sind dies hauptsächlich: Arial, Times Roman, Courier New, Symbol und Wingdings. Bei Mac-Nutzern heißen die entsprechenden Schriften: Geneva, Times, Courier, Symbol und Zapf Dingbats.

Anhand der unterschiedlichen Namen kann man sich vorstellen, welche Probleme auftreten werden, wenn ein Gestalter am Mac als Fließtextschrift die serifenlose Geneva angibt, beim Besucher am PC aber nur serifenlose Arial zur Verfügung steht. Der Text wird in der Standardschriftart des Browsers angezeigt, und das ist oft die Serifenschrift Times.
Diese Problem kann jedoch umgangen werden, indem grundsätzlich alternative Schriftarten angegeben werden.

Schriftgrößen

Schriftgrößen unter HTML können mittels zweier unterschiedlicher Systeme definiert werden. Generell liegt beiden Systemen die Annahme zu Grunde, dass jeder Browser eine Grundeinstellung der Schriftgröße hat, die als Basis für die Berechnung davon abweichender Größen dient.

Wenn mittels des ersten Systems eine Schriftgröße angegeben wird, lautet der dazugehörige Befehl

<font size="3">Beipieltext</font>

wobei size="3" der Grundeinstellung entspricht, d.h. ein Nutzer, dessen Standardschriftgröße im Browser mit 12 angegeben wurde, sieht in diesen Beispieltext in 12 Punkten.
Nach diesem System wird eine größere Schriftart erwirkt, im dem man Werte zwischen 4 und 7 angibt, also beispielsweise

<font size="6">Beipieltext</font>

was dann einer real dargestellten Größe von 15 Punkten entspricht (3 = 12 Punkte, 4 = 13 Punkte, 5 = 14 Punkte usw.). Eine kleinere Darstellung erhält man analog mit den Werten 1 und 2.

Das zweite System ist etwas logischer und auch leistungsfähiger, da alle Werte zwischen -7 und +7 angegeben werden können, wobei 0 der voreingestellten Größe im Browser entspricht:

<font size="+7">Beipieltext</font>

Allerdings können nur Größen zwischen -2 und +4 auf allen Browsern dargestellt werden, die restlichen werden oft ignoriert bzw. falsch angezeigt.

Benutzerdefinierte Einstellungen

Welches System auch immer verwendet wird, eine Sicherheit darüber, wie der gestaltete Text endgültig bei den Besuchern der Seite dargestellt wird, gibt es nicht. Schließlich kann jeder selbst in den Voreinstellungen des Browsers definieren, welche Schrift und Größe er gerne verwenden möchte.

Einsatz von Cascading Style Sheets

Mit der Einführung von CSS oder "Cascading Style Sheets" wurde seitens des World Wide Web Consortiums versucht, die Unzulänglichkeiten der Textformatierung in HTML zu umgehen. Leider sind jedoch die Browser-Rivalen Netscape und Microsoft bis heute nicht einig darüber, ob und in welcher Form CSS interpretiert werden, was dazu führt, dass auch hier das Ausprobieren die einzig möglich Form von Sicherheit ist.

CSS definieren das Erscheinungsbild von Elementen Schriftart, Farbe oder Wortabstand und sind somit bestens geeignet, um professionell mit Texten arbeiten zu können. Die CSS-Festlegungen sind vergleichbar mit Formatvorlagen in Quark oder Word. Sie befinden sich im Head-Bereich einer Seite und gelten grundsätzlich für das gesamte Dokument. Einzelnen Elemente wie Absätze oder Listen werden dann auf der Seite nur noch mit einem Style versehen, der vorher im Head festgelegt wurde. Im Quellcode sieht das dann wie folgt aus:

Es ist möglich, einen Stil auf mehrere Dokumente anzuwenden, indem das Style Sheet selbst extern als Datei gespeichert wird. So können Sie beispielsweise das Aussehen aller Headlines einer Site verändern, indem Sie einfach im externen Style Sheet ein anderes Format festlegen.

Text als Bild

So unzulänglich wie die Gestaltungsmöglichkeiten von Text sind, es spielen immer noch viele Webdesigner mit dem Gedanken, Fließtext in einem "ordentlichen" Programm zu gestalten, um ihn dann als Bild gespeichert in Web zu schicken. Wenn es nicht unbedingt erforderlich ist: Lassen Sie es besser bleiben! Diese Art der Textdarstellung kostet extreme Ladezeiten und ist nicht editierbar.

Wenn es sich gar nicht anders machen läßt, weil beispielsweise eine Hausschrift bei allen Headlines verwendet werden muß, so gibt es einige Regeln für den Einsatz von Text als Bild.

Text als Bild speichern:Tipps

Geringe Dateigröße
Reduzieren Sie die Anzahl der Farben auf das Nötigste. Der Verzicht auf geglätte Schrift (Antialiasing) reduziert die verwendet Farben auf Textfarbe und Hintergrundfarbe und spart somit Ladezeiten.
Knapp zuschneiden
Noch mehr Ladezeit können Sie sparen, wenn Sie ein Bild an den Kanten so knapp wie möglich zuschneiden.

Als GIF speichern
Auf Grund der unterschiedlichen Komprimierung ist das Format GIF besser für Linien(und damit auch Schrift) geignet als ein JPEG. Texte sollten deshalb ausnahmslos als GIF gesichert werden.

Inhalte Textgestaltung

Einheitlichkeit

Satzlayout

Vordefinierte HTML-Stile

Verwendung von Schriftarten

Schriftgrößen

Einsatz von CSS

Text als Bild