Der Ausdruck Typografie bezeichnet zweierlei: einerseits das Gestalten, Zeichnen und Anfertigen von Schriften und andererseits die Gestaltung eines Textes (inklusive Marginalien, Kolumnentitel, Tabellen oder auch Grafiken) für die visuelle Präsentation, und zwar unabhängig vom Medium, wie zum Beispiel die Ausgabe auf Papier oder am Bildschirm.

Typografie im Sinne von Textgestaltung lässt sich in drei Ebenen gliedern (s. a. Wehde 2000):

Makrotypografie (z. B. Erstellung eines Rasters für den Satzspiegel)
Mesotypografie (z. B. Gestaltung von Zeilen und Absätzen)
Mikrotypografie (z. B. Auswahl der Schriftart und Gestaltung von Zeichen)

Dieser Beitrag beschäftigt sich vorrangig mit der Mikrotypografie und zeigt auf, wie sich typografische Aufgabenstellungen im Rahmen einer Lokalisierung lösen lassen.

Es wäre so einfach, wenn ...

Typografie ist weniger auf die Sprache als vielmehr auf den (kulturellen) Ort der Rezeption bezogen. So unterscheidet sich beispielsweise die englische Typografie in Großbritannien von der in den USA. Hingegen ist die Typografie in der Schweiz - obwohl dort mehrere Nationalsprachen gesprochen werden - relativ einheitlich. Dennoch kann grundsätzlich eine Korrelation zwischen Sprache (ggf. erweitert durch einen Ländercode) und typografischen Konventionen konstatiert werden. Die ISO-Normen ISO 639-1 und 3166-1 (und neuerdings der Vorschlag „Tags for Identifying Languages") für die Sprachkennung, zum Beispiel en-US oder en, sind ein guter Ausgangspunkt, um kulturtopografische Typografie zu verwirklichen.

HTML bietet in Verbindung mit Cascading Stylesheets (CSS) Möglichkeiten, Typografie kulturabhängig zu realisieren: Über das lang-Attribut im HTML-Code kann das CSS mittels des Sprachselektors :lang(<ISO-Sprachcode>) auf sprachspezifische typografische Erfordernisse reagieren und beispielsweise die Anführungszeichen sowie den Gedankenstrich korrekt darstellen (siehe Beispiel 1).

<html lang="de">
  <head>
    <title>Typographie</title>
    <style type="text/css">
      :lang(de)  {quotes:"\201E" "\201C" "\201A" "\2018";}
        /* U+201E : DOUBLE LOW-9 QUOTATION MARK */
        /* U+201C : LEFT DOUBLE QUOTATION MARK  */
        /* U+201A : SINGLE LOW-9 QUOTATION MARK */
        /* U+2018 : LEFT SINGLE QUOTATION MARK  */
      :lang(fr)  {quotes:"\AB\200A" "\200A\BB" "\2039\200A" "\200A\203A";}
        /* U+00AB : LEFT-POINTING DOUBLE ANGLE QUOTATION MARK  */
        /* U+200A : HAIR SPACE                                 */
        /* U+00BB : RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK */
        /* U+2039 : SINGLE LEFT-POINTING ANGLE QUOTATION MARK  */
        /* U+203A : SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
      q:before   {content:open-quote}
      q:after    {content:close-quote}
      span.dash:lang(de):before,
      span.dash:lang(fr):before {content:"\20\2013\20"}
        /* U+0020 : SPACE   */
        /* U+2013 : EN DASH */
    </style>
  </head>
  <body>
    <p>Deutsch: <q>xxx <q>xxx</q> xxx<span class="dash"/>xxx</q></p>
    <p>Französisch: <q lang="fr">xxx <q>xxx</q> xxx<span class="dash"/>xxx</q></p>
  </body>
</html>

Beispiel 1: Browserergebnis
Beispiel 1: Quellcode und Browserergebnis; links: Mozilla Firefox 1.5 (generierte Zeichen rot hervorgehoben), rechts: Internet Explorer 6.0

Das einzige Problem ist die mangelhafte Browser-Unterstützung. Der Internet Explorer 6.0 interpretiert beispielsweise weder die Pseudoklasse :lang noch die Pseudoelemente :before und :after zusammen mit der CSS-Eigenschaft content (siehe Beispiel 1). Deshalb müssen in diesem Falle bereits bei der Erzeugung des HTML-Codes die korrekten Zeichen eingefügt werden. Das setzt voraus, dass die Texte beispielsweise in XML zur Verfügung stehen und geeignet ausgezeichnet sind. Dann lässt sich mit einer bestimmten Selektion das korrekte Zeichen einfügen (siehe Beispiel 2).

Beispiel 2:

<xsl:choose>
  <xsl:when test="./@lang='de'"> ... </xsl:when>
  ...
</xsl:choose>

... die vielen Zeichensätze nicht wären

Von der korrekten Verwendung eines Zeichens (z. B. U+201E: DOUBLE LOW-9 QUOTATION MARK) zu unterscheiden sind seine Formatierung (z. B. fett oder kursiv) sowie die Auswahl eines geeigneten Zeichensatzes zur Darstellung. Die Auswahl eines geeigneten Zeichensatzes sollte durch die Beantwortung der folgenden Fragen geleitet werden:

Kann man davon ausgehen, dass der Zeichensatz - möglichst standardmäßig - auf den Systemen der Benutzer installiert ist?
Unterstützt der Zeichensatz alle Zeichen der darzustellenden Sprache(n)?
Unterstützt der Zeichensatz alle verwendeten Schriftschnitte (z. B. kursiv und fett)?
Ist die Schriftfamilie (z. B. ITC Garamond oder MS PGothic), die dem Zeichensatz zu Grunde liegt, gut lesbar?
Ist der Zeichensatz für das verwendete Präsentationsmedium gut geeignet?

Im CSS sollte zusätzlich immer eine generische Schriftfamilie notiert werden, um einen Fallback zu haben, falls die gewünschte Schrift auf dem System des Benutzers nicht vorhanden sein sollte. CSS stellt für die CSS-Eigenschaft font-family die folgenden generischen Werte bereit: serif, sans-serif, monospace, cursive und fantasy. Eine entsprechende CSS-Definition sähe dann beispielsweise aus wie in Beispiel 3, wobei die Werte von links nach rechts ausgewertet werden.

Beispiel 3:

      { font-family: Georgia, Palatino, "Times New Roman", serif; }

Und dann auch noch die Textauszeichnungen ...

Es ist fast schon ein Gemeinplatz, dass die Anführungszeichen für die wörtliche Rede in den einzelnen Sprachen verschieden sind. Weniger bekannt ist hingegen, dass auch Schriftauszeichnungen kulturabhängig sind. Während die Schriftschnitte normal (oder: recte), kursiv, fett und fett-kursiv prinzipiell für alle Sprachen mit (erweitertem) lateinischem, griechischem und kyrillischem Alphabet für die typografische Auszeichnung verwendet werden können, gilt dies z. B. nicht für asiatische Ideogrammschriften wie das Chinesische oder Japanische (und es darf hinzugefügt werden, dass dies auch nicht für die gebrochenen Schriften, die so genannten Deutschen Schriften wie Fraktur, Schwabacher und Gotische Schrift gilt).

Die besondere Behandlung dieser Texte kann über das CSS erfolgen. Und wieder wäre es wünschenswert, wenn auch der Internet Explorer die Pseudoklasse :lang unterstützen würde. Da das nicht der Fall ist, kann man sich auch damit behelfen, im body-Element eine weitere CSS-Klasse zu notieren, beispielsweise lang-ja, falls der Text grundsätzlich japanisch ist. Wechselt die Sprache in einem Textsegment, beispielsweise in einem em-Element, zu Englisch, wird ebenfalls eine zusätzliche Klasse notiert, beispielsweise lang-en. Da es im Japanischen kein kursiv gibt, muss dieses ersetzt werden, beispielsweise durch eine andere Farbe oder durch die Auszeichnung fett. Letzteres ist keine optimale Lösung, da fett von japanischen Schriftzeichen in der Regel nicht unterstützt wird und die Zeichen dadurch schwerer zu lesen sind. Die entsprechenden Selektionen und Definitionen im CSS sähen für die Auszeichnung fett aus wie in Beispiel 4, für die Auszeichung durch Farbe wie in Beispiel 5.

Beispiel 4:

.lang-en em, em.lang-en { font-style: italic; font-weight: normal; }
.lang-ja em, em.lang-ja { font-style: normal; font-weight: bold; }

Beispiel 5:

.lang-en em, em.lang-en { font-style: italic; color: inherit; }
.lang-ja em, em.lang-ja { font-style: normal; color: blue; }

Idealerweise würde man für das Japanische „ " (U+300C: LEFT CORNER CORNER BRACKET) und „ " U+300D: RIGHT CORNER BRACKET) verwenden, um hervorgehobene Textsegmente zu kennzeichnen; mit einer Stylesheet-Signatur als Browser-Weiche lässt sich das für den Mozilla-Browser umsetzen, wie Beispiel 6 zeigt. An dieser Stelle ist zumindest darauf hinzuweisen, dass CSS3 für asiatische Texte die CSS-Eigenschaften font-emphasize-style und font-emphasize-position zusammen mit der allgemeinen CSS-Eigenschaft font-emphasize eingeführt und definiert hat, um korrekte Hervorhebungen erreichen zu können (siehe dazu den Working Draft vom 2. August 2002: www.w3.org/TR/css3-fonts/#font-emphasize-props).

<html lang="de">
  <head>
    <title>Typographie</title>
    <style type="text/css">
      .lang-de em, em.lang-de         { }
      .lang-ja em, em.lang-ja         { font-style: normal; color: blue; }
      body[id=doc] em:lang(ja)        { font-style: normal; color: inherit; }
      body[id=doc] em:lang(ja):before { content:"\300C"; }
      body[id=doc] em:lang(ja):after  { content:"\300D"; }
    </style>
  </head>
  <body id="doc" class="lang-de"> <!-- Stylesheet-Signatur: id="doc" -->
    <p><em>Hervorhebung deutsch</em> und: <em class="lang-ja" 
          lang="ja">Hervorhebung japanisch</em>.</p>
  </body>
</html>

Beispiel 6: Quellcode und Browserergebnis; links: Mozilla Firefox 1.5 (generierte Zeichen rot hervorgehoben), rechts: Internet Explorer 6.0

... in verschiedenen Medien

Schriftauszeichnungen sind aber nicht nur kultur-, sondern auch medienabhängig. Das em-Element in HTML für emphasize wird in Printmedien normalerweise kursiv ausgezeichnet und nicht fett, da fett zu stark hervorsticht und damit von der Textrezeption ablenkt. In HTML eignet sich für die Hervorhebung im Deutschen (und nicht nur dort) statt kursiv besser fett. Das hat unter anderem damit zu tun, dass der Textrezeptionsprozess meist etwas anders verläuft: Es ist eher ein suchendes Lesen. Deshalb bietet es sich an, für em die Anzeige auf dem Bildschirm fett und gerade, für den Drucker jedoch nicht fett, aber kursiv zu definieren.

Schlusswort

Die Typografie ist ein weites Feld. Je genauer man sich mit ihr beschäftigt, umso mehr Facetten treten zu Tage. Dabei sollte jedoch nach Jan Tschichold das oberste leitende Prinzip guter Lesetypografie sein: Sie darf nicht auffallen!

Literatur: