Kerning: Was es ist und wie der Buchstabenabstand eingestellt wird

Was ist Kerning in der Typografie

Kerning ist der Prozess der manuellen oder automatischen Anpassung des Abstands zwischen bestimmten Zeichenpaaren zur Beseitigung optischer Artefakte. Das Problem entsteht, weil jeder Buchstabe eine einzigartige Geometrie hat: A hat einen Scheitelpunkt, V eine rechte Neigung, T einen breiten Balken. Wenn solche Buchstaben nebeneinander stehen, wirkt der Abstand zwischen ihren Konturen ungleichmäßig, obwohl die eingestellte Breite (set width) gleich ist.

Schrift-Kerning-Tabellen enthalten Zeichenpaare mit voreingestellten Anpassungswerten. Eine gute Schriftart kann 300 bis 2000 Kerning-Paare haben. Professionelle Schriftarten — wie SF Pro von Apple oder Roboto von Google — enthalten sorgfältig ausgearbeitete Kerning-Tabellen, die alle möglichen Kombinationen lateinischer und kyrillischer Buchstaben abdecken. Laut dem Fontshop Guide to Kerning ist die Qualität der Kerning-Tabellen einer der Hauptindikatoren für eine professionelle Schrift.

Der visuelle Effekt von Kerning ist besonders in Überschriften, Logos und großen Schriftgraden (ab 24 pt) sichtbar. In kleinen Texten (12–14 pt) sind die Buchstabenabstände enger und Kerning ist weniger auffällig, obwohl es immer noch wirkt. Webbrowser und mobile Betriebssysteme wenden standardmäßig integriertes Kerning an, aber der Entwickler kann es für bestimmte Designs deaktivieren oder anpassen.

Kerning vs Tracking: Hauptunterschiede

Anfängliche Entwickler verwechseln oft Kerning und Tracking, aber das sind grundlegend unterschiedliche typografische Parameter. Kerning arbeitet auf Zeichenpaarebene und passt den Abstand nur zwischen bestimmten Kombinationen an, wo die Buchstabengeometrie ein optisches Ungleichgewicht erzeugt. Tracking (Zeichenabstand) ändert den Abstand zwischen allen Zeichen des ausgewählten Fragments gleichmäßig — er wird gleichmäßig erhöht oder verringert.

Wann wird Tracking verwendet: zur Verbesserung der Lesbarkeit von kleinem Text (positives Tracking), zur Erstellung von Akzent-Überschriften (negatives Tracking), zum Stylen von Text im Interface-Design. Tracking wird als numerischer Wert festgelegt und auf jedes Zeichen angewendet, einschließlich bereits kerrnter Paare — Kerning-Korrekturen bleiben erhalten, aber eine globale Verschiebung wird darüber hinzugefügt.

Wichtige Regel: Bei negativem Tracking (Komprimierung) achten Sie auf Kerning-Paare — sie können unerwünschte Buchstabenüberlappungen erzeugen. In CSS wird die Eigenschaft letter-spacing oberhalb der Kerning-Tabelle der Schrift angewendet, und bei starker Komprimierung (letter-spacing: -1px) können Kerning-Korrekturen zur Verschmelzung von Zeichen führen.

Kerning-Implementierung auf iOS mit NSAttributedString

Auf iOS wird Kerning über das Attribut .kern in NSAttributedString gesteuert. Der Attributwert ist ein Float, wobei eine positive Zahl den Abstand vergrößert, eine negative Zahl ihn verkleinert und 0 Kerning deaktiviert. Der Standardwert ist nil, was die Verwendung der Kerning-Tabelle der Schrift bedeutet. Die primäre API für die Arbeit mit Kerning ist NSMutableAttributedString mit dem Attribut, das zu einem Textbereich hinzugefügt wird.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Kerning aktivieren (verwendet Schrift-Tabelle)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Auf UILabel anwenden
label.attributedText = attributedText

Standardwert .kern = nil aktiviert Kerning aus der Schrift-Tabelle. Wenn Sie Kerning vollständig deaktivieren müssen, setzen Sie .kern = 0. Die Werte 0.0 und nil sind unterschiedliche Zustände: nil verwendet die Tabelle, 0 setzt alle Kerning-Paare zwangsweise auf null. Laut dem Apple Text Programming Guide ist das explizite Setzen von 0 nützlich für monospaced Text oder Fälle, in denen Kerning stört — zum Beispiel bei Schaltflächen mit fester Breite.

SwiftUI stellt den Modifikator .kerning() für Text bereit. Im Gegensatz zu UIKit wird Kerning in SwiftUI auf View-Ebene festgelegt, nicht auf einer attribuierten Zeichenfolge. Der Modifikator akzeptiert ein CGFloat und wird auf den gesamten Text innerhalb des Text-Blocks angewendet. Für partielles Kerning in SwiftUI wird eine Kombination des +-Operators auf Text und einzelner Modifikatoren verwendet.

