Bei der Gestaltung von Text für das Web ist vieles anders als im Printdesign. Der allerwichtigste Unterschied: Für den Druck legt der Grafiker das Erscheinungsbild bis ins Detail fest, das Erscheinungsbild einer Webseite hängt in vielen Dingen jedoch nicht vom Designer ab, sondern vom Leser. Wie eine Webseite auf dem Monitor aussieht, bestimmen Faktoren wie die für die Browseranzeige zur Verfügung stehenden Systemschriften, die Browsersoftware selbst, Monitorauflösung und Monitorgröße, die Anwendereinstellungen für die bevorzugte Grundschriftgröße sowie Komponenten wie beispielsweise die bevorzugte Fensterbreite oder das Vermögen eines Monitors, Farben korrekt anzuzeigen. Die Reduzierung auf einige wenige Systemschriften ist wohl mit das wesentlichste Merkmal bei der Gestaltung von Text für Internet-Aufritte. Der Grund: Für die Schriftanzeige relevant sind lediglich die Schriften, die auf dem Rechner des Surfers überhaupt zur Verfügung stehen. Folgerichtig sind Arial, Helvetica, Verdana, Times und Courier nach wie vor Standards.

Moderne Systemschriften warten mit mehreren Alleinstellungsmerkmalen auf, die sie für diesen Job besonders gut geeignet machen. Zum einen sind sie für die Monitoranzeige eigens optimiert. Das heißt: Anders als Print-Schriften, bei denen vor allem die stufenlose Skalierbarkeit der Outline wichtig ist (etwa für Punktgrößeneingaben in Zehntel- oder gar Hundertstel-Intervallen), müssen Systemschriften vor allem bei 10, 14 oder 18 Pixel Darstellungshöhe gut lesbar sein. Ein weiterer wichtiger Punkt ist die Zeichenausstattung. Anders als noch ihre betagten Vorläufer aus Mac-OS 9 ähneln die Dfont-Systemschriften auf aktuellen Apple-Rechnern in vielem Opentype-Schriften; Helvetica und Konsorten warten mit über 1000 Zeichen auf; Apples System-Helvetica etwa ist mit genau 2125 Glyphen ausgestattet. Der Grund: Anzeigen können sollen sie nicht nur normalen Standardtext, sondern – im Zeitalter der Globalisierung wichtig – möglichst auch Alphabete, die vom Lateinischen abweichen.

Da mit allen Alphabeten selbst der Zeichenrekordhalter unter den Mac-Sys-temschriften, die Lucida Grande, überfordert wäre, enthält das Mac-OS zusätzliche Schriften für die Anzeige nah- und fernöstlicher Alphabete. In Sachen Monitordarstellung wie auch in Sachen Zeichenausstattung mögen die Systemstandards Spezialisten auf der Höhe der Zeit sein. Was die Schriftwahl angeht, sind Webdesigner allerdings weiterhin auf einige wenige Exponate festgelegt: Arial, Helvetica, Verdana und Geneva als Sans-Serif-Schriften, Times, Times New Roman und Georgia als Serif-Schriften sowie Courier und New Courier als Monospace-Schriften. Wie die Aufführung der ähnlich klingenden Varianten schon vermuten lässt, kommt es bei der Schriftwahl nicht darauf an, ganz konkrete Font-Dateien zu bestimmen. Absicht ist vielmehr die effektive Einschränkung auf einen bestimmten Schrifttyp: Sans Serif, Serif oder Monospace.

Das Schema: Ist etwa auf einem Rechner nicht die Arial vorhanden, sondern die Helvetica, switcht die Browser-Anzeige zu der vorhandenen Schrift der angegebenen Gruppe um. Um ganz sicher zu gehen, wird bei der Bestimmung einer Webseiten-Grundschrift zusätzlich auch der Typ angegeben. Also nicht nur „Arial und Helvetica“, sondern „Arial, Helvetica und Sans Serif“.

