Online Tool Store
Letter-Spacing-Vorschau
Testen Sie den Buchstabenabstand in px, em oder rem mit Schriftart-, Stärke- und Textumwandlungs-Optionen und kopieren Sie das CSS. Läuft im Browser.
Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
So funktioniert die Letter-Spacing-Vorschau
- Geben Sie Ihren Vorschautext ein und passen Sie Buchstabenabstand, Schriftgröße, Schriftstärke, Schriftart und Textumwandlung an.
- Wechseln Sie die Abstandseinheit zwischen em, px und rem, passend zu Ihrem Stylesheet.
- Beobachten Sie, wie sich die Live-Vorschau beim Ziehen des Abstands-Reglers aktualisiert.
- Kopieren Sie die resultierenden CSS-Deklarationen in Ihr Stylesheet, oder klicken Sie auf Zurücksetzen.
Häufig gestellte Fragen
Wofür wird letter-spacing verwendet?
Um den Abstand zwischen Zeichen (Laufweite) anzupassen, die Lesbarkeit zu verbessern, Überschriften hervorzuheben oder einen bestimmten typografischen Stil wie breit gesetzte Großbuchstaben-Labels zu erreichen.
Was ist ein typischer letter-spacing-Bereich?
Kleine negative Werte (wie -0.02em) verengen große Anzeigetexte, während positive Werte (0.05em bis 0.2em) für Großbuchstaben-Labels und Badges üblich sind. Sehr breiter Abstand (0.3em+) wird für stilistische Betonung genutzt.
Beeinflusst die Schriftstärke, wie letter-spacing aussieht?
Ja - fettere Schriftschnitte haben von Natur aus breitere Zeichenformen, sodass derselbe letter-spacing-Wert je nach gewählter Stärke und Größe enger oder weiter wirken kann.
Kann ich das CSS direkt in mein Projekt kopieren?
Ja - die erzeugten Deklarationen für letter-spacing, font-size, font-weight, font-family und text-transform sind fertig zum Einfügen in Ihr Stylesheet.
Sollte letter-spacing in px, em oder rem angegeben werden?
em ist die gängigste Wahl, weil es sich an der eigenen font-size des Elements orientiert, sodass die Laufweite proportional bleibt, wenn der Text skaliert wird. rem skaliert stattdessen mit der Root-Schriftgröße, was nützlich ist, wenn der Abstand über verschiedene Textgrößen hinweg konsistent bleiben soll. px ist am vorhersehbarsten, skaliert aber überhaupt nicht. Dieses Tool lässt Sie alle drei vorschauen und kopieren.
Welcher letter-spacing eignet sich am besten für Großbuchstaben?
Großbuchstaben-Labels und Buttons wirken meist besser lesbar mit etwas breiterer Laufweite (etwa 0.05em bis 0.15em), um die enge Anordnung der Großbuchstaben auszugleichen. Nutzen Sie die Textumwandlung, um Ihren Text vorab in Großbuchstaben zu prüfen.
Wie wir abschneiden
| Feature | Online Tool Store | Letter-Spacing-Rechner | Einheiten-Umrechner |
|---|---|---|---|
| Live-Regler-Vorschau | ✓ | ✓ | ✗ |
| em / px / rem Einheitenwechsel mit korrekter Umrechnung | ✓ | ✗ | ✓ |
| Schriftartauswahl in der Live-Vorschau | ✓ | ✗ | ✗ |
| Textumwandlungs-Vorschau (Großbuchstaben/Kleinbuchstaben/Anfangsbuchstaben) | ✓ | ✗ | ✗ |
| Sofort kopierbares CSS | ✓ | ✓ | ✓ |
Praktisch, um den exakten Laufweitenwert für eine Überschrift oder einen Button-Text zu finden, bevor Sie ihn ins CSS schreiben.