Typografie für den Webtext

aus Wikipedia, der freien Enzyklopädie

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 1 Layout 1.1 Keine Seitenorientierung 1.2 Frames 1.3 Zeilenlänge 1.4 Zeilenumbruch 1.5 Silbentrennung 1.6 Absatz 1.7 Seitenränder 1.8 Maßangaben 2 Schrift 2.1 Auszeichnung und Farben 2.2 Hyperlink 2.3 Zeichenvorrat und Schriftarten 3 Quelltext und Standardkonformität 4 Sonstiges 5 Siehe auch 5.1 Technische Details 6 Weblinks

[Bearbeiten] Layout

[Bearbeiten] Keine 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 ein für alle Mal festgelegt, der weitere Text 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 MS Word einen hohen Marktanteil. Dies beeinflusst die Arbeit mit digitalen Texten bis heute.

Ein Sonderfall tritt ein, wenn eine auf dem Bildschirm angezeigte Internet-Ressource ausgedruckt werden soll (Druckversion). Dann ist ggf. die Textquelle für die beim Empfänger vorhandene Papiergröße umzuformatieren, und zum Zeilenumbruch treten auch Regeln für den Seitenumbruch sowie ggf. Kopf- oder Fußzeilen.

[Bearbeiten] Frames

Eine mehrspaltige Gestaltung mit Hilfe von Frames kann hilfreich sein. Wo den Benutzern die erforderliche Fenstergröße zur Verfügung steht, wäre die Aufteilung in mehrere Blöcke (beispielsweise auch zur Navigation und zur Orientierung) sinnvoll.

Haben Benutzer diese Möglichkeit nicht oder wünschen sie dies momentan nicht, können Frames mehr stören als helfen.

Bei „echten“ Frames sind die Teilbereiche fest mit dem Bildschirmfenster verbunden und in jedem Frame kann der Inhalt unabhängig gescrollt werden. Oft wird statt dessen ein Gestaltungsraster aus einer verborgenen Tabelle verwendet, und in einzelnen Spalten werden beispielsweise Navigationshilfen angeordnet. Ist der Haupttext allerdings recht lang, wird die Definition solcher Tabellenspalten problematisch, weil beispielsweise ein kleinerer Navigationsbereich bald beendet ist und der Rest dieser Navigationsspalte dann nutzlos Platz im Bildschirmfenster verschenkt und die verfügbare Zeilenbreite unnötig eingeschränkt ist.

[Bearbeiten] 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.

Allerdings wird die Mindestbreite des Textrahmens auch von dem breitesten Element bestimmt. Ist in der Textspalte ein großes Bild oder eine vielspaltige Tabelle 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. Sie sollten in gesonderten Bildschirmfenstern angezeigt werden.

[Bearbeiten] Zeilenumbruch

In den ersten fünfzehn Jahren der Browser war es üblich gewesen, Zeilen nur an Leerzeichen (genauer: Leerraum) zu trennen. 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 ist es kein Problem mehr, bei der Darstellung auf Benutzerseite sowohl Silbentrennung vorzunehmen wie auch an geeigneten („normalen“) Bindestrichen den automatischen Zeilenumbruch auszuführen, also unter Beachtung von „geschützten Bindestrichen“.

[Bearbeiten] Silbentrennung

Wegen begrenzter Rechenleistung und Mangel an vielsprachigen Wörterbüchern und Grammatikregeln verzichtete man in den ersten fünfzehn Jahren der Browser-Entwicklung auf Silbentrennung. Hinzu kam, dass sämtliche Entwickler in einer amerikanischen Sprachumgebung lebten – englische Wörter sind jedoch meist kürzer als z. B. zusammengesetzte deutsche Wörter, so dass auch kein so großes Erfordernis bestand.

Mit vielfach höherer Rechenleistung gehen seit etwa 2005 die ersten Browser auch dazu über, automatisch und dynamisch Silbentrennung vorzunehmen.

