Tracking i mobilutveckling — innebörd och justering av avstånd mellan tecken

Vad är tracking i typografi

Tracking (tracking, spatiöring) — är förändring av avståndet mellan tecken som tillämpas jämnt på alla tecken i ett textblock. Till skillnad från kerning, där varje teckenpar får en individuell korrigering baserad på teckensnittets kerningtabell, ställs tracking in med ett enda numeriskt värde för hela omfånget. Positiv tracking ökar intervallet (spatiöring), negativ — minskar det (komprimering).

Termen härstammar från metalltypografi, där teckenavståndet reglerades av det fysiska avståndet mellan typerna. I digital typografi tillämpas tracking ovanpå kerningtabellen: först tillämpar teckensnittet inbyggda kerningpar, sedan lägger systemet till jämn tracking till alla tecken. Det slutliga intervallet = kerning + tracking, vilket är viktigt att beakta vid aggressiv komprimering av text.

Mättenheter: tracking kan ställas in i absoluta enheter (punkter, pixlar, millimeter) och relativa enheter (em, procent av teckenstorleken). I mobilutveckling ställs tracking vanligtvis in i punkter (iOS) eller sp (Android) som absoluta värden, på webben — i em som relativa värden. Relativa enheter är att föredra för tillgänglighet, eftersom de skalar när användaren ändrar teckenstorleken.

Tracking och kerning: grundläggande skillnader

Förväxling mellan tracking och kerning — ett av de vanligaste misstagen hos början designrar och utvecklare. Kerning arbetar på mikronivå — korrigerar intervallet mellan specifika teckenpar (AV, Te, To) baserat på deras geometri. Tracking arbetar på makronivå — flyttar jämnt alla tecken i ett fragment, utan att ta hänsyn till deras form.

Visuell effekt: vid kerning varierar avstånden mellan olika teckenpar — mellan A och V är mindre än mellan A och I, eftersom bokstavsformerna kompenserar varandra. Vid tracking är alla avstånd lika — mellan A och V, A och I, T och o — överallt samma förskjutning. Detta gör tracking till ett verktyg för global reglering och kerning till ett verktyg för finjustering.

Kombinerad användning: i gränssnittstypografi tillämpas tracking och kerning tillsammans. Teckensnittet innehåller en kerningtabell för grundläggande optimering och utvecklaren lägger till tracking för styling eller tillgänglighet. Kerningtabellen tillämpas först, sedan läggs tracking ovanpå den. Vid negativ tracking (komprimering) kan kerningpar skapa oönskade överlappningar — kontrollera problematiska kombinationer.

Positiv och negativ tracking: när ska man tillämpa

Positiv tracking (spatiöring) ökar avståndet mellan tecken. Används för att förbättra läsbarheten av liten text (10–13pt), där tecken visuellt smälter samman vid standardavstånd. Används även i tillgänglighet för användare med dyslexi — ökat teckenavstånd underlättar igenkänning av bokstäver. Typiska värden: 0.3–1pt för iOS, 0.02–0.05em för webben.

Negativ tracking (komprimering) minskar avståndet mellan tecken. Används i rubriker (från 24pt) och accenttext, där tät text ser sammanhängande och modern ut. Stora teckenstorlekar tolererar komprimering väl, eftersom teckenavstånden är visuellt stora. Typiska värden: från -0.3 till -1pt. Begränsning: vid tracking mindre än -1pt kan tecken överlappa varandra, särskilt i par med utskjutande element (fi, fj, TT).

