# Kerning: Lücken zwischen Buchstaben korrigieren

[Canonical HTML page](https://gradiently.design/de/guide/kerning)

Die meisten Texte brauchen keinen manuellen Eingriff, denn gute Schriften bringen ihr eigenes Kerning mit. Große Headlines und Wortmarken sind anders: In dieser Größe fällt jede unschöne Lücke auf. So findest und behebst du sie.

## The short version

- Kerning ist die Anpassung des Abstands zwischen einem bestimmten Buchstabenpaar, etwa A und V oder T und o.
- Gut gemachte Schriften enthalten Hunderte oder sogar Tausende Kerning-Paare, deshalb braucht normaler Fließtext selten manuelles Kerning.
- Manuelles Kerning zählt am meisten bei großen Headlines, Logos und Wortmarken, wo ungleiche Abstände sichtbar werden.
- Ziel des Kernings ist gleichmäßiger optischer Raum zwischen Buchstaben, nicht gleicher gemessener Abstand.
- In CSS schaltet `font-kerning: normal` das eingebaute Kerning einer Schrift ein, und Browser wenden es meist ohnehin standardmäßig an.

**Kerning** ist die Anpassung des Abstands zwischen zwei bestimmten Buchstaben, damit ein Wort gleichmäßig gesetzt wirkt. Manche Formpaare hinterlassen ein Loch, wenn sie nebeneinanderstehen: die Diagonale eines A neben der Diagonale eines V, der Überhang eines T über einem kleinen o. Kerning rückt solche Paare näher zusammen oder schiebt hin und wieder ein gedrängtes Paar auseinander, bis die Lücken für das Auge gleich aussehen. Es unterscheidet sich vom Tracking, das den Abstand aller Buchstaben einer Zeile auf einmal verändert.

## Warum manche Buchstabenpaare Kerning brauchen

Jeder Buchstabe einer Schrift sitzt in einer unsichtbaren Box mit etwas eingebautem Raum an jeder Seite. Das funktioniert bei den meisten Kombinationen: n neben o, h neben e. Es versagt dort, wo Formen zu einer Seite offen sind. Diagonalen, überhängende Arme und runde neben geraden Buchstaben erzeugen Weißräume, die wie ein fehlender Buchstabe wirken.

| Paar | Warum es klafft | Übliche Lösung |
| --- | --- | --- |
| AV, VA, AW, WA | Zwei Diagonalen lehnen sich voneinander weg | Deutlich zusammenrücken |
| To, Ta, Te, Ty | Der Arm des T hängt über leerem Raum | Den Kleinbuchstaben unter den Arm schieben |
| LT, LY, LV | Der Fuß des L lässt darüber ein Loch | Zusammenrücken, oft deutlich |
| Yo, Ya, Wo, Vo | Diagonaler Versal über rundem Kleinbuchstaben | Einrücken wie bei den T-Paaren |
| P., F., T., Y. | Satzzeichen sitzt unter einem Überhang | Punkt oder Komma heranziehen |
| r und n, r und m | Können bei engem Satz zu einem Buchstaben verschmelzen | Leicht öffnen, wenn sie sich berühren |
| f gefolgt von ), ? oder ’ | Der Haken des f kollidiert | Ein wenig auseinanderschieben |

Die Paare, die die meisten Kerning-Probleme verursachen. Schriften gleichen viele davon schon aus; prüfe sie in Headline-Größe trotzdem nach Augenmaß.

Der Fall r und n ist die Quelle eines alten Setzerwitzes: Setzt du das Wort „kerning“ zu eng, liest es sich als „keming“. Eine gute Erinnerung daran, dass Kerning in beide Richtungen wirkt.

## Wann du von Hand kernen solltest

Gute Schriften kommen mit einer Kerning-Tabelle, einer Liste von Paaren und dem Maß der Anpassung, sodass Fließtext und die meiste Oberflächenschrift bereits versorgt sind. Manuelles Kerning lohnt sich, wenn Schrift groß oder dauerhaft wird.

