Letter-Spacing-Umrechner (Tracking → CSS)
Wandeln Sie Photoshop/Illustrator-Tracking oder Figma-%-Laufweite in CSS-em- und px-Werte um.
1.134 Aufrufe
Vorschau
TYPOGRAPHY SPACING EXAMPLE
Drei Programme, drei Einheiten
Adobe-Programme messen Tracking in Tausendstel eines em: CSS em = Tracking ÷ 1000, also Tracking 50 → letter-spacing: 0.05em. Figmas Prozentwert ist einfach em × 100: 5 % = 0,05em. Der px-Wert hängt zusätzlich von der Schriftgröße ab: 0,05em bei 16 px sind 0,8 px, dieselben 0,05em bei 48 px dagegen 2,4 px. Geben Sie ein, welchen Wert Ihre Designdatei auch immer anzeigt — die anderen aktualisieren sich sofort, sodass beim Übergeben einer Spezifikation von Figma an einen Entwickler nie von Hand gerechnet werden muss. Sketch und XD folgen derselben em-basierten Logik wie CSS, weshalb sich das em-Feld in einer gemischten Design-Toolchain meist am besten als gemeinsamer Standard eignet.
Gut zu wissen
"Tracking" ist ein Begriff aus der Fotosatz-Ära der 1960er- und 70er-Jahre, von Geräten wie Letraset-Reibebuchstaben und frühen Fotosetzmaschinen, bei denen das Anpassen des Buchstabenabstands bedeutete, physisch zu verschieben, wie Zeichen auf einem Filmstreifen oder Übertragungsbogen saßen. Der Begriff wird häufig mit Kerning verwechselt, beide sind aber nicht dasselbe: Tracking fügt einer ganzen Textauswahl gleichmäßigen Abstand hinzu, während Kerning nur den Abstand zwischen einem einzelnen Buchstabenpaar anpasst — etwa den sich überlappenden Formen in "AV" oder "To" —, um eine unschöne optische Lücke zu beheben, die einheitlicher Abstand nicht lösen kann. In CSS gibt es zudem eine praktische Falle: letter-spacing fügt auch nach dem allerletzten Zeichen Abstand hinzu, wodurch zentrierter oder rechtsbündiger Text durch diese unsichtbare, von niemandem einberechnete Nachlauflücke leicht unausgewogen wirken kann. Negative Tracking-Werte sind genauso gültig wie positive und bei sehr großen Überschriften üblich, wo der Standardabstand locker wirkt, sobald Buchstaben weit über ihre vorgesehene Punktgröße hinaus vergrößert werden.
- Große Display-Überschriften: −10 bis −30 Tracking (für visuelle Wirkung enger gesetzt)
- Kleine Versalien-Labels: +50 bis +200 Tracking (für Lesbarkeit geöffnet)
- Fließtext: meist bei 0 belassen — der Standardabstand ist bereits vom Schriftgestalter fein abgestimmt
- Logotypes und Wortmarken: oft pro Buchstabenpaar individuell nachjustiert, über das hinaus, was ein einzelner Tracking-Wert leisten kann
Häufig gestellte Fragen
Figma zeigt die Laufweite in px an — was dann?
Dann ist es bereits der CSS-px-Wert; geben Sie ihn bei korrekt gesetzter Schriftgröße in das px-Feld ein und lesen Sie das em-Äquivalent für CSS ab, das über verschiedene Schriftgrößen hinweg sauber skaliert. Figma unterstützt je nach Dateieinstellung tatsächlich sowohl Prozent- als auch px-Einheiten für die Laufweite — prüfen Sie also, welche Ihr Designsystem verwendet, bevor Sie Werte an die Entwicklung übergeben.
Warum brauchen Großbuchstaben positive Laufweite?
Versalien sind so gezeichnet, dass sie bequem neben Kleinbuchstaben mit deren Ober- und Unterlängen stehen; solo gesetzt, ohne ausgleichende Kleinbuchstaben, wirken sie optisch gedrängt. +5 % bis +15 % (Tracking 50-150) ist die klassische Lösung für komplett großgeschriebene Labels, Navigationspunkte und Überschriften-Kickers — sie öffnet die Buchstabenformen gerade so weit, dass sie sich auf einen Blick angenehm lesen lassen.
Was ist der Unterschied zwischen Tracking und Kerning?
Tracking fügt einem ganzen Textabschnitt einheitlichen Abstand hinzu — einem Wort, einer Zeile oder einer kompletten Auswahl. Kerning passt nur den Abstand zwischen einem einzigen Paar benachbarter Buchstaben an, etwa "AV" oder "To", deren Formen sich sonst überlappen oder eine merkwürdige optische Lücke hinterlassen würden. Auch CSS behandelt beides getrennt: letter-spacing steuert das Tracking, während font-kerning (meist auf "normal" belassen) das paarweise Kerning aus der eingebauten Kerning-Tabelle der Schrift steuert.
Warum wirkt zentrierter Text mit letter-spacing leicht schief?
CSS letter-spacing fügt auch nach dem letzten Zeichen Abstand hinzu — eine Eigenheit der Spezifikation, die viele Entwickler überrascht. Bei zentriertem oder rechtsbündigem Text verschiebt diese unsichtbare Nachlauflücke die optische Mitte, sodass der Text leicht zu weit links zu stehen scheint. Eine gängige Lösung ist ein kleiner negativer margin-right am Element, ungefähr in Höhe des letter-spacing-Werts.
Woher kommt der Begriff "Tracking"?
Er stammt aus der Fotosatz-Ausrüstung der 1960er- und 70er-Jahre — Geräten wie Letraset-Übertragungsbögen und Fotosetzmaschinen, bei denen das Anpassen des Zeichenabstands buchstäblich bedeutete, physisch zu verschieben, wie Zeichen über einen Filmstreifen oder Übertragungsbogen "getrackt" wurden. Der Begriff überlebte den Übergang zum digitalen Schriftsatz und wurde schließlich in Werkzeugen wie Photoshop und Illustrator zum Standardwort für Buchstabenabstand, lange nachdem die physischen Maschinen, die er ursprünglich beschrieb, verschwunden waren.
Ähnliche Tools
Problem melden
Letter-Spacing-Umrechner (Tracking → CSS)
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!