Anführungszeichen, Quotes, Guillemets – korrekte Satzzeichen im Webdesign
Ein Blog oder eine Website sind kein Grund auf ansprechende und korrekte Typografie zu verzichten. Design besteht nicht nur aus der Anordnung der einzelnen Elemente, auch die Schrift und ihre Gestaltung zählen dazu. Die richtigen Anführungszeichen sehen nicht nur besser aus, sie zeigen auch, dass man Wert auf Typografie legt. Wer sich bei der Gestaltung seiner Website Mühe gibt, sollte letztendlich nicht auf die große Kleinigkeit der Typografie vergessen – die Anführungszeichen.
Es gibt Details, die sofort verraten ob sich jemand die Mühe gemacht hat auf korrekte Darstellung zu achten: viele Sprachen verwenden ihre eigenen Satzzeichen.
Das Anführungszeichen
Das gerade Anführungszeichen gibt es wie alle anderen einfach und doppelt. Es ist das meist gesehene Anführungszeichen und stammt noch von der Schreibmaschine, die für dieses Satzzeichen keine eigene Type kannte. Aus Platzgründen wurde auf das typografische Anführungszeichen verzichtet.
Heute, im elektronischen Zeitalter, ist das nicht mehr notwendig. Die oft gesehenen Prime ( ′ ) oder Doubleprime ( ″ ) (als ′ bzw. ″ codiert) sind eigentlich Minuten- und Fußzeichen bzw. Zoll- und Sekundenzeichen, also Maßzeichen, die falsch verwendet werden. Früher mussten sie aus technischen Gründen oft als Ersatz für fehlende Typen herhalten. Noch häufiger wird das einfache ( ' ) und doppelte ( " ) gerade Anführungszeichen eingesetzt. Bei diesen handelt es sich genau genommen jedoch um Codierungszeichen. Beide haben - außer bei ihrer korrekten Verwendung - in typografisch gestalteten Texten nichts verloren.
Viele Sprachen haben ihre eigene Interpunktion. So unterscheiden sich die deutschsprachigen von den englischen und den französischen Anführungszeichen. Daher hier ein kleiner Überblick.
Englische “Quotes”:
Die „englischen“ Anführungszeichen bestehen aus hochgestellten Strichen vor und nach dem Wort. Man kann sie sich vereinfacht als hochgestellten Sechser und Neuner vorstellen (Anm.: Leser aus Deutschland mögen es verzeihen: in Österreich sind Ziffern maskulin, wodurch es nun einmal der Neuner und nicht die Neun heißt).
Grafische Eselsbrücke:
‘…’ , 6…9 bzw. “…” , 66…99
Um sie in HTML zu notieren, kann man folgende HTML-Entities verwenden (zusätzlich CSS (content)-Variante)
- Left single quote ( high 6)
- HTML: ‘ Num: ‘
CSS(ISO): \2018 - Right single quote (high 9)
- HTML: ’ Num: ’
CSS(ISO): \2019
- Left quote (double high 6)
- HTML: “ Num: “
CSS(ISO): \201c - Right quote (double high 9)
- HTML: ” Num: ”
CSS(ISO): \201d
Bei der korrekten Schreibweise sollte man zudem darauf achten, ob es sich um amerikanisches oder britisches Englisch handelt, da hier unterschiedlich notiert wird. Gerade bei augenscheinlich „gleichen“ Sprachen bildet dies eine häufige Fehlerquelle. In unserem Fall werden die verschachtelten Anführungszeichen umgekehrt geschrieben. Aber auf dieses Themea will ich hier gar nicht eingehen.
Deutsche „Anführungszeichen“
Die deutsche Ausformung dieser Satzzeichen unterscheidet sich von den englischen Anführungszeichen vor allem durch zwei Faktoren:
Erstens: das öffnende Zeichen befindet sich immer unten und das schließende immer oben.
Zweitens: weisen die deutschen im Gegensatz zu den englischen Anführungszeichen eine andere Schwungrichtung auf. So formt das Öffnende etwa die Form eines Neuners und das Schließende, die eines Sechsers.
Und hier wieder die grafische Eselsbrücke:
‚…‘ , 9…6 bzw. „…“ , 99…66
Um sie im HTML zu notieren, kann man folgende HTML-Entities verwenden (zusätzlich CSS (content)-Variante)
- Single low quote (single low-9)
- HTML: ‚ Num: ‚
CSS(ISO): \201a - Left single quote (high-6)
- HTML: ‘ Num: ‘
CSS(ISO): \2018
- Double quote (double low-9)
- HTML: „ Num: „
CSS(ISO): \201e - Double quote (double high-6)
- HTML: “ Num: “
CSS(ISO): \201c
Französische « Guillemets »
Gut, die Guillemets, das ist die französische und schweizerische Spielart, erkennt jeder sofort. Sie sehen - einfach ausgedrückt - wie spitze Klammern aus.
‹ … › , « … »
Als Besonderheit sei hier erwähnt, dass sie in Frankreich mit einem kleinen Abstand zum Wort verwendet werden, während in der Schweiz meist kein Abstand gesetzt wird.
Um sie im HTML zu notieren, kann man folgende HTML-Entities verwenden (zusätzlich CSS (content)-Variante)
- Single Left-Pointing Angle Quotation Mark
- HTML: ‹ Num: ‹
CSS(ISO): \2039 - Single Right-Pointing Angle Quotation Mark
- HTML: › Num: ›
CSS(ISO): \203a
- Left-Pointing Double Angle Quotation Mark
- HTML: « Num: «
CSS(ISO): \00ab - Right-Pointing Double Angle Quotation Mark
- HTML: » Num: »
CSS(ISO): \00bb
Auch im Deutschen gibt es eine Variante der Guillemets. Hier werden sie allerdings ohne Abstand und mit der Spitze zum Wort geschrieben. Mit dieser Gestaltung lassen sich Teilbereiche grafisch besonders hervorheben.
Wie mache ich mir eine Automatik?
Jedesmal die HTML-Entities einzugeben kann einfach mühsam sein. Wenn man regelmäßig die typografisch korrekten Anführungszeichen setzen will, kann man sich selbstverständlich auch eine „Automatik“ schreiben. Hierzu muss man semantisch korrekt im HTML den Teil für die Maschine als Zitat kennzeichnen <q></q> und mittels CSS die entsprechenden Zeichen für den Menschen formatieren.
Hier ein Beispiel für deutschsprachige Anführungszeichen (alle anderen wären dann äquivalent zu behandeln):
Wer sich die Mühe macht auf diese „Kleinigkeiten“ zu achten, wird sicherlich auch ein wohlwollendes Auge, nicht nur bei Spezialisten, sondern auch bei vielen finden, die generell Gefallen an schön gesetzten Texten finden.
Links zum Thema:
- vom W3 publizierte Character Entity Reference Chart
- Character Entities Cheat Sheet für HTML, CSS (content) und Javascript
auf github
