Tracking in der Mobilentwicklung — Wesen und Einstellung des Zwischenzeichenabstands

Was ist Tracking in der Typografie

Tracking ist die Anpassung des Zwischenzeichenabstands, die gleichmäßig auf alle Zeichen eines Textblocks angewendet wird. Im Gegensatz zum Kerning, bei dem jedes Zeichenpaar eine individuelle Anpassung basierend auf der Kerning-Tabelle der Schriftart erhält, wird Tracking als ein einzelner numerischer Wert für den gesamten Bereich festgelegt. Positives Tracking vergrößert den Abstand (erweiterter Abstand), negatives Tracking verkleinert ihn (verdichteter Abstand).

Der Begriff stammt aus der metallischen Typografie, wo der Zwischenzeichenabstand durch den physikalischen Abstand zwischen den Lettern geregelt wurde. In der digitalen Typografie wird Tracking über der Kerning-Tabelle angewendet: Zuerst wendet die Schriftart ihre eingebauten Kerning-Paare an, dann fügt das System gleichmäßiges Tracking zu allen Zeichen hinzu. Der resultierende Abstand = Kerning + Tracking, was bei aggressiver Textverdichtung zu beachten ist.

Maßeinheiten: Tracking kann in absoluten Einheiten (Punkte, Pixel, Millimeter) und relativen Einheiten (em, Prozent der Schriftgröße) angegeben werden. In der Mobilentwicklung wird Tracking typischerweise in Punkten (iOS) oder sp (Android) als absolute Werte angegeben, im Web in em als relative Werte. Relative Einheiten sind für die Barrierefreiheit vorzuziehen, da sie sich bei Änderung der Schriftgröße durch den Benutzer skalieren.

Tracking und Kerning: grundlegende Unterschiede

Die Verwechslung von Tracking und Kerning ist einer der häufigsten Fehler bei angehenden Designern und Entwicklern. Kerning arbeitet auf Mikroebene — es passt den Abstand zwischen bestimmten Zeichenpaaren (AV, Te, To) basierend auf deren Geometrie an. Tracking arbeitet auf Makroebene — es verschiebt alle Zeichen eines Fragments gleichmäßig, ohne deren Form zu berücksichtigen.

Visueller Effekt: Mit Kerning variieren die Abstände zwischen verschiedenen Zeichenpaaren — zwischen A und V ist er kleiner als zwischen A und I, weil sich die Buchstabenformen gegenseitig ausgleichen. Mit Tracking sind alle Abstände gleich — zwischen A und V, A und I, T und o — überall die gleiche Verschiebung. Dies macht Tracking zu einem Werkzeug für globale Anpassungen und Kerning zu einem Werkzeug für Feineinstellungen.

Kombinierte Verwendung: In der Oberflächentypografie werden Tracking und Kerning zusammen verwendet. Die Schriftart enthält eine Kerning-Tabelle zur grundlegenden Optimierung, und der Entwickler fügt Tracking für Styling oder Barrierefreiheit hinzu. Die Kerning-Tabelle wird zuerst angewendet, dann wird Tracking darübergelegt. Bei negativem Tracking (Verdichtung) können Kerning-Paare unerwünschte Überlappungen erzeugen — überprüfen Sie problematische Kombinationen.

Positives und negatives Tracking: wann verwenden

Positives Tracking vergrößert den Abstand zwischen Zeichen. Es wird verwendet, um die Lesbarkeit von kleinem Text (10–13pt) zu verbessern, bei dem Zeichen bei Standardabstand visuell verschmelzen. Es wird auch in der Barrierefreiheit für Benutzer mit Legasthenie verwendet — ein vergrößerter Zwischenzeichenabstand erleichtert die Buchstabenerkennung. Typische Werte: 0.3–1pt für iOS, 0.02–0.05em für das Web.

