CSS letter-spacing Eigenschaft
Erfahren Sie, wie die CSS-Eigenschaft letter-spacing den Abstand zwischen Buchstaben/Zeichen definiert. Mit Werten und Beispielen.
Die CSS-Eigenschaft letter-spacing steuert den horizontalen Abstand (auch als Tracking bezeichnet) zwischen den Zeichen eines Textes. Sie fügt Abstand zusätzlich zum Standardabstand hinzu, den eine Schriftart bereits bietet, anstatt ihn zu ersetzen.
Dies ist besonders nützlich für die Feinabstimmung von Überschriften, Großbuchstaben-Labels und Logo-artigem Text, bei dem das Standard-Tracking zu eng oder zu weit wirkt. Bei langen Fließtextabsätzen sollte der Wert auf normal belassen werden — selbst kleine Anpassungen beeinträchtigen die Lesbarkeit.
letter-spacing akzeptiert einen <length>-Wert (px, em, rem usw.) oder das Schlüsselwort normal. Längenwerte können negativ sein, wodurch Zeichen näher zusammengerückt werden. Da der Wert eine Länge (kein Verhältnis) ist, ist die Verwendung von em praktisch: Der Abstand skaliert dann mit der Schriftgröße des Elements.
Die Eigenschaft ist animierbar, sodass sich der Abstand bei einer definierten transition gleichmäßig ändert.
Die Geschwindigkeit des Übergangs wird durch die animation-timing-function festgelegt.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Ja. |
| Version | CSS1 |
| DOM-Syntax | object.style.letterSpacing = "5px"; |
Syntax
Syntax der CSS-Eigenschaft letter-spacing
letter-spacing: normal | length | initial | inherit;Beispiel der letter-spacing-Eigenschaft:
Beispiel der CSS-Eigenschaft letter-spacing mit normalen und negativen Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Ergebnis
Im obigen Beispiel verwendet der erste Absatz den standardmäßigen normal-Abstand, der zweite setzt letter-spacing: 4px (Zeichen werden auseinandergezogen), und der dritte setzt einen negativen Wert, -4px (Zeichen werden zusammengezogen, überlappen sich sogar).
Im nächsten Beispiel wird letter-spacing mit der Eigenschaft transition kombiniert. Fahren Sie mit der Maus über den Text, um den animierten Abstand zu sehen.
Beispiel der letter-spacing-Eigenschaft mit der transition-Eigenschaft:
Beispiel der CSS-Eigenschaft letter-spacing mit normalen und em-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Wann letter-spacing verwendet werden sollte
- Großbuchstaben-Überschriften und Labels. Text in Großbuchstaben wird von den meisten Schriftarten eng gesetzt; das Hinzufügen von
0.05em–0.1emAbstand verbessert die Lesbarkeit und verleiht ein gepflegtes, „gestaltetes" Erscheinungsbild. - Kapitälchen und Abkürzungen. Ein wenig zusätzliches Tracking trennt die dichten Großbuchstaben-Glyphen.
- Hover- und Fokuseffekte. Da die Eigenschaft animierbar ist, erzeugt ein Übergang des Abstands einen subtilen Enthüllungseffekt bei Links und Buttons.
- Für Fließtext vermeiden. Das Aufweiten laufender Absätze verlangsamt das Lesen. Lassen Sie Langtext bei
normal.
Weitere Informationen
- Moderne Browser unterstützen vollständig Subpixel-(Bruch-)Werte wie
0.5px. - Negative Werte verringern den Abstand und können dazu führen, dass Zeichen sich überlappen — nützlich für eng gesetzte Logo-Überschriften, aber sorgfältig testen.
- Mit
emskaliert der Abstand mit derfont-sizedes Elements; mitpxbleibt er unabhängig von der Schriftgröße fest. letter-spacingwird vererbt, sodass untergeordnete Elemente den Wert übernehmen, sofern sie ihn nicht aufnormalzurücksetzen.- Diese Eigenschaft steuert den Abstand zwischen einzelnen Zeichen; um stattdessen ganze Wörter zu beabstanden, verwenden Sie word-spacing.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Bedeutet, dass keine zusätzlichen Abstände zwischen den Zeichen vorhanden sind. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| length | Definiert einen zusätzlichen Abstand zwischen den Zeichen. Negative Werte sind erlaubt. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |