Die Eigenschaften letter-spacing und word-spacing

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Der Zeichenabstand in Textelementen wird durch die Eigenschaft letter-spacing festgelegt. Man bezeichnet ihn auch als Laufweite einer Schrift. In CSS kann er relative und absolute Werte annehmen, sein Standardwert ist normal. Die folgende Abbildung veranschaulicht den Effekt von letter-spacing in einem deutlichen Beispiel.

Modifizierte Laufweite einer Schrift mit letter-spacing

Abbildung: Modifizierte Laufweite einer Schrift mit letter-spacing.

Die Seite in der Abbildung wird durch den folgenden HTML-Code erzeugt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Modifzierte Laufweite einer Schrift mit letter-spacing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
    }
    p {
      font-size: 16pt;
    }
    .luftig {
      letter-spacing: 0.5em;
    }
  </style>
</head>
<body>
  <p class="luftig">Alle Absätze mit der zugewiesenen Klasse 'luftig' auf dieser Seite sind mit dem Wert 0.5em für die Laufweite der Schrift formatiert. Man kann den Effekt, den diese Zuweisung erzeugt, deutlich erkennen.</p>
  <p>Dieser Absatz hingegen ist keine Instanz der Klasse 'luftig' und wird deswegen in der normalen Laufweite der Schrift angezeigt.</p>
</body>
</html>

Nicht nur der Abstand zwischen den Buchstaben wird mit letter-spacing vergrößert, sondern auch der Platz zwischen den Wörtern. Diese werden von dem Browser als mit Leerzeichen getrennte Buchstabengruppen interpretiert, womit auch ihre Zwischenräume ebenso von der Laufweite betroffen sind wie die Buchstaben selbst.

Der Eigenschaft letter-spacing können auch negative Werte zugewiesen werden, um die Laufweite der Schrift zu verringern. Sinnvoll ist das etwa bei Überschriften, deren Buchstaben standardmäßig vor allem in den Schriftgattungen sans-serif und monospace überproportional weit auseinander gezogen werden. Die folgende Abbildung zeigt zwei Überschriften im Vergleich. Die erste wird standardmäßig ohne Definition von letter-spacing dargestellt. Besonders die Lücken neben den Buchstaben »i«, »l« und »t« sind relativ groß. In der zweiten Überschrift lösen wir das Problem mit einem negativen Wert für letter-spacing und stellen sie kompakter dar.

Verringerung der Laufweite mit letter-spacing

Abbildung: Verringerung der Laufweite mit letter-spacing.

Es folgt der HTML-Code für diese Seite. Achten Sie dabei besonders auf die Klasse zusammengerueckt, die der zweiten h1-Überschrift zugewiesen wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Verringerung der Laufweite mit letter-spacing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
    }
    h1 {
      font-family: Courier, "Courier New", monospace;
    }
    .zusammengerueckt {
      letter-spacing: -0.08em;
    }
  </style>
</head>
<body>
  <h1>Diese Überschrift wirkt etwas zu weit auseinander gezogen</h1>
  <h1 class="zusammengerueckt">So sieht sie schon besser aus!</h1>
</body>
</html>

Die Laufweite in der zweiten Überschrift wird nur geringfügig verringert, um das gewünschte Ergebnis zu erzielen. Um ein Gefühl für die Laufweite von Schriften zu bekommen, empfehle ich Ihnen, ein wenig mit letter-spacing bei verschiedenen Schriftarten und -größen zu experimentieren. Sie ist eine wirkungsvolle Eigenschaft, mit der man ein Design einfach aufwerten und interessante grafische Effekte erzielen kann.

Gestalterischer Effekt mit letter-spacing

Abbildung: Gestalterischer Effekt mit letter-spacing.

Die Abbildung zeigt eine Überschrift mit einem grafischen Effekt, der nur durch die Änderung der Laufweite erzielt wurde – ohne jegliche Verwendung eines Grafikprogramms.

Hier kommt der Quelltext für die Seite in dieser Abbildung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Gestalterischer Effekt mit letter-spacing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
    }
    .seitentitel {
      font-family: Courier, 'Courier New', monospace;
      font-size: 18pt;
      letter-spacing: 0.7em;
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  <h2 class="seitentitel">Klaus Mustermanns extravagante Webseite</h2>
  <p>Die gedehnte Überschrift sieht fast aus wie ein Logo für Klaus Mustermanns Webseite, dabei wurde sie ohne jegliche grafische Hilfsmittel erstellt.</p>
</body>
</html>

Mit der Eigenschaft word-spacing kann man auch nur den Abstand zwischen den Wörtern in einem Text definieren. Aus zwei Gründen empfiehlt sich der Einsatz dieser Eigenschaft jedoch nicht:

Erstens wird sie nicht von allen wichtigen Browsern unterstützt. Frühere Versionen des Internet Explorer (vor IE6 für Windows und IE5 für Macintosh) unterstützen word-spacing genauso wenig wie ältere Versionen des Netscape Navigator (vor Version 6). Mit dem Internet Explorer 5 für Macintosh kommt es zu einer fehlerhaften Darstellung, die zu einer Überlappung der Wörter führen kann. Der Internet Explorer für Windows, Netscape Navigator, Opera und Mozilla sind erst seit ihren neuesten Versionen in der Lage, word-spacing korrekt zu verarbeiten, obwohl es schon seit CSS1 Bestandteil der W3C-Spezifikation ist.

Wortabstände mit der Eigenschaft word-spacing

Abbildung: Wortabstände mit der Eigenschaft word-spacing.

Zweitens kann es auf allen Browsern in der Kombination von word-spacing mit der Eigenschaftsdefinition text-align: justify zu unvorhersehbaren Layouteffekten kommen. Die Elemente sollten auf keinen Fall gemeinsam eingesetzt werden.

Die obige Abbildung veranschaulicht den Effekt von word-spacing (mit einem Wert von 1em) in einem längeren Satz und ihr HTML-Code sieht folgendermaßen aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Wortabstaende mit der Eigenschaft word-spacing</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    body {
      background-color: #FFFFFF;
      font-family: helvetica, arial, sans-serif;
    }
    .weit {
      word-spacing: 1em;
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <p class="weit">Schauen wir doch mal, was mit dem Abstand zwischen den Wörtern geschieht, wenn wir einem Absatz die Klasse "weit" zuweisen. In dieser Klasse bekommt die Eigenschaft <code>word-spacing</code> den Wert 1em.</p>
</body>
</html>

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg