letter-spacing

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

normal

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

<length-percentage>

Gibt zusätzlichen Abstand zwischen den Zeichen zusätzlich zu dem Standardabstand zwischen den Zeichen an. Während die Werte negativ sein können, können diese auf implementationsspezifische Grenzen beschränkt sein. User Agents dürfen den Zeichenabstand nicht weiter erhöhen oder verringern, um den Text auszurichten.

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

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht das Wort bzw. die Wörter, auf die das Styling angewendet wird, unlesbar. Bei Text mit einem sehr großen positiven Wert sind die Buchstaben so weit auseinander, dass das Wort bzw. die Wörter wie eine Reihe einzelner, unverbundener Buchstaben erscheinen. Bei Text mit einem sehr großen negativen Wert können sich die Buchstaben so weit überlappen, dass das Wort bzw. die Wörter unkenntlich werden könnten.

Gut lesbare Zeichenabstände müssen fallweise bestimmt werden, da verschiedene Schriftarten unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der sicherstellt, dass alle Schriftarten automatisch ihre Lesbarkeit behalten.

• MDN Understanding WCAG, Leitfaden 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.8 | W3C Understanding WCAG 2.0

Internationalisierungsaspekte

In einigen Schriftsystemen sollte kein Zeichenabstand angewendet werden. Zum Beispiel erwarten Sprachen, die die arabische Schrift verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Die Anwendung von Zeichenabstand könnte dazu führen, dass der Text zerbrochen 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

Festlegen von letter-spacing mit Längenwerten

Dieses Beispiel zeigt mehrere Absätze mit unterschiedlichen Längenwerten für letter-spacing, sodass Sie diese vergleichen können.

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 einen anderen letter-spacing-Wert auf jeden Absatz an.

.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 mit Länge und Prozentwerten

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

Der Code zeigt mehrere Absätze, die dasselbe letter-spacing auf Text mit zunehmender Schriftgröße anwenden. Wir bieten die Möglichkeit, zwischen einem Längenwert und einem Prozentwert für letter-spacing zu wechseln, damit Sie die responsiven Eigenschaften 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- und einem Prozentwert für letter-spacing 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 nachfolgenden 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;
}

Standardmäßig wenden wir einen letter-spacing-Wert von 8px auf alle Absätze an. Wenn das Kontrollkästchen jedoch aktiviert ist, ändern wir 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:

Zuerst sehen Sie, wie der anfängliche Längenbuchstabenabstand auf die größeren Schriftgrößen angewendet in Ordnung aussieht, aber nicht auf den kleineren Schriftgrößen. Aktivieren Sie nun das Kontrollkästchen und sehen Sie, wie der Prozentbuchstabenabstand auf allen Zeilen angemessen aussieht, da er sich mit der Schriftgröße skaliert.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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