Handbuch Webdesign: Typografie

Typografie bezweckt, Texte lesbar und verständlich (orthografisch) sowie optisch ansprechend (kalligrafisch) zu präsentieren. Diese Kapitel steht damit für den Übergang zwischen der inhaltlichen Arbeit und den Designentscheidungen.

Webseiten

Die Typografie für elektronisch gespeicherte Texte übernimmt zunächst alle gewohnten Regeln der klassischen „Papiertypografie“. Abweichende technische Bedingungen der Darstellungsmedien machen jedoch Anpassungen notwendig, und der Kreis der gestaltenden Personen hat sich beträchtlich erweitert. Dieser Artikel behandelt die Gestaltung eines digitalen Textes mittels Textverarbeitungssoftware oder Auszeichnungssprachen.

Unterschiede zur Papiertypografie

Texte werden während der Erstellung und später öfters geändert oder könnten jedenfalls künftig geändert werden. Es soll aber nicht bei jeder Veränderung am Dokument der gesamte Umbruch erneut manuell vorgenommen werden müssen. Deshalb: Automatischen Umbruch für Zeilen und Seiten vorsehen und unterstützen. Ferner: Definitionen zur Absatzkontrolle, zum Unterbinden von Seitenumbrüchen innerhalb bestimmter Bereiche
Hypertexte, interaktive Funktionen, Dynamik werden möglich; Multimedia-Elemente können eingebunden werden (Animation, Audio, Video). Solche Texte können beispielsweise als PDF-Dateien übermittelt werden; diese ermöglichen ein festes Layout wie ein Papierdokument, aber Lesezeichen und Verweise mittels Hyperlinks wie aus dem Internet gewohnt.
Die technischen Bedingungen bei der optischen Darstellung (Auflösung am Bildschirm, auf dem Drucker; Farbwiedergabe; Verwendung unterschiedlicher Endgeräte mit jeweils unterschiedlichen Eigenschaften) unterscheiden sich von einem in Drucktechnik einmalig und einheitlich hergestellten Erzeugnis.

Gemeinsamkeit mit der Papiertypografie

Im Moment der Publikation haben die Gestalter die volle Kontrolle über die technischen Gegebenheiten und die erfolgte Gestaltung (beispielsweise Umbruch).
Beim Ausdruck auf Papier oder Erstellen einer PDF-Datei (in Layout-treuer Normaldarstellung) wird dieser Zustand eingefroren.

Größere Verbreitung des Mediums

Früher erforderte die Textgestaltung einen Ausbildungsberuf (Schriftsetzer), und sie wurde nur von einer kleinen Zahl von Profis entsprechend professionell vorgenommen. Mit dem PC und Software sind die technischen Möglichkeiten Hunderten von Millionen Laien zugänglich geworden. Die typografischen Kenntnisse haben hingegen nicht die gleiche Verbreitung erfahren. Die überwiegende Zahl der Anwender orientiert sich am ehesten am Vorbild einer mechanischen Schreibmaschine.

Regeln und ihre Anwendung

Auch in der klassischen Typografie wird die Anwendung der Regeln (siehe Typografie) dem Medium angepasst: Roman, Plakat, Tageszeitung, Gedichtband, Speisekarte usw. unterliegen jeweils eigenen Notwendigkeiten.

Genauso müssen bei digitalen Texten technische Rahmenbedingungen, die Art des Textes, die Zielgruppe, der mögliche Aufwand in ein angemessenes Verhältnis gebracht werden. Juristische Schriftsätze, naturwissenschaftliche Werke folgen eigenen Gesetzmäßigkeiten; für einen Fließtext gültige Prinzipien unterscheiden sich von denen für eine Tabelle oder ein Gedicht.

Spezielle Zeichen

In den Anfangsjahren des WWW war der Vorrat an verfügbaren Zeichen sehr limitiert. Dies führte dazu, dass sich viele Menschen auf die Zeichen beschränken, die auf der Tastatur einfach zu erreichen sind. Hatte dieses Verhalten in den Zeiten mechanischer Schreibmaschinen seinen Sinn, so gibt es seit der weiten Verbreitung von Unicode keinen Grund mehr, zumindest die häufigsten Fehler zu vermeiden.

Anführungszeichen

In der deutschen Schrift können zwei Arten von Anführungszeichen verwendet werden:

„Gänsefüßchen“ und
»Guillemets (frz. Anführungszeichen)«

Guillemets empfehlen sich hierbei für die Verschachtelung, d.h. die Verwendung von Anführungszeichen in einem Satz, der bereits in Anführungszeichen steht. In einem Text in deutscher Sprache hat das " nichts zu suchen, auch wenn es sich auf der Tastatur einfach erreichen lässt.

Zum Vertiefen: Anführungszeichen bei typefacts.com

Auslassungszeichen

Als Auslassungszeichen werden oftmals drei Punkte hintereinander gesetzt: ... Statt dessen sollte das Auslassungszeichen gesetzt werden: … (ein Zeichen)

Zum Vertiefen: Auslassungspunkte bei typefacts.com

Binde- und Gedankenstrich

Zum Vertiefen: Binde- und Gedankenstrich bei typefacts.com

Symbole

schlecht	gut	Umsetzung in HTML
`->` `<-` `<->` `<=>` `<=`	Zeichen für Pfeile: → ← ↔ ⇔ ⇐	← u. a.
`^` (als Pfeil)	Zeichen für Pfeil: ↑	↑
`x` `*`	Zeichen für Multiplikation: × ·	× ·
`<=` `>=`	kleiner/gleich, größer/gleich: ≤ ≥	≤ ≥
`1/2` `1/4` `3/4`	½ ¼ ¾	½ ¼ ¾
`-`	Minuszeichen − statt Bindestrich -, wenn „minus“ gemeint ist	−
`+/-`	±	±