Die Besonderheiten des Mediums Internet zeigen sich nicht nur bei der Schriftwahl, sondern auch bei den zahlreichen interaktiven Elementen, die für das World Wide Web charakteristisch sind. Bei der Gestaltung von Text bietet das Internet einerseits zahlreiche Freiheiten, andererseits auch eine Reihe von Einschränkungen. Anders als bei herkömmlichen Drucksachen etwa spielen Seitenlängen keine Rolle. Im Prinzip kann Text ewig laufen; ob dies sinnvoll ist, steht auf einem anderen Blatt. Weniger praktikabel ist beim Webdesign hingegen die herkömmliche Aufteilung in mehrere Spalten. Technisch lässt sich dies zwar bewerkstelligen. Da der Leser eventuell mehrmals herunter- und wieder heraufscrollen muss, sollte man indes überlegen, ob eine solche Aufteilung wirklich Sinn ergibt. Eine grundlegende Besonderheit ist die Hyerlink-Technik. Da im Internet nicht wie in Büchern, Broschüren oder Zeitschriften geblättert werden muss, ermöglicht das Medium eine recht freie, nicht linear aufgebaute Seitenstruktur. Vieles, was im Internet auf den ersten Blick gar nicht oder nur sehr schwer funktioniert, ist in Wirklichkeit nur anders in Angriff zu nehmen als im Print-Design.

Die Basis-Tags der Befehlssprache für den Aufbau von Internet-Dokumenten muten teilweise zwar recht rudimentär an. Ob „hinter den Kulissen“ bei der Verwendung professioneller Webdesign-Anwendungen oder bei der puritanistischen Seitenerstellweise direkt mit Code: Zur Anwendung kommen beim Formatieren stets einige grundlegende Befehle. Da HTML vor allem Strukturen definiert, wird jeder Tag einmal am Anfang und einmal am Ende zur Auszeichnung angewandt – am Ende stets mit der zusätzlichen Abschluss-Kennung „/“. Die Anweisung, eine Passage fett zu formatieren, sieht zum Beispiel so aus: <b> am Anfang und </b> schließlich am Ende der Passage. Andere Dinge scheinen in HTML nach einer eigenen Logik zu funktionieren. Eine Besonderheit sind zum Beispiel relative Festlegungen. Ein Beispiel dafür sind Überschriftgrößen; variiert werden können hier Schriftgrößen von <h1> für die Hauptüberschrift (= sehr groß) bis hin zu der Zwischenüberschrift-geeigneten Auszeichnung <h6> (= vergleichsweise dezent). Für andere Formatierungsauszeichnungen gibt es konkurrierende Befehle. Beispiel: <b> und </b> sowie <strong> und </strong> für das Fetten von Textpassagen. Der Unterschied: <strong> ist zwar flexibler, weil es den beim Anwender eingestellten nächst fetteren Schriftgrad aktiviert. Nachteil allerdings ist, dass nicht alle Browser diesen Befehlstyp unterstützen. Trotzdem hat HTML für alle wichtigen Formatierungsaufgaben entsprechende Tags in petto.

Eine weitere leidige Unabwägbarkeit beim Webdesign ist die Umsetzung diverser Sonderzeichen, Anführungszeichen und Umlaute. Hinweise für die Kodierung finden sich ebenfalls im Kasten „HTML-Formatierungsbefehle“. Leider hängt auch hier vieles vom Browser des Lesers sowie den dort getroffenen Einstellungen für die Textanzeige ab. Dass der offene Befehlsstandard HTML in den Anfangszeiten des Internet entwickelt wurde, um Seiten auf eine möglichst einfache Weise darstellbar zu machen, merkt man bis heute, auch wenn er zwischenzeitlich um viele Zusätze und Zusatzsprachen erweitert ist.

Effektivste Lösung, die Defizite von HTML beim Finetuning von Text zu kompensieren, sind Style Sheets (offizielle Bezeichnung: Cascading Style Sheets oder abgekürzt CSS). Bei Style Sheets handelt es sich um eine Zusatzsprache, die die Möglichkeit bietet, HTML-Tags durch zusätzliche Spezifizierungen für die Textformatierung zu erweitern. In vielem ähneln sie den früher im Fotosatz gebräuchlichen Typogrammen oder aktuellen Formatdefinitionen in Word, Indesign oder Xpress. Im Gebrauch bieten sie gegenüber HTML einen entscheidenden Vorteil: Einsetzen lassen sie sich sowohl punktuell als auch als zentrale Vorgabe – entweder für die jeweilige Seite am Anfang des Dokuments oder auch als ausgelagerte Datei. Grundsätzlich bieten ausgelagerte Style Sheets den Vorteil, Formatierungsattribute für den Text zentral festzulegen.

