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 Buchstabenabstand für die aktuelle Schrift. Im Gegensatz zu einem Wert von 0 erlaubt dieses Schlüsselwort dem User Agent, den Abstand zwischen Zeichen zu ändern, um Text zu rechtfertigen.

<length-percentage>

Gibt zusätzlichen Zeichenabstand an zusätzlich zu dem Standardabstand zwischen den Zeichen. Während Werte negativ sein können, können diese auf implementierungsspezifische Grenzen beschränkt sein. User Agents können den Zeichenabstand zur Textausrichtung nicht weiter erhöhen oder verringern.

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

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert führt dazu, dass das Wort bzw. die Wörter, auf die das Styling angewendet wird, unlesbar werden. Bei Text mit einem sehr großen positiven Wert sind die Buchstaben so weit voneinander entfernt, dass die Wörter wie eine Reihe von einzelnen, nicht verbundenen Buchstaben erscheinen. Bei Text mit einem sehr großen negativen Wert können die Buchstaben so sehr überlappen, dass die Wörter möglicherweise unkenntlich werden.

Ein lesbarer Buchstabenabstand muss von Fall zu Fall bestimmt werden, da unterschiedliche Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen einzigen Wert, der bei allen Schriftfamilien automatisch die Lesbarkeit gewährleistet.

• MDN Verständnis WCAG, Erläuterungen zu Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.8 | W3C Verständnis WCAG 2.0

Internationalisierungsbedenken

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. Die Anwendung von Buchstabenabständen kann dazu führen, dass der Text unterbrochen erscheint.

<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

Einstellen von letter-spacing mit Längenwerten

Dieses Beispiel zeigt mehrere Absätze mit unterschiedlichen letter-spacing-Längenwerten, 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 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, das mit Länge und Prozentsatz festgelegt wird

Dieses Beispiel demonstriert, dass prozentuale letter-spacing-Werte nützlich für responsive Textgrößen sind.

Der Code zeigt mehrere Absätze, die den gleichen letter-spacing auf Text mit zunehmender Schriftgröße setzen. Wir bieten eine Funktionalität zum Umschalten zwischen einem Längen- und einem Prozentwert für letter-spacing, sodass 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-letter-spacing und einem Prozent-letter-spacing umzuschalten.

<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 zunehmender font-size-Werte auf jeden nachfolgenden Absatz:

html {
  font-family: Arial, Helvetica, 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 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ängenbuchstabenabstand bei größerer Schriftgröße in Ordnung aussieht, jedoch nicht bei kleineren Schriftgrößen. Schalten Sie nun das Kontrollkästchen um und bemerken 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 letter-spacing-Attribut