Typografisch korrekter Satz auf Webseiten


Spätestens, seitdem Webfonts verfügbar sind, sollte auch dem Letzten klar geworden sein, dass im Web längst nicht nur „Computertexte“ zu lesen sind, die mangels Möglichkeiten außerhalb typografischer Regeln stehen. Wir haben es mit einem neuen, aber dennoch vollwertigen Designmedium zu tun, in dem die Trennlinie zwischen Hobby- und professionellem Satz entlang der Einhaltung typografischer Regeln läuft, wie übrigens in jedem anderen Medium auch.

Exemplarisch sollen an dieser Stelle zwei der wichtigsten Regeln und deren Umsetzung in HTML aufgegriffen werden. Die Verwendung der richtigen Anführungsstriche und des echten Gedankenstrichs eliminiert in der Regel einen Großteil der typografischen Sünden eines unprofessionell gesetzten Textes. Weitere typografische Regeln finden Sie in zahlreichen Standardwerken wie zum Beispiel „Erste Hilfe Typografie“ von Hans Peter Willberg und Friedrich Forssmann.

Sonderzeichen im HTML-Quelltext

Um Sonderzeichen, also auch typografisch korrekte Anführungen und Gedankenstriche, zu setzen, stehen in HTML prinzipiell zwei unterschiedliche Varianten zur Verfügung.
Verwenden Sie, wie heute eigentlich üblich, Unicode für Ihre Webseite (im Header mit meta charset="utf-8" angeben), können Sie die Sonderzeichen im Quelltext einfach wie im Layoutprogramm über die Tastatur eingeben.
Steht Ihnen, aus welchen Gründen auch immer, Unicode nicht zur Verfügung, müssen Sie die maskierte Schreibweise benutzen, die die Sonderzeichen kodiert. HTML bietet dafür unterschiedliche Möglichkeiten, die immer mit dem &-Zeichen einleiten und mit dem Semikolon abschließen.
Zum einen wurden für einige Sonderzeichen eigene Kodierungen definiert, wie zum Beispiel & für das Ampersand, das kaufmännische Und-Zeichen.
Zum anderen können Sie aber auch den Unicode des Zeichens, eingeleitet mit # angeben, was in unserem Beispiel dann & ergeben würde.
Mit dieser letzten Variante können Sie übrigens nicht nur Sonderzeichen, sondern alle Zeichen, zum Beispiel auch Piktogramme, eines Webfonts adressieren.


Anführungszeichen

Nichts wird so gerne und häufig falsch gesetzt wie Anführungszeichen. Meistens kommen stattdessen die – übrigens in keiner Sprache richtigen – Zollzeichen (Shift-2 auf der Tastatur) zum Einsatz.



Zwar werden in englischen Texten öffnende und schließende Anführungen oben gesetzt, die dabei korrekterweise zum Einsatz kommenden Zeichen sind aber der 66 (öffnend) und 99 (schließend) ähnlich.



Im Deutschen werden die öffnenden Anführungen dagegen unten und die schließenden oben gesetzt. Die dabei zum Einsatz kommenden Zeichen ähneln der 99 (öffnend) und 66 (schließend).



Alternativ können in beiden Sprachen auch die «französischen Guillemets» benutzt werden – im Deutschen ist häufig ein »vertauschter Einsatz« üblich. Typografisch sind diese französischen Zeichen übrigens manchmal tatsächlich die bessere Wahl, da sich die Guillemets besser in die Textzeile integrieren.



Deutschsprachige Webdesigner werden es schon bemerkt haben: in einigen häufig verwendeten Systemschriften, wie zum Beispiel der Verdana, sehen die korrekten deutschen Anführungen sehr merkwürdig aus. Abhilfe schaffen hier entweder die eben erwähnten Guillemets oder aber die Verwendung von Webfonts mit sorgfältiger gestalteten deutschen Anführungen.


Zeichen Tastatur Mac Tastatur Win HTML Unicode
“ (engl. öffnend) Alt - 2 Alt + 0147 “ “
” (engl. schließend) Alt-shift-2 Alt + 0148 ” ”
„ (dt. öffnend) Alt - ^ Alt + 0132 „ „
“ (dt. schließend) Alt-shift-^ Alt + 0147 “ “
« (franz öffnend) Alt-q Alt + 0171 « «
» (franz schließend) Alt-shift-q Alt + 0187 » »


Gedankenstrich

Eine weitere, häufige Fehlerquelle ist der Gedankenstrich, für den das kürzere, für Trennungen vorgesehene, Divis verwendet wird.



Der Gedankenstrich, auch Halbgeviert-Strich oder im englischen n-dash genannt, wird benutzt für: Einschübe – dann immer durch Leerzeichen abgesetzt. Bis-Strich bei Zahlen (2–3) und Uhrzeiten (12.00–13.00 Uhr) ohne Leerzeichen. Streckenstrich zwischen Ortsnamen (Frankfurt–Mainz) mit maximal einem halben Leerzeichen. Auslassungsstrich (10,– Euro) auch wieder ohne Leerzeichen.



 Zeichen  Tastatur Mac  Tastatur Win  Tastatur HTML  Unicode
– Gedankenstrich Alt – Alt + 0150 – –


Schon mit diesen wenigen typografischen Regeln und Zeichen geben Sie Ihren Gestaltungen einen deutlich professionelleren Auftritt, der die Mühe in jedem Fall wert ist. Auch weitere Regeln lassen sich meistens problemlos in HTML umsetzen – eine sehr umfangreiche Liste an Sonderzeichen, auch festen Leerzeichen, finden Sie auf der Webseite von SelfHTML.