Zwischenraum zwischen den Buchstaben einstellen

Wenn Websites Texte enthalten, dann werden die Abstände zwischen den Buchstaben durch verschiedene Faktoren beeinflusst, z.B. durch die Schriftart und die Schriftgröße und von der Standardeinstellung des Browsers, mit dem die Website betrachtet wird. Es kann vorkommen, dass man die Abstände vergrößern möchte, sodass die Wörter "gestreckt" werden.

Abstände zwischen Buchstaben

In solchen Fällen kann man in CSS die Eigenschaft letter-spacing verwenden. Damit werden die Abstände zwischen den Buchstaben festgelegt. Mit einem Beispiel ist nachfolgend die Syntax abgebildet.

CSS-Code mit letter-spacing

Werte für letter-spacing

Für die Eigenschaft letter-spacing können die folgenden Werte verwendet werden.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • normal (Standardwert, normaler Abstand)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Ein Beispielcode sowie die Abbildung von der Browserdarstellung.

.selektor1 {
letter-spacing: 4px;
}

.selektor2 {
letter-spacing: 6px;
}

.selektor3 {
letter-spacing: 8px;
}

p {
margin: 2px;
padding: 5px;
width: 450px;
font-size: 18px;
height: 60px;
line-height: 60px;
border: 1px solid #001055;
}
<p class="selektor1">Text mit 4px Zwischenraum</p>
<p class="selektor2">Text mit 6px Zwischenraum</p>
<p class="selektor3">Text mit 8px Zwischenraum</p>
Text mit größerem letter-spacing

Es sind auch negative Werte möglich, sodass die Wörter zusammengestaucht werden. Die Eigenschaft letter-spacing gibt es bereits sehr lange und wird daher von allen gängigen Browsern gut unterstützt.