struct KerningView: View {
    var body: some View {
        Text("Überschrift mit Kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Leistung: NSAttributedString mit einem Kerning-Attribut berechnet Zeichenpositionen während des Renderns neu. Bei statischem Text geschieht dies einmal. Bei dynamischem Text (sich ändernder Text in UICollectionView) — jedes Mal, wenn er sich ändert. Die Verwendung eines großen Bereichs mit Kerning bei langen Zeichenfolgen (über 500 Zeichen) kann die FPS beim Scrollen reduzieren.

Kerning-Konfiguration auf Android mit letterSpacing

Auf Android wird Kerning über die Eigenschaft letterSpacing in TextView und XML-Layouts gesteuert. Das Attribut ist vom Typ Float und fungiert als Multiplikator der em-Größe der Schrift. Der Wert 0 entspricht Standard-Kerning, positive Werte vergrößern den Abstand, negative verkleinern ihn. letterSpacing ist ab API Level 21 (Android 5.0 Lollipop) verfügbar.

Implementierung über SpannableString ermöglicht die Anwendung von Kerning auf einen Teil einer Zeichenfolge anstatt auf den gesamten Text. Die Klasse ScaleXSpan oder ein benutzerdefinierter ReplacementSpan wird für präzise Kontrolle verwendet. Laut dem Android Developer Guide skaliert ScaleXSpan Zeichen horizontal und simuliert so Änderungen des Zeichenabstands, bietet aber keine direkte Kontrolle über Kerning-Paare.

// Im XML-Layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programmatisch in Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Einschränkung: Android unterstützt Kerning-Tabellen nicht direkt — letterSpacing funktioniert als Tracking für alle Zeichen. Für Paar-Kerning auf Android werden Schriften mit eingebauten Kerning-Tabellen (OpenType GPOS feature kern) verwendet. Die Unterstützung hängt von der OS-Version und der Rendering-Engine ab: Auf Android 10+ wird Minikin mit vollständiger OpenType-Feature-Unterstützung verwendet, auf älteren Versionen HarfBuzz mit Einschränkungen. Empfehlung: Testen Sie die Kerning-Darstellung auf Geräten mit Android unter 8.0.

Kerning in der Webentwicklung mit CSS

Im Web wird Kerning über die CSS-Eigenschaft font-kerning gesteuert, die die eingebauten Kerning-Tabellen der Schrift aktiviert oder deaktiviert. Werte: auto (Browser entscheidet), normal (Kerning aktiviert), none (Kerning deaktiviert). Die Eigenschaft wird seit 2016 von allen modernen Browsern unterstützt. Laut MDN Web Docs gilt font-kerning nur für OpenType-Schriften mit einer Kerning-Tabelle.

Die CSS-Eigenschaft letter-spacing ist das Gegenstück zum Tracking, wird aber auch für Kerning-ähnliche Effekte verwendet. Im Gegensatz zu font-kerning ändert letter-spacing den Abstand zwischen allen Zeichen gleichmäßig, ohne Berücksichtigung von Kerning-Paaren. Wenn beide Eigenschaften verwendet werden, wird zuerst font-kerning angewendet, dann fügt letter-spacing eine gleichmäßige Verschiebung hinzu.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

TypeScript-Utility zur Berechnung des optimalen letter-spacing unter Berücksichtigung von Kerning kann die Kerning-Tabelle der Schrift über die Canvas API analysieren. In der Praxis verlassen sich Webentwickler jedoch auf font-kerning: normal, das in den meisten Fällen optimale Ergebnisse liefert. Eine zusätzliche Anpassung von letter-spacing ist nur für Design-Akzente erforderlich — zum Beispiel auf Landingpages mit großer Typografie.

Praktische Empfehlungen zur Kerning-Konfiguration

Kerning ist ein Feinabstimmungswerkzeug, und seine falsche Anwendung verschlechtert die Lesbarkeit. Erste Regel: Ändern Sie Kerning nicht für Fließtext. Die Kerning-Tabellen professioneller Schriften enthalten bereits optimale Werte für 12–16pt-Größen. Ein Eingriff in das Kerning von Fließtext führt zu Ungleichmäßigkeit und visuellem Rauschen.

Zweite Regel: Verwenden Sie für Überschriften ab 24pt positives Kerning (0.5–1.5 pt je nach Schriftart). Großer Text benötigt mehr Buchstabenabstand für die Lesbarkeit. Schriften mit niedriger x-Höhe (z. B. Didot) benötigen mehr Kerning als Schriften mit hoher x-Höhe (z. B. Helvetica). Referenzdaten: In der iOS-App Apple Music verwenden Überschriften ein Kerning von 0.8 pt.

Dritte Regel: Testen Sie Kerning immer an echten Zeichenfolgen, nicht an Lorem Ipsum. Unterschiedliche Zeichenkombinationen erzeugen unterschiedliche visuelle Effekte. Achten Sie besonders auf Paare mit Vokalen und Konsonanten mit hervorstehenden Elementen: AV, Te, To, Wa, LT. Bei negativem Kerning achten Sie auf die Paare fi, fl, fj — in manchen Schriften können sie ohne Ligatur verschmelzen.

Barrierefreiheitsaspekt: Benutzer mit Legasthenie lesen Text mit leicht positivem Kerning (0.3–0.5 pt) besser. iOS und Android unterstützen Barrierefreiheitseinstellungen, die das App-Kerning überschreiben können. Verwenden Sie UIFontDescriptor mit Dynamic Type und berücksichtigen Sie Kerning in den Barrierefreiheitseinstellungen über UIAccessibility. Wichtig: Blockieren Sie nicht die systemweiten Kerning-Einstellungen — dies verstößt gegen die WCAG 2.2 Richtlinie 1.4.12 zur Textanpassung.