Voraussetzung von Seiten der Web-Autoren ist es, für das ganze Dokument wie auch für ggf. abweichende Textpassagen die Sprache eindeutig festzulegen, damit Trennregeln und Wörterbücher auf Benutzerseite richtig angewendet werden können. (Nebenbei ist das auch für die automatische Rechtschreibprüfung auf Autorenseite sinnvoll.)

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. Dies war aber bislang kontraproduktiv: 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 Silbentrennungs-Situation hätte unsichtbar und ohne Auswirkung bleiben müssen. Dieses Problem liegt auch weniger bei den Browsern als bei den Schriftarten, die an dieser Stelle eine Kopie des Bindestrichs abbilden – obwohl es ein „Nicht-Zeichen“ der Breite „Null“ sein müsste. Künftige Browser werden also das Zeichen 173 aus der Ausgabe herausfiltern müssen.

Erst mit Verfügbarkeit der automatischen Silbentrennung ist für deutschen Fließtext die Verwendung von Blocksatz ohne Einschränkungen möglich.

[Bearbeiten] 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.

[Bearbeiten] Seitenränder

Bei längerem Fließtext sind breite Ränder wenig erwünscht, da die knappe Fläche des Bildschirmfensters nicht ausgenutzt wird und häufigeres „Umblättern“ erforderlich ist sowie die Übersichtlichkeit des sichtbaren Textausschnittes eingeschränkt wird.

Breitere Ränder sind einsetzbar bei Texten aus kurzen Einzelzeilen (Gedicht, Liedtext, Drama usw.), bei denen ohnehin das anzunehmende Bildschirmfenster breiter als die Zeile lang ist.

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.

[Bearbeiten] Maßangaben

Schrift sowie Textaufteilung der Bildschirmdarstellung sollte grundsätzlich nie über absolute Angaben (Pixel, Punkt, Zentimeter) definiert werden, sondern immer relativ (Prozent, Buchstabenhöhen und -breiten, „smaller/larger“) zu einer Grundschrift bzw. zur Breite des Bildschirmfensters. Damit ist die dynamische Anpassung an die Gegebenheiten beim Betrachter möglich, und bei mangelnder Lesbarkeit lässt sich der gesamte Text und das Gestaltungsraster problemlos vergrößern.

Hintergrund ist: 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%" – oder schlicht keine Angabe.

Bei pixelweise vorliegenden Grafiken (Bitmaps) kann als Skalierung für die Ausgangsdarstellung 1:1 angenommen und auf die Abbildungsgröße in Pixeln Bezug genommen werden.

Für die Ausgabe auf Papier (Druckversion) sind absolute Angaben in Punkt oder Zentimeter hingegen sinnvoll, weil die vorgesehene Absolutgröße des Papiers (beispielsweise A4) ebenfalls bekannt ist.

[Bearbeiten] Schrift

[Bearbeiten] Auszeichnung und Farben

• Keine Unterstreichung als Auszeichnung (Hervorhebung), da Leser einen klassischen Hyperlink erwarten würden.
• Nicht sperren.
• Versalien (Großbuchstaben) und Kapitälchen auf literarische, künstlerisch besonders gestaltete Texte beschränken.
• Farbige Unterlegung und Schrift in unterschiedlichen Farben gut möglich – jedoch Druckversion und monochrome Bildschirme bedenken.
• Kontrastreiche Farbkombinationen (Schrift / Hintergrund) wählen.
• Farbunterscheidung nicht zur Bedeutungsunterscheidung verwenden; Schwarz-Weiß- oder Graudarstellung bedenken.

[Bearbeiten] Hyperlink

• Klares und deutliches Konzept für die Hervorhebung von Verweisen befolgen.

• Traditionell-klassisch, ja fast schon altmodisch: Unterstreichung.

• 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 – wenn der Text kein Suchspiel sein soll.

• Bereits vom Leser besuchte Links sollten im Regelfall als solche markiert werden.

• Ein Bonbon, das jedoch nur Leser genießen können, die sich länger mit der Textgruppe beschäftigen: 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.

[Bearbeiten] Zeichenvorrat und Schriftarten

Web-Autoren können nicht voraussetzen, dass alle Leser die Schriftarten zur Verfügung haben, die sie selbst in ihrer professionellen Entwicklungsumgebung installiert haben.

Um einen Großteil der Leser erreichen zu können, ist es erforderlich, auf die jeweils bereits weit verbreiteten technischen Gegebenheiten Rücksicht zu nehmen – das heißt hier, dass nicht alle PCs aller Leser sämtliche Schriftzeichen der ganzen Unicode-Welt darstellen können.

