Tracking in Mobile Development — The Essence and Configuration of Character Spacing

What Is Tracking in Typography

Tracking is the adjustment of inter-character spacing, uniformly applied to all characters of a text block. Unlike kerning, where each pair of characters receives individual adjustment based on the font’s kerning table, tracking is set as a single numeric value for the entire range. Positive tracking increases the interval (expanded spacing), negative tracking decreases it (condensed spacing).

The term originates from metal typography, where inter-character spacing was regulated by the physical distance between type slugs. In digital typography, tracking is applied on top of the kerning table: first, the font applies its built-in kerning pairs, then the system adds uniform tracking to all characters. The resulting interval = kerning + tracking, which is important to consider when aggressively condensing text.

Units of measurement: tracking can be specified in absolute units (points, pixels, millimeters) and relative units (em, percentage of font size). In mobile development, tracking is typically specified in points (iOS) or sp (Android) as absolute values, on the web in em as relative values. Relative units are preferred for accessibility because they scale when the user changes font size.

Tracking and Kerning: Key Differences

Confusion between tracking and kerning is one of the most common mistakes among novice designers and developers. Kerning works at the micro level — it adjusts the interval between specific character pairs (AV, Te, To) based on their geometry. Tracking works at the macro level — it uniformly shifts all characters in a fragment without considering their shape.

Visual effect: with kerning, distances between different character pairs vary — between A and V it is smaller than between A and I, because the letter shapes compensate for each other. With tracking, all distances are the same — between A and V, A and I, T and o — the same shift everywhere. This makes tracking a tool for global adjustment and kerning a tool for fine-tuning.

Combined use: in interface typography, tracking and kerning are used together. The font includes a kerning table for basic optimization, and the developer adds tracking for styling or accessibility. The kerning table is applied first, then tracking is added on top. With negative tracking (condensing), kerning pairs can create undesirable overlaps — check problematic combinations.

Positive and Negative Tracking: When to Use

Positive tracking increases the distance between characters. It is used to improve readability of small text (10–13pt), where characters visually blend together at standard spacing. It is also used in accessibility for users with dyslexia — increased inter-character spacing makes letter recognition easier. Typical values: 0.3–1pt for iOS, 0.02–0.05em for the web.

Negative tracking decreases the distance between characters. It is used in headings (from 24pt) and accent text, where dense text looks cohesive and modern. Large sizes handle condensing well because inter-character distances are visually large. Typical values: from -0.3 to -1pt. Limitation: with tracking below -1pt, characters may overlap, especially in pairs with protruding elements (fi, fj, TT).

Rule of thumb: for each font size there is a range of acceptable tracking. The larger the font, the less tracking is needed for optimal readability. Formula: optimal tracking ≈ font-weight × 0.01 − font-size × 0.001. For a bold font (weight 700) at 16pt: 700 × 0.01 − 16 × 0.001 = 6.84, which adjusted for the typeface gives approximately 0.5pt of positive tracking.

Tracking for Different Text Types

Body text (14–18pt): tracking is not required or minimal positive 0.1–0.3pt. Professional fonts already contain optimal spacing for body text. Any intervention in body text tracking must be justified by design or accessibility requirements. Headings (20–36pt): negative tracking from -0.3 to -0.8pt is acceptable depending on the typeface and weight. All caps (ALL CAPS): positive tracking of 0.5–2pt is recommended, as uppercase letters in caps visually merge without additional spacing.

Typeface specifics: fonts with grotesque geometry (Helvetica, Inter, SF Pro) handle negative tracking better than serif typefaces (Times, Georgia, PT Serif). In serif fonts, the serifs create additional visual connections between letters, and condensing makes the text unreadable. For serif typefaces, only positive tracking is recommended.

Implementing Tracking on iOS and Android

On iOS, tracking is implemented through the same .kern attribute in NSAttributedString as kerning, with one difference: for tracking, a numeric value other than nil is specified. nil means default kerning (from the font table), 0 disables kerning, any other number means tracking on top of the kerning table. This means that when .kern = 2 is set, all characters receive +2pt of inter-character spacing on top of the built-in kerning pairs.

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

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

// UILabel with tracking
label.attributedText = attributedString

SwiftUI uses the .tracking() modifier on Text, which accepts CGFloat. Unlike UIKit, SwiftUI tracking applies to all text within the modifier and cannot be partial without splitting into multiple Text blocks. SwiftUI automatically handles the combination of kerning and tracking, applying tracking on top of the font’s kerning table.

Android uses the letterSpacing property on TextView, specified in em (multiplier relative to font size). A value of 0 means default tracking, 0.05 means an increase of 5% of em, -0.02 means a decrease. In Android, letterSpacing works as tracking (uniform for all characters), while the font’s kerning table is applied automatically at the Minikin render engine level.

// In 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" />

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

Compose on Android uses the letterSpacing parameter in TextStyle, specified in sp. For example, TextStyle(letterSpacing = 0.5.sp) gives tracking of 0.5 sp. Unlike the XML approach, Compose allows combining letterSpacing with other typographic parameters in a single TextStyle object, simplifying the creation of design systems.

Configuring letter-spacing in Web Development

On the web, tracking is implemented through the CSS property letter-spacing, which accepts any length units or the keyword normal. The value normal corresponds to 0 (no additional inter-character spacing). The property is inherited, supports negative values, and can be animated. According to the CSS Specification, letter-spacing is applied after the font’s kerning table.

/* 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 scales when font-size changes and is preferred for accessibility. px does not scale and may cause inconsistencies when the browser zooms the text. Recommendation: always use em for letter-spacing. The exception is cases where tracking should remain fixed regardless of size, such as in logos.

Animating letter-spacing: the property supports CSS transitions and animations, allowing smooth text reveal effects. Animating from letter-spacing: -0.05em to letter-spacing: 0.01em when a heading loads is a popular technique in modern interfaces. Performance: animating letter-spacing triggers reflow (layout recalculation) because it changes text width. Use transform and opacity for high-performance animations where possible.

Accessibility and Tracking in Mobile Interfaces

Tracking directly affects text readability for users with visual impairments and dyslexia. WCAG 2.2 Guideline 1.4.12 (Text Spacing) requires that text does not lose content when inter-character, inter-line, and inter-paragraph spacing are increased to certain values. letter-spacing must withstand an increase to 0.12em without content cropping or element overlap.

Dyslexia: research by the British Dyslexia Association shows that increasing letter-spacing to 0.12em improves reading speed for users with dyslexia by 10–15%. However, this is individual — some users prefer standard spacing. iOS and Android provide system accessibility settings for increasing inter-character spacing that applications should respect.

Rules for developers: do not use fixed widths/heights that could break when letter-spacing increases. Avoid overflow: hidden on text containers without accessibility verification. Test the interface with letter-spacing increased to 0.12em on all screens. If the design breaks, revise the layout rather than ignoring accessibility.

Platform support: iOS automatically increases letter-spacing when the Larger Text feature is enabled in accessibility settings, provided UIFont.preferredFont is used. Android offers a similar option through FontScale. Developers should not disable these settings. Test scenario: enable maximum text size in device settings and verify that tracking does not break the interface layout.