- Typografie für den Webtext
-
Typografie für den Webtext beschreibt die praktische Umsetzung der Webtypografie auf konkrete Gestaltungselemente.
Die Webtypografie ist nicht zwingend an die Informationsübertragung über das Internet gebunden; dies ist nur der häufigste Fall. Die identische Situation tritt auf, wenn beispielsweise HTML-Dateien auf einer CD gespeichert sind und unter dem Autor unbekannten technischen Bedingungen dargestellt werden. Insofern kann dieser Artikel auch allgemein als Typografie für Texte auf dem Bildschirm gesehen werden.
Inhaltsverzeichnis
Anforderungen an Texte für den Bildschirm
Layout
Seitenorientierung
Papier (und auch PDF-Dokumente, ferner Präsentationen wie Microsoft Powerpoint) gehört in die Kategorie des paged media, des seitenorientierten Mediums. Hier werden bei der Gestaltung die Grenzen einer einzelnen Seite festgelegt, nachfolgender Text wird auf einer Folgeseite fortgesetzt.
Im Unterschied dazu zielt Webtypografie auf continuous media ab, also auf eine unendlich lange (und beliebig breite) Seite.
Technisch gut aufbereitete Textquellen können aus derselben Datei beide Medientypen speisen. Die Grundlagen dazu wurden bereits 1986 mit SGML spezifiziert, auf der auch HTML aufbaut. Es lag jedoch nicht im Interesse der kommerziellen Anbieter, ein derartiges freies, interoperables Format zuzulassen; vielmehr bekam z. B. ein proprietäres, lizenziertes Format wie Microsoft Word einen hohen Marktanteil.
Ein Sonderfall tritt ein, wenn eine auf dem Bildschirm angezeigte Internet-Ressource ausgedruckt werden soll (Druckversion). In diesem Fall ist der für den Bildschirm optimierte Text für die beim Empfänger vorhandene Papiergröße umzuformatieren, zum Zeilenumbruch treten auch Regeln für den Seitenumbruch sowie ggf. Kopf- oder Fußzeilen hinzu.
Zeilenlänge
Bei der Webtypografie kann die momentane Breite des Fensters und damit die Zeilenlänge vom Benutzer spontan und individuell eingestellt werden, indem − genügend Platz vorausgesetzt – das Bildschirmfenster breiter gezogen oder auch verkleinert wird. Damit haben die Betrachter auch die Möglichkeit, nach ihren individuellen Lesegewohnheiten einzustellen, wie viele Buchstaben (eigentlich: Wörter) in einer Textzeile stehen sollen. Webdesigner legen daher oft die maximale Breite des darzustellenden Inhalts fest.
Allerdings wird die Mindestbreite des Textrahmens auch von dem breitesten Element bestimmt. Ist in der Textspalte beispielsweise ein großes Bild vorhanden, dann haben üblicherweise auch alle Zeilen des Fließtextes diese Breite – und nicht weniger. Unter anderem deshalb sollen Bilder, umfangreiche Tabellen oder längere fest vorformatierte Textabschnitte auf gesonderte Seiten ausgelagert werden, wie auch in der Wikipedia mit den Thumbnail-Vorschaubildern üblich.
Zeilenumbruch
Ältere Browser trennen Zeilen nur an Leerzeichen (genauer: Leerraum). Diese Beschränkung ist aber nicht notwendig und diente lediglich der Vereinfachung und Beschleunigung des Darstellungsprozesses auf den damals viel weniger leistungsfähigen Rechnern. Heute können moderne Browser sowohl eine automatische Worttrennung am Zeilenende vorzunehmen wie auch an geeigneten („normalen“) Bindestrichen den automatischen Zeilenumbruch ausführen.
Worttrennung am Zeilenende
Wegen begrenzter Rechenleistung und Mangel an vielsprachigen Wörterbüchern und Grammatikregeln verzichtete man in den ersten Jahren der Browser-Entwicklung auf eine automatische Worttrennung am Zeilenende. Mit vielfach höherer Rechenleistung gehen seit etwa 2005 die ersten Browser auch dazu über, automatisch und dynamisch Worttrennungen am Zeilenende vorzunehmen.
Voraussetzung seitens der Web-Autoren ist es, für das ganze Dokument wie auch für ggf. abweichende Textpassagen die verwendete Sprache eindeutig festzulegen, damit Trennregeln und Wörterbücher auf Benutzerseite richtig angewendet werden können.
Weiterhin müssen vor allem zusammengesetzte Wörter im Deutschen, spezielle Fachausdrücke oder eigene Wortschöpfungen des Autors, die nicht in Wörterbüchern erwartet werden können und bei denen automatische Trennregeln fehlerhafte Ergebnisse liefern können, künftig mit Trennmarkierungen geschrieben werden. Das erforderliche Zeichen (Nr.173, HTML ­) war zwar schon vor HTML und Internet im ANSI-Zeichensatz vorhanden, wurde aber ein Jahrzehnt lang fälschlich meistens genau wie ein normaler Bindestrich von den Browsern dargestellt, obwohl er außerhalb einer Worttrennungs-Situation unsichtbar und ohne Auswirkung hätte bleiben müssen. Auch viele Schriftarten bilden an dieser Stelle eine Kopie des Bindestrichs ab – obwohl es ein „Nicht-Zeichen“ der Breite „Null“ sein müsste.
Erst mit Verfügbarkeit der automatischen Worttrennung am Zeilenende ist für deutschen Fließtext die Verwendung von Blocksatz ohne Einschränkungen möglich.
Als möglichen Grund für die langsame Entwicklung der automatischen Silbentrennung kann aufgeführt werden, dass sämtliche Entwickler in einer amerikanischen Sprachumgebung leben bzw. lebten – englische Wörter sind meist kürzer als z. B. zusammengesetzte deutsche Wörter, so dass auch kein so großes Erfordernis bestand.
Absatz
Absätze werden in der Regel voneinander durch einen größeren Zeilenabstand getrennt („Durchschuss“ nach Art einer Leerzeile, ggf. auch mit halber Zeilenhöhe). Einzug ist möglich, aber nicht üblich – allenfalls für besondere literarische oder künstlerische Texte einzusetzen.
Seitenränder
Seitenränder sind in der Webtypografie möglich und werden aus Gründen des Designs mehr oder minder eingesetzt (Whitespace). Gemeint ist hier der Satzspiegel, also Seitenränder des gesamten Textes oder langer Teilbereiche, nicht aber:
- Optische Gliederung durch Einrücken (unterschiedlichen linken Rand)
- Hervorhebung einer Passage (beispielsweise eines längeren Zitats) durch verbreiterte Randzonen.
Maßangaben
Im Gegensatz zum Papier, bei dem die Absolutgrößen (beispielsweise A4) bekannt sind und daher absolute Angaben (Pixel, Punkt oder Zentimeter) angegeben werden muss, sollte die Schrift sowie Textaufteilung der Bildschirmdarstellung immer relativ zu einer Grundschrift bzw. zur Breite des Bildschirmfensters definiert sein. Damit ist die dynamische Anpassung an die Gegebenheiten beim Betrachter möglich, bei mangelnder Lesbarkeit lässt sich der gesamte Text und das Gestaltungsraster problemlos vergrößern.
Verwenden Autoren einen eher grob auflösenden Bildschirm oder werden feste Formatierungsvorgaben für einen solchen Bildschirm gemacht, dann sehen Leser mit hochauflösender Anzeige eine winzige, kaum zu entziffernde Schrift – im umgekehrten Fall bekommen Leser mit einem grob gerasterten Bildschirm nur wenige Riesenbuchstaben angezeigt. Gute Browser bieten zwar die Möglichkeit, in solchen Fällen manuell die Darstellung zu verändern – dieser zusätzliche Aufwand sollte Betrachtern aber nicht zugemutet werden. Relative Angaben (zur Grundschrift) beziehen sich dagegen auf die Standardeinstellungen des Browsers und damit auf die individuellen Sehgewohnheiten des Betrachters. Für den Haupttext empfiehlt sich eine Schriftgröße von "100%".
Schrift
Auszeichnung und Farben
Allgemein sollte zur Schriftauszeichnung keine Unterstreichung gewählt werden, da Leser an dieser Stelle einen Hyperlink erwarten würden. Auch ist das Sperren des Textes nicht üblich, jedoch technisch möglich. Versalien (Großbuchstaben) und Kapitälchen sind auf literarische und künstlerisch besonders gestaltete Texte zu beschränken.
Für die Schriftfarbe und die farbige Unterlegung sind monochrome Bildschirme und die Druckausgabe zu bedenken. Die Farbkombination aus der Schrift und des Hintergrund sollte einen angemessenen Kontrast besitzen.
Hyperlinks
Hyperlinks benötigen ein klares und deutliches Konzept für die Hervorhebung. Traditionell werden diese unterstrichen oder besitzen ein eigenes Farbschema. Links, die dem Leser unmittelbar aufgezeigt werden sollen, können auch als Schaltfläche formatiert werden (sogenannte Call-to-action-Buttons)
Andere Markierungen (beispielsweise farbige Zeichen, farbige Unterlegung; anderer Schriftstil, andere Schrift; oder ein vorangestellter →Pfeil) sind in einem größeren, geschlossenen Zusammenhang durchaus möglich, wenn sie konsistent und einheitlich verwendet werden. Problematisch ist hierbei, dass Leser aus anderen Zusammenhängen auf Webseiten gelangen können und bei einer allzu ungewöhnlichen und wenig hervorhebenden Gestaltung die Links nicht mehr als solche erkennen können. Ärgerlich sind verspielte Seiten, die erst beim „Rollover“ mit dem Mauszeiger erkennen lassen, an welchen Stellen sich Hyperlinks verbergen.
Bereits vom Leser besuchte Links sollten im Regelfall als solche markiert werden. Links können unterschiedlich dargestellt werden, je nachdem ob sie beispielsweise
-
- innerhalb derselben Textseite
- innerhalb derselben Domäne auf einen anderen Text
- nach außerhalb in das www
- verweisen.
Zeichenvorrat und Schriftarten
Web-Autoren können nicht voraussetzen, dass alle Leser die Schriftarten zur Verfügung haben, die sie selbst in ihrer Entwicklungsumgebung installiert haben.
Um bei möglichst vielen Lesern eine bestmögliche Darstellung zu erreichen, empfiehlt sich die Beschränkung auf wenige und weit verbreitete Schriftarten, wenn nicht besondere ästhetische Gründe eine Ausnahme erfordern. Cascading Stylesheets (kurz: CSS) bieten dabei die Möglichkeit, eine Kaskade von Schriften für bestimmte Textpassagen vorzusehen:
-
p { font-family: "AvantGarde Bk BT", "Verdana", "Tahoma", "Helvetica", "Arial", sans-serif; }
Das bedeutet: Versuche, einen Absatz in der Schriftart „AvantGarde“ darzustellen; wenn nicht vorhanden, probiere Verdana, Tahoma, Helvetica, Arial in dieser Reihenfolge; wenn alles misslingt, stelle den Absatz in der standardmäßigen serifenlosen Schrift dieses Browsers dar.
Mit CSS 3 wird Webdesigern die Möglichkeit gegeben, fremde Schriftarten einzubinden, in dem diese vor der ersten Anzeige beim Client im Hintergrund heruntergeladen werden. Alle modernen Browser interpretieren diesen Befehl, häufig erwarten Browser jedoch unterschiedliche Dateiformate. Hierbei sind auch die Schriftartlizenzen zu beachten, die teilweise eine Benutzung für das Internet nicht erlauben.
Genauso kann nicht vorausgesetzt werden, dass spezielle Zeichensätze mit besonderen grafischen Symbolen (Pfeile, UI-Elemente) als Schriftzeichen beim Leser vorhanden sind; hier kann mit entsprechenden Grafiken gearbeitet werden. Gleiches gilt für den Formelsatz.
Quelltext und Standardkonformität
Webbrowser sind eher tolerant in Bezug auf HTML-Syntax-Fehler: Die Programme stellen fehlerhaft validierte Dokumente meist lesbar dar. Einige Autoren, aber vor allem die „Generatoren“ (also jene Programme, mit denen jeder Laie einfache Internet-Seiten erzeugen kann) hier nachlässig. Andere Webbrowser interpretieren den regelwidrigen Text abweichend, der Benutzer erhält unter Umständen eine unlesbare Seite.
Das World Wide Web Consortium (W3C) empfiehlt deshalb eine standardisierte (X)HTML Variante zu verwenden und den eigenen Text vor der Veröffentlichung zu validieren (Syntaxprüfung). Ein geeignetes Programm ist beispielsweise HTML Tidy oder der Validator des W3C. Dadurch wird auch die Langlebigkeit wertvoller Texte in zukünftigen IT-Systemen gefördert.
Siehe auch
Technische Details
- HTML und HTML 5
- SELFHTML und dortige Weblinks
- Typografie für HTML
- Cascading Style Sheets
Weblinks
- Zehn häufige Fehler im Webdesign (englisch)
Wikimedia Foundation.
