Zum Inhalt springen

Websiteentwicklung: CSS: Zeichenabstand

Aus Wikibooks


Mit der Eigenschaft letter-spacing kann der Abstand zwischen den Glyphen beeinflußt werden. Der Wert ist entweder eine Länge oder das Schlüsselwort 'normal' oder 'inherit'.

Initialwert ist 'normal'. Die Eigenschaft wird vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.

Die jeweilige Schriftart gibt vor, wie groß der 'normale' Abstand zwischen Glyphen ist. Die Längenangabe addiert sich zu diesem 'normalen' Abstand. Mit der Angabe einer negativen Länge kann man also erreichen, dass die Glyphen näher zusammenrücken oder sogar überlappen, bei einer großen Länge erreicht man den Effekt einer gesperrten Schrift, neben kursiv oder fett eine weitere Möglichkeit, Textstellen besonders hervorzuheben. Bei großen Abständen kann das Darstellungsprogramm zudem Ligaturen in einzelne Glyphen aufteilen, um den gewünschten Effekt der Sperrung zu unterstreichen.

p {
  letter-spacing: .2em
}

Die Buchstaben des Textes werden mit einem zusätzlichen Abstand von 0.2em angezeigt.

p {
  letter-spacing: .5cm
}

Die Buchstaben des Textes werden mit einem zusätzlichen Abstand von 0.5cm angezeigt.

p {
  letter-spacing: -0.2ex
}

Die Buchstaben des Textes werden mit einem verkleinerten Abstand von -0.2ex angezeigt, also zusammengerückt.