Negatives Tracking verkleinert den Abstand zwischen Zeichen. Es wird in Überschriften (ab 24pt) und Akzenttext verwendet, wo dichter Text zusammenhängend und modern wirkt. Große Schriftgrößen vertragen Verdichtung gut, da die Zwischenzeichenabstände visuell groß sind. Typische Werte: von -0.3 bis -1pt. Einschränkung: Bei Tracking unter -1pt können Zeichen überlappen, insbesondere bei Paaren mit hervorstehenden Elementen (fi, fj, TT).

Faustregel: Für jede Schriftgröße gibt es einen Bereich akzeptablen Trackings. Je größer die Schrift, desto weniger Tracking ist für optimale Lesbarkeit erforderlich. Formel: Optimales Tracking ≈ font-weight × 0.01 − font-size × 0.001. Für eine fette Schrift (weight 700) bei 16pt: 700 × 0.01 − 16 × 0.001 = 6,84, was nach Anpassung an die Schriftart etwa 0.5pt positives Tracking ergibt.

Tracking für verschiedene Textarten

Fließtext (14–18pt): Tracking ist nicht erforderlich oder minimal positiv 0.1–0.3pt. Professionelle Schriftarten enthalten bereits optimale Abstände für Fließtext. Jeder Eingriff in das Tracking von Fließtext muss durch Design- oder Barrierefreiheitsanforderungen gerechtfertigt sein. Überschriften (20–36pt): Negatives Tracking von -0.3 bis -0.8pt ist je nach Schriftart und Gewicht akzeptabel. Großbuchstaben (ALL CAPS): Positives Tracking von 0.5–2pt wird empfohlen, da Großbuchstaben in Versalien ohne zusätzlichen Abstand visuell verschmelzen.

Schriftartspezifik: Schriften mit grotesker Geometrie (Helvetica, Inter, SF Pro) vertragen negatives Tracking besser als Serifenschriften (Times, Georgia, PT Serif). Bei Serifenschriften erzeugen die Serifen zusätzliche visuelle Verbindungen zwischen den Buchstaben, und Verdichtung macht den Text unlesbar. Für Serifenschriften wird nur positives Tracking empfohlen.

Implementierung von Tracking auf iOS und Android

Auf iOS wird Tracking über dasselbe .kern-Attribut in NSAttributedString wie Kerning implementiert, mit einem Unterschied: Für Tracking wird ein numerischer Wert ungleich nil angegeben. nil bedeutet Standard-Kerning (aus der Schriftarttabelle), 0 deaktiviert Kerning, jede andere Zahl bedeutet Tracking über der Kerning-Tabelle. Das bedeutet, dass bei .kern = 2 alle Zeichen +2pt Zwischenzeichenabstand zusätzlich zu den eingebauten Kerning-Paaren erhalten.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Positives Tracking +0,8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel mit Tracking
label.attributedText = attributedString

SwiftUI verwendet den .tracking()-Modifikator für Text, der CGFloat akzeptiert. Im Gegensatz zu UIKit wird SwiftUI-Tracking auf den gesamten Text innerhalb des Modifikators angewendet und kann ohne Aufteilung in mehrere Text-Blöcke nicht partiell sein. SwiftUI behandelt die Kombination von Kerning und Tracking automatisch, indem es Tracking über der Kerning-Tabelle der Schriftart anwendet.

Android verwendet die letterSpacing-Eigenschaft in TextView, die in em (Multiplikator relativ zur Schriftgröße) angegeben wird. Ein Wert von 0 bedeutet Standard-Tracking, 0.05 bedeutet eine Erhöhung um 5% von em, -0.02 bedeutet eine Verringerung. In Android funktioniert letterSpacing als Tracking (einheitlich für alle Zeichen), während die Kerning-Tabelle der Schriftart automatisch auf der Ebene der Minikin-Renderengine angewendet wird.