Ein weiterer Vorteil: Verglichen mit dem oft umständlich einzugebenden HTML-Code, lassen sich über Style Sheets auch versierte Typo-Festlegungen einigermaßen steuern – so zum Beispiel der Zeilenabstand oder Abstände zwischen den Zeichen. Auch beim Zeilenabstand empfehlen sich übrigens relative Angaben, beispielsweise durch die Definition „line-heigt:2em“. Line-height ist hier das Style-Sheet-Tag für „Zeilenabstand“, „em“ die Kennzeichnung für eine relative Zugabe, gemessen in Pixel. Festlegbar ist auch die Ausrichtung des Textes – sowohl als HTML-Quellcode als auch in Style Sheets. Anders als bei Print, wo Blocksatz dominiert, eignet sich auf Webseiten eher die Festlegung linksbündig. Da Browser Wörter gewöhnlich nicht trennen, reißen auseinandergetriebene Wörter unter Umständen riesige Löcher in Texte – vor allem bei schmalen Spaltenbreiten.

Auf welche textgestalterischen Do‘s & Dont‘s ist zu achten? Die Regeln für eine lesefreundliche, übersichtliche Strukturierung von Webtext ähneln denen im Print-Bereich. Hinzu kommen einige mediumtypische Besonderheiten. Gliedern lassen sie sich in die Bereiche korrekte Zeichenanwendung, eine klar nachvollziehbare Textstruktur und schließlich die Gewährleistung übersichtlicher und ästhetisch ansprechender Seitenstrukturen.

Korrekte Zeichenanwendung Hierzu gehört alles, was mit der Aufbereitung von Text an sich zu tun hat: die Verwendung typografisch korrekter Anführungszeichen, das Untergliedern von Zahlenangaben (etwa bei Telefonnummern, Bankleitzahlen und Ähnlichem), die Anwendung von Gedankenstrichen anstatt Divis-Zeichen sowie – bei Webseiten sehr wichtig – eine sichere Kodierung von Umlauten (siehe auch „HTML-Formatierungsbefehle“). Das Trimmen von Webtext auf Lesbarkeit erfordert zugegebenermaßen besondere Sorgfalt. Die entsprechenden Kodierungen in HTML sind umständlich, unintuitiv und – verglichen mit der Arbeitsweise in professionellen Satzprogrammen – zeitaufwendig. Mit einfachen Suchen/Ersetzen-Funktionen lässt sich die leidige Arbeitsroutine immerhin erleichtern. Auf jeden Fall sollte man den Webseitentext final noch einmal in Augenschein nehmen – und zwar nicht in einem Browser, sondern in verschiedenen.

Klare Textstruktur Zuallererst fallen in diese Rubrik natürlich die essentiellen Formatierungsanweisungen für Absätze und einzelne Textpassagen, also <h1> bis <h6> (oder entsprechende Style Sheets) für Überschriften und Zwischenüberschriften sowie Formatierungsanweisungen für fette oder kursive Passagen. Darüber hinaus gilt es auch, auf eine lesbare Textstruktur zu achten. Grundsätzlich generiert der HTML-Befehl für Absätze eine zusätzliche Leerzeile – eine optisch recht ansprechende Lösung. Vermeiden sollte man das Zusammenstückeln von Listen und Aufzählungen mit improvisierten Behelfsformatierungen; HTML hat sowohl für nummerierte Listen als auch für unstrukturierte (sie werden mit entsprechenden Bullets abgehoben) entsprechende Tags in petto. Inhaltlich obliegt das Erzeugen einer nachvollziehbaren Textstruktur dem Autor oder der Autorin. Dies bedeutet, neben Zwischenüberschriften auch genug Absätze zu setzen. Die HTML-Befehle dazu sind die Tags <p> und </p>. Zur Struktur gehört auch noch die Möglichkeit, via Hyperlink auf andere Seiten zu verweisen.

Seitenstruktur Möglichkeiten, eine eigene Dynamik und Struktur zu erzeugen, bietet eine ganz spezielle Variante von Hyperlinks: Verweise auf den Rest des Textes. Textanfänge, an deren Ende ein Link mit dem Namen „mehr“ oder „weiterlesen“ dazu animiert, den kompletten Beitrag zu lesen, haben sich nicht nur in der „Blogoshäre“ durchgesetzt. Auch bei professionellen Online-Redaktionsinhalten ist dieses Stilmittel äußerst beliebt. Also nutzen Sie es! Sie entschlacken Seiten von Ballast, und wer will, wird weiterlesen.

Nach recht herkömmlichen Gestaltungsgrundsätzen funktioniert hingegen die Aufteilung der Seitenfläche. Grundsätzlich ist diese abhängig von Variablen, die der Designer nicht kennt – der Monitorbreite sowie der eingestellten Auflösung des Lesers. Daher beschränkt man sich im professionellen Webdesign zunehmend auf schmalere Darbietungsformate, obwohl sich die Fenster von Browsern wie Safari auf die gesamte Monitorbreite ausziehen lassen.

