letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die letter-spacing-Eigenschaft von CSS legt das horizontale Abstandsverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen beim Rendern des Texts hinzugefügt. Positive Werte von letter-spacing bewirken, dass Zeichen weiter auseinander liegen, während negative Werte die Zeichen näher zusammenbringen.

Probieren Sie es aus

Syntax

css
/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

Werte

normal

Der normale Buchstabenabstand für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0 ermöglicht dieses Schlüsselwort dem User-Agent, den Abstand zwischen Zeichen zu ändern, um den Text zu blocksatzgerecht zu verteilen.

<length>

Gibt zusätzlichen Zeichenabstand zusätzlich zu dem Standardabstand zwischen Zeichen an. Werte können negativ sein, es kann jedoch implementierungsspezifische Begrenzungen geben. User-Agents dürfen den Zeichenzwischenraum nicht weiter vergrößern oder verkleinern, um den Text zu blocksatzgerecht zu verteilen.

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht die Wörter, auf die die Gestaltung angewendet wird, unleserlich. Bei Text, der mit einem sehr großen positiven Wert gestaltet ist, sind die Buchstaben so weit voneinander entfernt, dass die Wörter wie eine Reihe einzelner, unverbundener Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestaltet ist, überlappen sich die Buchstaben so stark, dass die Wörter möglicherweise nicht erkennbar sind.

Lesbarer Buchstabenabstand muss von Fall zu Fall bestimmt werden, da verschiedene Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der sicherstellt, dass alle Schriftfamilien ihre Lesbarkeit automatisch beibehalten.

Internationalisierung

In einigen Schriftsystemen sollte kein Buchstabenabstand angewendet werden. Beispielsweise erwarten Sprachen, die die arabische Schrift verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Das Anwenden von Buchstabenabstand lässt den Text gebrochen aussehen.

شسيبتنمك

Formale Definition

Initialer Wertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertein optimaler Wert, der entweder aus einer absoluten Länge oder dem Schlüsselwort normal besteht
AnimationstypLängenangabe

Formale Syntax

letter-spacing = 
  normal    |
  <length>

Beispiele

Buchstabenabstand festlegen

HTML

html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3
# letter-spacing-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch