Tools Blog

Letter Spacing Tool

Buchstabenabstand, Wortabstand und Zeilenhöhe live kalibrieren mit Preset-Stilen.

6 Presetspx / em / remCSS sofort kopieren

① Buchstabenabstand, Zeilenhöhe und Schriftgröße anpassen ② Live-Vorschau ③ CSS-Werte kopieren

Voreinstellungen
Buchstabenabstand0em
Wortabstand0em
Zeilenhöhe1.6
Schriftgröße (px)16px
Schriftgewicht
Schriftfamilie
Texttransformation

Typography is the art and technique of arranging type. Good spacing creates rhythm, hierarchy, and visual comfort for the reader.

CSS-Ausgabe
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.6;
font-size: 16px;
font-weight: 400;
font-family: DM Sans, sans-serif;
text-transform: none;

Was ist letter-spacing in CSS?

Die CSS-Eigenschaft letter-spacing steuert den horizontalen Abstand zwischen einzelnen Zeichen (in der Drucktypografie "Tracking" genannt). Sie akzeptiert positive oder negative Werte in px, em oder rem. em-Einheiten werden bevorzugt, da der Abstand proportional zur Schriftgröße skaliert.

Die word-spacing-Eigenschaft fügt Abstand zwischen Wörter hinzu, während line-height den vertikalen Rhythmus definiert. WCAG 1.4.12 erfordert, dass kein Inhalt verloren geht, wenn letter-spacing mindestens 0.12em, word-spacing mindestens 0.16em und line-height mindestens 1.5 beträgt.

Häufig gestellte Fragen

Die CSS-Eigenschaft letter-spacing fügt gleichmäßigen Abstand zwischen jeden Buchstaben ein. In der Drucktypografie heißt das "Tracking". Positive Werte spreizen die Buchstaben, negative rücken sie zusammen.
Mit em skaliert der Abstand automatisch mit der Schriftgröße. Zum Beispiel wird letter-spacing: 0.05em bei 16px zu 0.8px, bei 24px jedoch zu 1.2px — die gleiche visuelle Proportion bleibt erhalten.
letter-spacing steuert den Abstand zwischen einzelnen Zeichen. word-spacing fügt horizontalen Abstand zwischen Wörter hinzu. line-height legt den vertikalen Abstand zwischen Textzeilen fest.
Erhöhen Sie letter-spacing bei: (1) Großbuchstabentext — Versalien brauchen extra Tracking (0.05–0.15em); (2) kleinem Text wie Bildunterschriften; (3) großen Display-Überschriften für raffinierteres Erscheinungsbild.
Für Fließtext ist 1.5–1.7 optimal. Überschriften können 1.1–1.3 verwenden. Bildunterschriften funktionieren bei 1.4. WCAG 1.4.12 empfiehlt mindestens 1.5 für Inhaltstext.
Designer nutzen präzise Abstände für: Marken-Styleguides, CSS-Komponentenbibliotheken, redaktionelles Design mit Display-Schriften, WCAG 1.4.12-Barrierefreiheitsprüfungen.
WCAG 2.1 SC 1.4.12 verlangt, dass kein Inhalt verloren geht bei: letter-spacing mindestens 0.12em, word-spacing mindestens 0.16em, line-height mindestens 1.5, Abstand nach Absätzen mindestens 2em.
Verwandte Artikel
CSS 5 Min Lesezeit
px, rem, em, vh: Wann welche CSS-Einheit verwenden
Praktischer Leitfaden zu CSS-Einheiten: Wann px, rem, em, vh und vw verwenden. Mit Barrierefreiheitserklärung und Konvertierungstabelle.

Unser Netzwerk entdecken

ntool.io Kostenlose Netzwerk-Diagnosetools — Ping, Traceroute, DNS-Lookup, Port-Scanner und mehr Besuchen → capops.io Kostenlose Finanzrechner — Zinseszins, Hypothek, Altersvorsorge, Investitionstools und mehr Besuchen →