Empirisk regel: för varje teckenstorlek finns ett tillåtet trackingomfång. Ju större teckensnitt, desto mindre tracking behövs för optimal läsbarhet. Formel: optimal tracking ≈ font-weight * 0.01 – font-size * 0.001. För fetstilt teckensnitt (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, vilket med justering för teckensnittet ger cirka 0.5pt positiv tracking.

Tracking för olika texttyper

Brödtext (14–18pt): tracking är inte nödvändig eller minimal positiv 0.1–0.3pt. Professionella teckensnitt innehåller redan optimala avstånd för brödtext. Varje ingrepp i tracking av brödtext måste motiveras av design- eller tillgänglighetskrav. Rubriker (20–36pt): tillåten negativ tracking från -0.3 till -0.8pt beroende på teckensnitt och vikt. Versaler (ALL CAPS): rekommenderad positiv tracking 0.5–2pt, eftersom versaler visuellt smälter samman utan extra mellanrum.

Specifikationer för teckensnitt: teckensnitt med grotesk geometri (Helvetica, Inter, SF Pro) tolererar negativ tracking bättre än antikva teckensnitt med serifer (Times, Georgia, PT Serif). Hos antikva teckensnitt skapar seriferna en extra visuell förbindelse mellan bokstäver och komprimering gör texten oläslig. För antikva teckensnitt rekommenderas endast positiv tracking.

Implementering av tracking på iOS och Android

På iOS realiseras tracking genom samma .kern-attribut i NSAttributedString som kerning, men med en skillnad: för tracking anges ett numeriskt värde som skiljer sig från nil. nil — standard kerning (från teckensnittets tabell), 0 — inaktivering av kerning, vilket annat tal — tracking ovanpå kerningtabellen. Detta innebär att vid inställning av .kern = 2 får alla tecken +2pt teckenavstånd ovanpå de inbyggda kerningparen.

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

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

// UILabel med tracking
label.attributedText = attributedString

SwiftUI använder modifieraren .tracking() för Text, som accepterar CGFloat. Till skillnad från UIKit tillämpas SwiftUI-tracking på hela texten inom modifieraren och kan inte vara partiell utan uppdelning i flera Text-block. SwiftUI hanterar automatiskt kombinationen av kerning och tracking genom att applicera tracking ovanpå teckensnittets kerningtabell.

Android använder egenskapen letterSpacing i TextView, som ställs in i em (multiplikator relativt till teckenstorleken). Värde 0 — standard tracking, 0.05 — ökning med 5% av em, -0.02 — minskning. I Android fungerar letterSpacing som tracking (enhetligt för alla tecken) och teckensnittets kerningtabell tillämpas automatiskt på Minikin-renderingsmotorns nivå.

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

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

Compose i Android använder parametern letterSpacing i TextStyle, inställd i sp. Till exempel ger TextStyle(letterSpacing = 0.5.sp) tracking på 0.5 sp. Till skillnad från XML-metoden tillåter Compose att kombinera letterSpacing med andra typografiska parametrar i ett enda TextStyle-objekt, vilket förenklar skapandet av designsystem.

Konfigurering av letter-spacing i webbutveckling

På webben realiseras tracking via CSS-egenskapen letter-spacing, som accepterar alla längdenheter eller nyckelordet normal. Värdet normal motsvarar 0 (utan extra teckenavstånd). Egenskapen ärvs, stöder negativa värden och kan animeras. Enligt CSS-specifikationen tillämpas letter-spacing efter teckensnittets kerningtabell.

/* 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 i em skalar vid ändring av font-size och är att föredra för tillgänglighet. px skalar inte och kan leda till inkonsekvens vid förstoring av text i webbläsaren (Zoom). Rekommendation: använd alltid em för letter-spacing. Undantag — fall där tracking måste förbli fast oavsett teckenstorlek, till exempel i logotyper.

Animation av letter-spacing: egenskapen stöder CSS-transitions och -animations, vilket möjliggör skapandet av jämna texteffekter. Animation från letter-spacing: -0.05em till letter-spacing: 0.01em vid laddning av en rubrik — en populär teknik i moderna gränssnitt. Prestanda: animation av letter-spacing orsakar reflow (omräkning av layout), eftersom textblockets bredd ändras. Använd transform och opacity för högpresterande animationer där det är möjligt.

Tillgänglighet och tracking i mobila gränssnitt

Tracking påverkar direkt läsbarheten av text för användare med synnedsättning och dyslexi. WCAG 2.2 Guideline 1.4.12 (Text Spacing) kräver att text inte förlorar innehåll när teckenavstånd, radavstånd och styckeavstånd ökas till vissa värden. letter-spacing måste tåla en ökning upp till 0.12em utan att innehåll kapas eller element överlappar.

Dyslexi: forskning från British Dyslexia Association visar att ökning av letter-spacing till 0.12em förbättrar läshastigheten hos användare med dyslexi med 10–15%. Detta är dock individuellt — vissa användare föredrar standardavstånd. iOS och Android tillhandahåller systeminställningar för tillgänglighet för att öka teckenavståndet, som appen måste respektera.

Regler för utvecklaren: använd inte fasta bredder/höjder som kan gå sönder vid ökning av letter-spacing. Undvik overflow: hidden på behållare med text utan tillgänglighetskontroll. Testa gränssnittet med letter-spacing ökat till 0.12em på alla skärmar. Om designen går sönder — ompröva layouten, ignorera inte tillgänglighet.

Plattformsstöd: iOS ökar automatiskt letter-spacing när funktionen Större Text är aktiverad i tillgänglighetsinställningarna, om UIFont.preferredFont används. Android erbjuder ett liknande alternativ via FontScale. Utvecklaren bör inte inaktivera dessa inställningar. Testscenario: aktivera maximal textstorlek i enhetsinställningarna och kontrollera att tracking inte bryter gränssnittets layout.