- **Headlines über etwa 60 px am Bildschirm**, wo eine Lücke von 2 px zum sichtbaren Loch wird.
- **Logos und Wortmarken**, die tausendfach in jeder Größe gesehen werden. [Wortmarken gestalten](https://gradiently.design/de/guide/wordmark-design) geht tiefer.
- **Reine Versalien**, wo Diagonalen wie A, V, W und Y öfter aufeinandertreffen.
- **Plakat- und Vorschauzeilen**, wo drei oder vier Wörter das ganze Design tragen.
- **Gratis- oder Display-Schriften mit dünnen Kerning-Tabellen**, die häufige Paare womöglich unangepasst lassen.

Ein Hochformat-Plakat mit dem einzelnen Wort WAVE, groß in Versalien mit gleichmäßigem Buchstabenabstand

Ein Wort fast nur aus Diagonalen, der schwierigste Fall für den Abstand. Prüfe vor dem Export, dass W, A und V gleichmäßig ineinandergreifen.

Ein Hochformat-Eventpost mit der Headline „Heute Abend im Hof“, groß über einem Verlauf gesetzt

To, Th und Ya kommen alle in einer kurzen Headline vor. In dieser Größe lohnt sich vor dem Export ein Blick auf jedes Paar.

## So kernst du Headline oder Wortmarke nach Augenmaß

Das Ziel ist gleichmäßige *Fläche* zwischen Buchstaben, nicht gleicher gemessener Abstand. Zwei gerade Stämme wie H und I brauchen den meisten Raum zwischen sich. Ein Gerader neben einem Runden wie H und O braucht etwas weniger. Zwei Runde wie O und C brauchen am wenigsten. Diagonalen und Überhänge brauchen die stärkste Korrektur.

1. **Erst das Tracking festlegen** Entscheide über den Gesamtabstand der Zeile, bevor du Paare anfasst. Eine Zeile zu kernen und dann ihr Tracking zu ändern, macht die halbe Arbeit zunichte.
2. **In Dreiergruppen arbeiten** Sieh dir je drei Buchstaben an und passe den mittleren so an, dass die beiden Lücken daneben gleich sind. Dann rutsch einen Buchstaben weiter.
3. **Auf den Kopf stellen** Drehe das Wort um oder betrachte es gespiegelt. Sobald du es nicht mehr lesen kannst, siehst du Formen und Lücken statt Buchstaben.
4. **Verwischen oder blinzeln** Leichte Unschärfe macht aus den Zwischenräumen graue Flecken. Jeder Fleck, der spürbar heller oder dunkler ist als seine Nachbarn, markiert ein Paar zum Korrigieren.
5. **Klein und groß prüfen** Sieh das Wort in der Größe an, in der es eingesetzt wird, und in der kleinsten, in der es erscheint. Eine Wortmarke, die nur in Plakatgröße gekernt wurde, kann in Favicon-Größe verklumpen.
6. **Liegen lassen und noch einmal ansehen** Komm nach einer Pause zurück. Kerning nach Augenmaß driftet, wenn du zu lange starrst, und frische Augen entdecken das Paar, das du zu stark gedrückt hast.

Die meisten Designwerkzeuge lassen dich kernen, indem du den Cursor zwischen zwei Buchstaben setzt und mit einem Tastenkürzel anstupst. In Adobe-Programmen ist die Einheit ein Tausendstel Geviert, ein Wert von minus 40 rückt das Paar also um 4 % der Schriftgröße näher, egal wie groß die Schrift ist.

## Metrisches und optisches Kerning

Viele Layoutwerkzeuge bieten zwei automatische Modi. **Metrisches** Kerning nutzt die Paare, die der Schriftgestalter in die Schrift eingebaut hat. **Optisches** Kerning ignoriert sie und berechnet den Abstand aus den Umrissen jedes Buchstabens. Metrisch ist der bessere Standard für eine gut gemachte Schrift, weil ein Mensch diese Entscheidungen getroffen hat. Optisch kann eine Schrift mit schlechter oder fehlender Kerning-Tabelle retten und hilft, wenn du zwei Schriften in einem Wort mischst.

### Vermeiden

- Fließtext Buchstabe für Buchstabe kernen
- Lücken mit dem Lineal messen
- Kernen, bevor das Tracking gesetzt ist
- So eng ziehen, dass Buchstaben sich berühren
- Dem Abstand einer Gratis-Schrift ungeprüft vertrauen

### Besser so

- Fließtext dem eigenen Kerning der Schrift überlassen
- Nach Augenmaß urteilen, je drei Buchstaben
- Erst Tracking setzen, dann einzelne Paare korrigieren
- Einen Hauch Raum lassen, besonders bei r und n
- AV, To, LT und Yo in jeder Headline prüfen

## Kerning in CSS

Browser wenden das Kerning einer Schrift bei den meisten Texten automatisch an, du kannst es aber ausdrücklich festlegen. Die Eigenschaft [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) schaltet die eingebauten Paare ein oder aus. CSS hat keine Eigenschaft, um ein einzelnes Paar anzupassen. Bei einer einzelnen Headline oder einem Logo packst du deshalb üblicherweise einen Buchstaben in ein Span und stupst ihn mit negativem Margin oder Buchstabenabstand an.

```css
/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}
```

Nimm em-Einheiten für manuelle Korrekturen, damit die Korrektur mit der Schrift skaliert. Kerne nur Headlines von Hand, nie Fließtext.

Willst du den Abstand einer ganzen Zeile statt eines Paars ändern, ist das Tracking, gesetzt mit `letter-spacing`. [Tracking und Kerning](https://gradiently.design/de/guide/tracking-vs-kerning) erklärt, wie beide mit dem Zeilenabstand zusammenspielen, und [Buchstabenabstand](https://gradiently.design/de/guide/letter-spacing) gibt Startwerte für Versalien, Labels und Headlines.

Mehr dazu, wie große Schrift gewollt aussieht, findest du unter [Display-Schriften](https://gradiently.design/de/guide/display-fonts) und [Typografie-Grundlagen](https://gradiently.design/de/guide/typography-basics). Auf einem Verlauf oder strukturierten Hintergrund ist der Abstand nur die halbe Lesbarkeit: Ein gut gekerntes Wort kann trotzdem zerfallen, wo die Farbe dahinter wechselt. Ein Gradiently Mark schiebt seine ruhigste Fläche hinter deine Wörter und wählt pro Zeile helle oder dunkle Tinte, sodass eine sorgfältig gesetzte Headline vom ersten bis zum letzten Buchstaben gleichmäßig lesbar bleibt.

## FAQ

### Was ist Kerning in der Typografie?

Kerning ist die Anpassung des Abstands zwischen zwei bestimmten Buchstaben, etwa A und V, damit ein Wort gleichmäßig gesetzt wirkt.

### Was ist der Unterschied zwischen Kerning und Tracking?

Kerning ändert den Abstand zwischen einem Buchstabenpaar. Tracking ändert den Abstand zwischen allen Buchstaben einer Zeile oder eines Blocks auf einmal.

### Muss ich Fließtext kernen?

Selten. Gute Schriften enthalten eigene Kerning-Paare, die Fließtext gut abdecken. Spar dir manuelles Kerning für Headlines, Logos und große Display-Schrift auf.

### Soll ich metrisches oder optisches Kerning nutzen?

Nimm metrisch für eine gut gemachte Schrift, da ihre Paare vom Schriftgestalter gesetzt wurden. Probiere optisch, wenn das eingebaute Kerning einer Schrift schwach ist oder du Schriften mischst.

### Wie kerne ich Text in CSS?

`font-kerning: normal` schaltet die eingebauten Paare der Schrift ein. Für ein einzelnes Paar packst du einen Buchstaben in ein Span und stupst ihn mit einem kleinen negativen Margin in em-Einheiten an.