Kerning: Lücken zwischen Buchstaben korrigieren

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.

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 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.

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. 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. 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. 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. 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. 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. 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.

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 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.

/* 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;
}

Willst du den Abstand einer ganzen Zeile statt eines Paars ändern, ist das Tracking, gesetzt mit letter-spacing. Tracking und Kerning erklärt, wie beide mit dem Zeilenabstand zusammenspielen, und Buchstabenabstand gibt Startwerte für Versalien, Labels und Headlines.

Mehr dazu, wie große Schrift gewollt aussieht, findest du unter Display-Schriften und Typografie-Grundlagen. 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.