// Im XML-Layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programmatisch in Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose in Android verwendet den letterSpacing-Parameter in TextStyle, der in sp angegeben wird. Beispielsweise ergibt TextStyle(letterSpacing = 0.5.sp) ein Tracking von 0.5 sp. Im Gegensatz zum XML-Ansatz ermöglicht Compose die Kombination von letterSpacing mit anderen typografischen Parametern in einem einzigen TextStyle-Objekt, was die Erstellung von Designsystemen vereinfacht.

Konfiguration von letter-spacing in der Webentwicklung

Im Web wird Tracking über die CSS-Eigenschaft letter-spacing implementiert, die beliebige Längeneinheiten oder das Schlüsselwort normal akzeptiert. Der Wert normal entspricht 0 (kein zusätzlicher Zwischenzeichenabstand). Die Eigenschaft wird vererbt, unterstützt negative Werte und kann animiert werden. Laut CSS-Spezifikation wird letter-spacing nach der Kerning-Tabelle der Schriftart angewendet.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: letter-spacing in em skaliert bei Änderung der Schriftgröße und ist für Barrierefreiheit vorzuziehen. px skaliert nicht und kann bei Textvergrößerung durch den Browser (Zoom) zu Inkonsistenzen führen. Empfehlung: Verwenden Sie immer em für letter-spacing. Ausnahme sind Fälle, in denen Tracking unabhängig von der Größe fest bleiben soll, wie bei Logos.

Animation von letter-spacing: Die Eigenschaft unterstützt CSS-Übergänge und -Animationen, was sanfte Texteinblendungseffekte ermöglicht. Die Animation von letter-spacing: -0.05em zu letter-spacing: 0.01em beim Laden einer Überschrift ist eine beliebte Technik in modernen Oberflächen. Leistung: Die Animation von letter-spacing verursacht Reflow (Neuberechnung des Layouts), da sie die Textbreite ändert. Verwenden Sie nach Möglichkeit transform und opacity für leistungsstarke Animationen.

Barrierefreiheit und Tracking in mobilen Oberflächen

Tracking wirkt sich direkt auf die Lesbarkeit von Text für Benutzer mit Sehbehinderungen und Legasthenie aus. Die WCAG 2.2-Richtlinie 1.4.12 (Textabstand) fordert, dass Text bei Erhöhung des Zeichen-, Zeilen- und Absatzabstands auf bestimmte Werte keinen Inhalt verlieren darf. letter-spacing muss eine Erhöhung auf 0.12em ohne Inhaltsbeschneidung oder Elementüberlappung aushalten.

Legasthenie: Forschungen der British Dyslexia Association zeigen, dass eine Erhöhung von letter-spacing auf 0.12em die Lesegeschwindigkeit bei Benutzern mit Legasthenie um 10–15% verbessert. Dies ist jedoch individuell — einige Benutzer bevorzugen den Standardabstand. iOS und Android bieten systemweite Barrierefreiheitseinstellungen zur Erhöhung des Zwischenzeichenabstands, die die Anwendung respektieren sollte.

Regeln für Entwickler: Verwenden Sie keine festen Breiten/Höhen, die bei Erhöhung von letter-spacing brechen könnten. Vermeiden Sie overflow: hidden auf Textcontainern ohne Barrierefreiheitsprüfung. Testen Sie die Oberfläche mit auf 0.12em erhöhtem letter-spacing auf allen Bildschirmen. Wenn das Design bricht, überarbeiten Sie das Layout, anstatt die Barrierefreiheit zu ignorieren.

Plattformunterstützung: iOS erhöht automatisch letter-spacing, wenn die Funktion Größerer Text in den Barrierefreiheitseinstellungen aktiviert ist, sofern UIFont.preferredFont verwendet wird. Android bietet eine ähnliche Option über FontScale. Der Entwickler sollte diese Einstellungen nicht deaktivieren. Testszenario: Aktivieren Sie die maximale Textgröße in den Geräteeinstellungen und überprüfen Sie, dass Tracking das Layout der Oberfläche nicht beeinträchtigt.