letter-spacing CSS property

Probieren Sie es aus

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: 30%;

letter-spacing: -1px;

<section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

Syntax

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

/* <length-percentage> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: -0.5px;
letter-spacing: 50%;

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

Werte

Diese Eigenschaft wird als Einzelwert aus der folgenden Liste angegeben:

normal

Der normale Buchstabenabstand für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0 erlaubt dieses Schlüsselwort dem User Agent, den Abstand zwischen Zeichen zu verändern, um Text auszurichten.

<length-percentage>

Gibt zusätzlichen Zeichenabstand zusätzlich zu dem Standardabstand zwischen Zeichen an. Während die Werte negativ sein können, können sie durch implementierungsspezifische Grenzen eingeschränkt sein. User Agents dürfen den Zeichenabstand zur Textausrichtung nicht weiter vergrößern oder verkleinern.

Prozentwerte werden relativ zur Breite des Leerzeichens der auf den Text angewendeten Schriftart berechnet.

Hinweis: Wenn letter-spacing ungleich null ist, wenden User Agents keine optionalen Ligaturen an, wie die liga (Standardligaturen) und clig (kontextuelle Ligaturen) OpenType-Features, die normalerweise durch font-variant-ligatures gesteuert werden. Diese Features können explizit durch font-feature-settings erneut aktiviert werden.

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht das/die Wort(e), auf die das Styling angewendet wird, unleserlich. Bei Text, der mit einem sehr großen positiven Wert gestylt ist, sind die Buchstaben so weit voneinander entfernt, dass das/die Wort(e) wie eine Reihe von einzelnen, unverbundenen Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestylt ist, können die Buchstaben so stark übereinander liegen, dass das/die Wort(e) nicht mehr erkennbar sind.

Ein lesbarer Buchstabenabstand muss fallweise bestimmt werden, da verschiedene Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der sicherstellt, dass alle Schriftfamilien automatisch ihre Lesbarkeit beibehalten.

• MDN Verständnis von WCAG, Erklärung der Richtlinie 1.4
• Verständnis des Erfolgs Kriteriums 1.4.8 | W3C Verständnis von WCAG 2.0

Internationalisierungsprobleme

In einigen Schriftsystemen sollte kein Buchstabenabstand angewendet werden. Zum Beispiel erwarten Sprachen, die das arabische Alphabet verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Das Anwenden von Buchstabenabstand kann dazu führen, dass der Text kaputt aussieht.

<p lang="ar" dir="rtl">شسيبتنمك</p>

p {
  font-size: 3em;
  margin-inline-start: 5px;
}

Formale Definition

Formale Syntax

letter-spacing = 
  normal               |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Buchstabenabstand mit Längenwerten einstellen

Dieses Beispiel zeigt mehrere Absätze mit unterschiedlichen Längenwerten für den letter-spacing, die es Ihnen ermöglichen, sie zu vergleichen.

HTML

Das HTML enthält mehrere <p>-Elemente mit Textinhalt.

<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

Unser CSS wendet jedem Absatz einen anderen letter-spacing-Wert zu.

.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

Das gerenderte Ergebnis sieht folgendermaßen aus:

Vergleich von letter-spacing, gesetzt mit Länge und Prozentwerten

Dieses Beispiel zeigt, dass Prozentwerte für letter-spacing nützlich für die responsive Textgrößenanpassung sind.

Der Code zeigt mehrere Absätze, die denselben letter-spacing-Wert aufweisen, aber den Text mit zunehmender Schriftgröße. Wir bieten eine Funktionalität, zwischen einem Längen- und einem Prozentwert für letter-spacing zu wechseln, sodass Sie die responsiven Eigenschaften der Verwendung eines Prozentwerts beobachten können.

HTML

Das HTML enthält mehrere <p>-Elemente mit Textinhalt und ein <input type="checkbox">, das wir verwenden, um zwischen einem Längen-letter-spacing-Wert und einem Prozent-letter-spacing-Wert zu wechseln.

<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
  <label for="ls-toggle">
    Toggle <code>letter-spacing</code> (off: <code>8px</code>, on:
    <code>12%</code>)
  </label>
  <input type="checkbox" id="ls-toggle" />
</form>

CSS

Unser CSS beginnt mit der Anwendung von zunehmenden font-size-Werten auf jeden aufeinanderfolgenden Absatz:

html {
  font-family: "Arial", sans-serif;
}

.x-small {
  font-size: 0.8em;
}

.small {
  font-size: 1.3em;
}

.medium {
  font-size: 2em;
}

.large {
  font-size: 3em;
}

.x-large {
  font-size: 3.5em;
}

Wir wenden standardmäßig einen letter-spacing-Wert von 8px auf alle Absätze an. Wenn das Kontrollkästchen aktiviert ist, ändern wir jedoch den letter-spacing-Wert auf 12%:

p {
  letter-spacing: 8px;
}

p:has(~ form > input:checked) {
  letter-spacing: 12%;
}

Ergebnis

Das gerenderte Ergebnis sieht folgendermaßen aus:

Beachten Sie zunächst, wie der anfängliche Längen-Buchstabenabstandswert bei größeren Schriftgrößen gut aussieht, aber bei kleineren Schriftgrößen nicht gut aussieht. Schalten Sie nun das Kontrollkästchen um und beachten Sie, wie der Prozent-Buchstabenabstand auf allen Zeilen angemessen aussieht, da er mit der Schriftgröße skaliert.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-kerning
• word-spacing
• SVG letter-spacing Attribut