Gegen allzu breite Spalten spricht zudem auch die Gesetzmäßigkeit der guten Lesbarkeit. Die besagt, dass 60 Zeichen pro Zeile das Optimum sind. Ein bisschen Abweichung ist in Ordnung; deutlich darüber und deutlich darunter hingegen wird es problematisch. Auch in Sachen Schriftfarbe, Background et cetera legen die Typo-Regeln eher Understatement nahe als den tiefen Griff in die Effekt-kiste. Zugegeben: Bildhafte Layouts à la David Carson sind in manchen Situationen zwar ganz reizvoll. Geht es allerdings darum, größere Texte am Stück zu erfassen, eignet sich traditionelle, zurückhaltende Typografie einfach besser. Wie bereits oben angeführt: Im Internet wirkt linksbündiger Flattersatz als Ausrichtungsmethode am vorteilhaftesten.

Manche traditionelle Regel muss man beim Webdesign lediglich modifizieren. Grundsätzlich gilt darum: In Sachen lesbar gestalteter Texte sind sich die beiden großen Medien Print und Internet gar nicht so unähnlich. Letztlich.

1. Schriftwahl Immer Standards verwenden! Am besten funktionieren Font-Gruppen, bei denen man dem Browser unterschiedliche Alternativen vorgibt. Beispiel: Times New Roman, Times, Serif.

2. Style Sheets Für das Finetuning der Typo-Attribute eignen sich Style Sheets am besten. Zum einen lassen sie sich auslagern und so zentralisieren. Zum zweiten ermöglichen sie detaillierte Festlegungen für Attribute wie Zeilenabstand oder Ausrichtung.

3. Umlautskodierung Umlaute wie „ä“, „ö“ oder auch das scharfe Ess-Zett („ß“) müssen gegebenenfalls durch entsprechende HTML-Kodierungen erzwungen werden (siehe Kasten Seite 75).

4. Links Unterstreichung ist nicht schön; es gibt andere Möglichkeiten wie eine alternative Farbe.

5. Unterstreichungen Als Stilmittel nicht nur generell hässlich, sondern im Kontext einer Webseite auch verwirrend, da meist für Links verwendet.

6. Flattersatz Da Browser meist nicht automatisch trennen, verursacht Blocksatz oft wenig schöne Löcher im Text. Aus diesem Grund ist linksbündiger Flattersatz in aller Regel vorzuziehen.

7. Absätze Von der Befehlsumgebung sind sie oft zwar umständlich umzusetzen. Für eine übersichtliche Textstruktur sind sie jedoch generell wichtig.

8. Farbgebung Zu viele Farben verwirren. Eine übersichtliche, lesefreundliche Farbgestaltung ist für die Erfassung von Texten immens wichtig. Schwarz als Grundschriftfarbe ist auch beim Webdesign eine sichere Lösung.

9. Grafisch aufbereitete Schriftelemente sowie Logos Aufgrund der unter Punkt eins aufgeführten Schriftbeschränkung sollten sie immer als Bild – sprich als GIF- oder JPEG-Datei – eingebunden werden.

10. Unterschneidungen und Sperrungen Da Kontrolle letztlich nicht möglich ist, erfordert ihre Anwendung besondere Sorgfalt. Möglichkeit: Einbindung entsprechender Anweisungen in Style Sheets.

11. Hoch- und tiefgestellte Zeichen, Fußnoten Für die Umsetzung stehen zwar entsprechende HTML-Befehle zur Verfügung. Da die Schriftgrößendarstellung dabei unverändert bleibt, sehen die Ergebnisse entsprechend schlecht aus. Ein effektives Mittel für die Erzeugung lesefreundlicher Zeichen existiert bislang leider nicht. Vorgehensweise: Entweder sparsam anwenden oder zurechtpfriemeln, indem man versucht, über die zur Verfügung stehenden Tags die Größe mit zu beeinflussen.

12. Zahlenangaben Telefonnummern, Postleitzahlen, Kontonummern und Ähnliches sollten nach Möglichkeit korrekt untergliedert werden. Um zu verhindern, dass gegliederte Zahlenangaben durch Zeilensprünge getrennt werden, sollte man für die Abstände lediglich geschützte Leerzeichen (Kodierung: &nbsp;) verwenden.

Im Bild finden Sie die wichtigsten HTM-Basis-Tags für die Formatierung von Zeichen sowie die korrekte Kodierung von Sonderzeichen. Wichtig: Die Befehle für Zeichen- und Absatzformate müssen stets einleitend und zum Abschluss der entsprechenden Textpassage erfolgen.