Naturgemäß müssen hier Abstriche gemacht werden. Wer kein Arabisch oder Hebräisch kann, hat die entsprechenden Zeichen vielleicht genauso wenig installiert wie Chinesisch, und wird ein Originalzitat nicht angezeigt bekommen – es würde ihm aber auch wenig helfen. Entsprechende Textteile wären deshalb so zu gestalten, dass die Lesbarkeit des Gesamttextes nicht mehr als unvermeidlich gestört wird. Eine Möglichkeit ist es, nur vereinzelt auftretende Passagen in vermutlich nicht bei jedem Leser darstellbaren Schriftsystemen als Grafiken einzubinden.

Genauso kann nicht vorausgesetzt werden, dass spezielle Zeichensätze mit besonderen grafischen Symbolen (Pfeile, Möbelstücke, Transportmittel) als Schriftzeichen beim Leser vorhanden sind; auch hier muss mit entsprechenden Grafiken gearbeitet werden. Gleiches gilt für den Formelsatz.

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. CSS (und damit HTML) bieten dabei die Möglichkeit, eine „Kaskade“ von Schriften für bestimmte Textpassagen vorzusehen:

font-family: "AvantGarde Bk BT", "Verdana", "Tahoma", "Helvetica", "Arial", sans-serif

Das bedeutet: Versuche, mit „AvantGarde“ darzustellen; wenn nicht vorhanden, probiere Verdana, Tahoma, Helvetica, Arial in dieser Reihenfolge; wenn alles misslingt, stelle in der standardmäßigen serifenlosen Schrift dieses Browsers dar. Diese Methode ist besonders dann wichtig, wenn Phantasieschriften (beispielsweise Schreibschrift) sicher dargestellt werden sollen.

[Bearbeiten] Quelltext und Standardkonformität

Webbrowser sind traditionell ziemlich geduldig und versuchen, auch bei stark fehlerhafter HTML-Syntax noch irgendwie den Dokumenttext anzuzeigen. Die Folge: Sowohl Autoren, die noch direkt HTML als Quelltext schreiben, aber vor allem auch die „Generatoren“ (also jene Programme, mit denen jeder Laie leicht Internet-Seiten erzeugen kann) sind mitunter extrem nachlässig. Der entstehende HTML-Code enthält dann viele Syntax-Verletzungen und es wird oft nicht eindeutig definiert, welche Textabschnitte nun in welcher Weise dargestellt werden sollen. Autoren verwenden nun zur Anzeige ihres gerade geschriebenen Textes die identische Software, mit der der Text verfasst wurde, sehen die gewünschte Darstellung und veröffentlichen das Dokument im Internet. Andere Webbrowser interpretieren jedoch den regelwidrigen Text völlig anders, die Internet-Leser sehen eine missgestaltete, teilweise kaum lesbare Seite.

Da nur über die definierten technischen Standards die störungsfreie Kommunikation zwischen Autor und Leser möglich ist, sollte:

• Strict XHTML 1.0 angestrebt werden
• Jeder Text mit dem geeigneten DOCTYPE gekennzeichnet werden
• Automatische Validierung (Syntaxprüfung) vor Veröffentlichung erfolgen (HTML Tidy usw.)

Dadurch wird auch die Langlebigkeit wertvoller Texte in zukünftigen IT-Systemen gefördert.

Normalbenutzer haben zwar wenig Einfluss auf das Ergebnis ihres HTML-Generators, können jedoch bei notorisch mangelhaftem HTML-Code zu einer besseren Software wechseln.

[Bearbeiten] Sonstiges

Ist für eine Website die Registrierung von Benutzern möglich und werden ohnehin individuelle Profile verwaltet, dann sollten hier auch Darstellungsoptionen eingestellt werden können:

Frames ja/nein, Schriftart, ggf. Schriftgröße, ...

[Bearbeiten] Siehe auch

• Webtypografie
• Typografie für digitale Texte
• Barrierefreies Internet
• Bildschirmschrift
• Druckversion (Webtypografie)

[Bearbeiten] Technische Details

• HTML
• SELFHTML und dortige Weblinks
• Typografie für HTML
• CSS 2

[Bearbeiten] Weblinks

• Zehn wichtigste Fehler im Webdesign (englisch)