Kerning: What It Is and How to Adjust Letter Spacing

What Is Kerning in Typography

Kerning is the process of manually or automatically adjusting the distance between specific pairs of characters to eliminate optical artifacts. The problem arises because each letter has a unique geometry: A has an apex, V has a right slant, T has a wide crossbar. When such letters stand side by side, the distance between their outlines appears uneven, even though the set width is the same.

Font kerning tables contain character pairs with preset adjustment values. A good typeface may have 300 to 2000 kerning pairs. Professional typefaces — such as SF Pro from Apple or Roboto from Google — include meticulously crafted kerning tables covering all possible Latin and Cyrillic letter combinations. According to the Fontshop Guide to Kerning, the quality of kerning tables is one of the main indicators of a professional font.

Visual effect of kerning is especially noticeable in headings, logos, and large font sizes (24 pt and above). In small text (12–14 pt) letter spacing is tighter and kerning is less noticeable, though it still works. Web browsers and mobile OSes apply built-in kerning by default, but developers can disable or adjust it for specific designs.

Kerning vs Tracking: Key Differences

Beginner developers often confuse kerning and tracking, but these are fundamentally different typographic parameters. Kerning works at the character-pair level and adjusts spacing only between specific combinations where letter geometry creates optical imbalance. Tracking (letter-spacing) changes the interval between all characters in the selected fragment equally — increasing or decreasing it uniformly.

When tracking is used: to improve readability of small text (positive tracking), to create accent headings (negative tracking), to style text in interface design. Tracking is set as a numeric value and applied to every character, including already kerned pairs — kerning corrections are preserved but a global shift is added on top.

Important rule: with negative tracking (compression), watch kerning pairs — they may create unwanted letter overlaps. In CSS, the letter-spacing property applies on top of the font’s kerning table, and with strong compression (letter-spacing: -1px) kerning corrections can cause characters to merge.

Kerning Implementation in iOS via NSAttributedString

On iOS, kerning is managed via the .kern attribute in NSAttributedString. The attribute value is a Float, where a positive number increases spacing, a negative number decreases it, and 0 disables kerning. The default value is nil, which means using the font’s kerning table. The primary API for working with kerning is NSMutableAttributedString with the attribute added to a text range.

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

// Enable kerning (uses font table)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Apply to UILabel
label.attributedText = attributedText

Default value .kern = nil enables kerning from the font table. If you need to disable kerning completely, set .kern = 0. The values 0.0 and nil are different states: nil uses the table, 0 forcibly zeroes all kerning pairs. According to the Apple Text Programming Guide, explicitly setting 0 is useful for monospaced text or cases where kerning interferes — for example, in fixed-width buttons.

SwiftUI provides the .kerning() modifier for Text. Unlike UIKit, in SwiftUI kerning is set at the view level rather than on an attributed string. The modifier accepts a CGFloat and applies to all text within the Text block. For partial kerning in SwiftUI, a combination of the + operator on Text and individual modifiers is used.

struct KerningView: View {
    var body: some View {
        Text("Heading with kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Performance: NSAttributedString with a kerning attribute recalculates character positions during rendering. For static text this happens once. For dynamic text (changing text in UICollectionView) — every time it changes. Using a large range with kerning on long strings (over 500 characters) may reduce FPS during scrolling.

Configuring Kerning on Android via letterSpacing

On Android, kerning is managed via the letterSpacing property in TextView and XML layouts. The attribute is a Float and works as a multiplier of the font’s em size. A value of 0 corresponds to default kerning, positive increases spacing, negative decreases it. letterSpacing is available starting from API Level 21 (Android 5.0 Lollipop).

Implementation via SpannableString allows applying kerning to part of a string rather than the entire text. The ScaleXSpan class or a custom ReplacementSpan is used for precise control. According to the Android Developer Guide, ScaleXSpan scales characters horizontally, simulating inter-character spacing changes, but does not provide direct kerning-pair control.

// In XML layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

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

Limitation: Android does not support kerning tables directly — letterSpacing works as tracking for all characters. For pair kerning on Android, fonts with built-in kerning tables (OpenType GPOS feature kern) are used. Support depends on the OS version and rendering engine: on Android 10+ Minikin is used with full OpenType feature support, on earlier versions HarfBuzz with limitations. Recommendation: test kerning display on devices running Android below 8.0.

Kerning in Web Development via CSS

On the web, kerning is controlled via the CSS property font-kerning, which enables or disables the font’s built-in kerning tables. Values: auto (browser decides), normal (kerning enabled), none (kerning disabled). The property is supported by all modern browsers since 2016. According to MDN Web Docs, font-kerning only applies to OpenType fonts with a kerning table.

CSS property letter-spacing is the analogue of tracking, but it is also used for kerning-like effects. Unlike font-kerning, letter-spacing changes the interval between all characters uniformly, without regard to kerning pairs. When both properties are used, font-kerning is applied first, then letter-spacing adds a uniform shift on top.

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

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

TypeScript utility for calculating optimal letter-spacing with kerning consideration can analyze the font’s kerning table via the Canvas API. However, in practice web developers rely on font-kerning: normal in most cases delivers optimal results. Additional letter-spacing tuning is only needed for design accents — for example, in landing pages with large typography.

Practical Kerning Configuration Recommendations

Kerning is a fine-tuning tool, and incorrect application worsens readability. First rule: do not change kerning for body text. Professional font kerning tables already contain optimal values for 12–16pt sizes. Interfering with body text kerning leads to unevenness and visual noise.

Second rule: for headings 24pt and above, use positive kerning (0.5–1.5 pt depending on the typeface). Large text requires more letter spacing for readability. Fonts with a low x-height (e.g., Didot) require more kerning than fonts with a high x-height (e.g., Helvetica). Reference data: in the iOS Apple Music app, headings use 0.8 pt kerning.

Third rule: always test kerning on real strings, not on Lorem Ipsum. Different character combinations produce different visual effects. Pay special attention to pairs with vowels and consonants with protruding elements: AV, Te, To, Wa, LT. With negative kerning, watch pairs fi, fl, fj — in some fonts they may merge without a ligature.

Accessibility aspect: users with dyslexia read text with slight positive kerning (0.3–0.5 pt) better. iOS and Android support accessibility settings that can override app kerning. Use UIFontDescriptor with Dynamic Type and account for kerning in accessibility settings via UIAccessibility. Important: do not block system kerning settings — this violates WCAG 2.2 Guideline 1.4.12 on text adaptation.