Der Abstand zwischen den Buchstaben ist eine der unscheinbarsten Stellschrauben der Typografie – und eine der wirksamsten. Die ursprüngliche Fassung dieses Beitrags aus dem Jahr 2006 nannte ihn einen Effekt, der „im Printbereich schon häufig verwendet wird“, im Internet aber noch einen Hingucker darstellt. Wir haben den Beitrag erhalten und um den heutigen Stand ergänzt.
Der Stand von damals
Der Beitrag beschrieb zwei Wege, den Zeichenabstand zu verändern.
Im Grafikprogramm, wo sich der Wert in den Textoptionen positiv oder negativ einstellen ließ. Der Text wurde dann als Bild in die Seite eingebunden. Diesen Weg beschrieb der Beitrag ausführlich, mit zwei Beispielabbildungen: einmal derselbe Text mit Zeichenabstand −1, einmal mit −2.
Per CSS, für echten Text auf der Seite:
.text {
letter-spacing: -1px;
}
Dazu drei Beobachtungen, die sämtlich bis heute gelten:
- Serifenlose Schriften eignen sich am besten für den Effekt.
- Je größer der Text, desto stärker die Wirkung – und desto genauer lässt sich der Abstand einstellen.
- Bei manchen Schriften klappt es nicht in allen Größen. Der Beitrag hatte dafür eigens eine Tabelle angelegt und stellte fest, dass es „bei zwei Kombinationen zu einem Problem kommt, da so der Text kaum zu entziffern ist.“
Den umgekehrten Weg erwähnte er ebenfalls: ein positiver Wert wie letter-spacing: 5px für gesperrten Text.
Was sich geändert hat
Pixel sind die falsche Einheit
Der wichtigste Unterschied zur alten Fassung. Ein fester Pixelwert bedeutet, dass die Verengung bei kleiner Schrift verhältnismäßig viel zu stark und bei großer Schrift zu schwach ausfällt – genau das Problem, das der alte Beitrag mit seiner Tabelle dokumentierte, ohne die Ursache zu benennen.
Die Lösung ist em: Die Einheit bezieht sich auf die Schriftgröße des Elements und skaliert damit automatisch mit.
/* alt: bricht bei manchen Groessen */
h1 { font-size: 42px; letter-spacing: -1px; }
h2 { font-size: 28px; letter-spacing: -1px; } /* verhaeltnismaessig zu viel */
/* heute: gleiche Wirkung in jeder Groesse */
h1, h2 { letter-spacing: -0.02em; }
Als Anhaltspunkt für die Umrechnung: −1 Pixel bei 42 Pixel Schriftgröße entspricht etwa −0,024em.
Ein Vorzeichen, das von der Größe abhängt
Aus der Beobachtung des Originals – große Schrift verträgt mehr Verengung – ist eine Regel geworden, die in fast jedem Designsystem steht:
- Große Überschriften: leicht negativ, etwa −0,02em bis −0,03em. Bei großer Schrift wirken die Standardabstände zu luftig, der Text zerfällt.
- Fließtext: unverändert lassen. Schriften sind für ihre Lesegröße gezeichnet – jede Änderung verschlechtert dort die Lesbarkeit.
- Kleine Versalien und Beschriftungen: leicht positiv, etwa 0,05em bis 0,1em. Großbuchstaben stehen im Fließsatz zu eng beieinander.
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; letter-spacing: -0.015em; }
p { font-size: 1.125rem; letter-spacing: normal; }
.label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em; /* Versalien brauchen Luft */
}
Der Effekt braucht keine Grafik mehr
Der Grafikweg des Originals war nicht nur umständlich, sondern hatte drei Nachteile, die damals in Kauf genommen wurden: Der Text war nicht markierbar, nicht durchsuchbar und für Suchmaschinen unsichtbar. Da beliebige Schriften heute per Webfont eingebunden werden können, entfällt der Grund für diesen Umweg vollständig.
Was der Beitrag nicht kannte: Kerning
letter-spacing verändert alle Abstände gleichmäßig. Davon zu unterscheiden ist das Kerning – die in der Schriftdatei hinterlegte Feinabstimmung für einzelne Buchstabenpaare. Ein großes V neben einem kleinen a braucht weniger Abstand als zwei gerade Buchstaben, sonst entsteht ein sichtbares Loch.
h1 {
font-kerning: normal;
font-variant-ligatures: common-ligatures;
}
Ein Detail, das in der Praxis oft übersehen wird: Ein negativer letter-spacing-Wert wird zusätzlich zum Kerning angewendet. Wer stark verengt, macht damit die Feinabstimmung der Schrift zunichte – die Löcher, die das Kerning schließen sollte, tauchen wieder auf. Das ist die technische Erklärung für das Problem, das der alte Beitrag empirisch feststellte.
Zwei Fälle, in denen es schiefgeht
Gesperrte Schrift ohne Ausgleich rechts. Ein positiver Wert wird auch hinter den letzten Buchstaben gesetzt. Bei zentriertem oder rechtsbündigem Text verschiebt das die optische Mitte:
.gesperrt {
letter-spacing: 0.15em;
margin-right: -0.15em; /* den Abstand hinter dem letzten Zeichen ausgleichen */
}
Schreibschriften. Bei Schriften, deren Buchstaben verbunden sind, reißt jede Änderung des Zeichenabstands die Verbindungen auseinander. Der Hinweis des Originals, serifenlose Schriften seien am besten geeignet, deutet in dieselbe Richtung.
Fazit
Der Beitrag von 2006 hat den Effekt richtig beschrieben und seine Grenzen richtig beobachtet – die Abhängigkeit von Schriftart und Schriftgröße, die Eignung serifenloser Schriften, das Ausprobieren als Methode. Was fehlte, war die Erklärung: dass eine feste Pixelangabe bei unterschiedlichen Schriftgrößen zwangsläufig unterschiedlich wirkt.
Mit em statt px verschwindet dieses Problem – und der Effekt, der damals ein Hingucker war, ist heute stiller Bestandteil sauberer Typografie.
Bei Typografie und Gestaltung Ihrer Website beraten wir Sie als Webdesign-Agentur gerne.
Kommentare