Tracking dalam pengembangan seluler — esensi dan pengaturan jarak antar karakter

Apa itu tracking dalam tipografi

Tracking (tracking, spasi) — adalah perubahan jarak antar karakter yang diterapkan secara merata ke semua karakter dalam blok teks. Berbeda dengan kerning, di mana setiap pasangan karakter menerima koreksi individual berdasarkan tabel kerning font, tracking ditentukan oleh satu nilai numerik untuk seluruh rentang. Tracking positif meningkatkan jarak (spasi), negatif — menguranginya (pemadatan).

Istilah ini berasal dari tipografi logam, di mana jarak antar karakter diatur oleh jarak fisik antara huruf. Dalam tipografi digital, tracking diterapkan di atas tabel kerning: pertama font menerapkan pasangan kerning bawaan, kemudian sistem menambahkan tracking yang merata ke semua karakter. Jarak akhir = kerning + tracking, yang perlu dipertimbangkan saat pemadatan teks yang agresif.

Satuan ukuran: tracking dapat ditentukan dalam satuan absolut (poin, piksel, milimeter) dan relatif (em, persen dari ukuran font). Dalam pengembangan seluler, tracking biasanya ditetapkan dalam poin (iOS) atau sp (Android) sebagai nilai absolut, di web — dalam em sebagai nilai relatif. Satuan relatif lebih disukai untuk aksesibilitas, karena akan menyesuaikan saat pengguna mengubah ukuran font.

Tracking dan kerning: perbedaan mendasar

Kebingungan antara tracking dan kerning — salah satu kesalahan paling umum dari desainer dan pengembang pemula. Kerning bekerja pada tingkat mikro — menyesuaikan jarak antara pasangan karakter tertentu (AV, Te, To) berdasarkan geometrinya. Tracking bekerja pada tingkat makro — menggeser semua karakter fragmen secara merata, tanpa mempertimbangkan bentuknya.

Efek visual: pada kerning, jarak antara pasangan karakter yang berbeda bervariasi — antara A dan V lebih kecil daripada antara A dan I, karena bentuk huruf saling mengkompensasi. Pada tracking, semua jarak sama — antara A dan V, A dan I, T dan o — di mana pun pergeseran yang sama. Ini menjadikan tracking sebagai alat penyesuaian global, dan kerning sebagai alat penyesuaian halus.

Penggunaan gabungan: dalam tipografi antarmuka, tracking dan kerning diterapkan bersama. Font berisi tabel kerning untuk optimalisasi dasar, dan pengembang menambahkan tracking untuk stilisasi atau aksesibilitas. Tabel kerning diterapkan terlebih dahulu, kemudian tracking ditambahkan di atasnya. Pada tracking negatif (pemadatan), pasangan kerning dapat menciptakan tumpang tindih yang tidak diinginkan — periksa kombinasi yang bermasalah.

Tracking positif dan negatif: kapan menerapkan

Tracking positif (spasi) meningkatkan jarak antar karakter. Diterapkan untuk meningkatkan keterbacaan teks kecil (10–13pt), di mana karakter secara visual menyatu pada jarak standar. Juga digunakan dalam aksesibilitas untuk pengguna dengan disleksia — jarak antar karakter yang meningkat memudahkan pengenalan huruf. Nilai tipikal: 0.3–1pt untuk iOS, 0.02–0.05em untuk web.

Tracking negatif (pemadatan) mengurangi jarak antar karakter. Diterapkan pada judul (dari 24pt) dan teks aksen, di mana susunan yang rapat terlihat kohesif dan modern. Ukuran font besar mentolerir pemadatan dengan baik, karena jarak antar karakter secara visual besar. Nilai tipikal: dari -0.3 hingga -1pt. Batasan: pada tracking kurang dari -1pt, karakter dapat saling tumpang tindih, terutama pada pasangan dengan elemen menonjol (fi, fj, TT).

Aturan empiris: untuk setiap ukuran font terdapat rentang tracking yang diizinkan. Semakin besar font, semakin sedikit tracking yang diperlukan untuk keterbacaan optimal. Rumus: tracking optimal ≈ font-weight * 0.01 – font-size * 0.001. Untuk font tebal (weight 700) 16pt: 700 * 0.01 – 16 * 0.001 = 6.84, yang dengan penyesuaian untuk jenis huruf memberikan sekitar 0.5pt tracking positif.

Tracking untuk berbagai jenis teks

Teks utama (14–18pt): tracking tidak diperlukan atau minimal positif 0.1–0.3pt. Font profesional sudah mengandung jarak optimal untuk teks utama. Setiap intervensi dalam tracking teks utama harus didasarkan pada kebutuhan desain atau aksesibilitas. Judul (20–36pt): tracking negatif yang diizinkan dari -0.3 hingga -0.8pt tergantung pada jenis huruf dan berat. Huruf kapital (ALL CAPS): tracking positif 0.5–2pt direkomendasikan, karena huruf kapital secara visual menyatu tanpa jarak tambahan.

Kekhususan jenis huruf: font dengan geometri grotesk (Helvetica, Inter, SF Pro) lebih baik mentolerir tracking negatif daripada jenis huruf antikua dengan kait (Times, Georgia, PT Serif). Pada font antikua, kait menciptakan hubungan visual tambahan antara huruf, dan pemadatan membuat teks tidak terbaca. Untuk jenis huruf antikua, hanya tracking positif yang direkomendasikan.

Implementasi tracking di iOS dan Android

Di iOS, tracking diimplementasikan melalui atribut yang sama .kern di NSAttributedString seperti kerning, tetapi dengan satu perbedaan: untuk tracking ditentukan nilai numerik yang berbeda dari nil. nil — kerning default (dari tabel font), 0 — menonaktifkan kerning, angka lainnya — tracking di atas tabel kerning. Ini berarti bahwa saat mengatur .kern = 2, semua karakter mendapatkan jarak +2pt antar karakter di atas pasangan kerning bawaan.

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

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

// UILabel dengan tracking
label.attributedText = attributedString

SwiftUI menggunakan pengubah .tracking() untuk Text, yang menerima CGFloat. Berbeda dengan UIKit, tracking SwiftUI diterapkan ke seluruh teks di dalam pengubah dan tidak dapat bersifat parsial tanpa dibagi menjadi beberapa blok Text. SwiftUI secara otomatis menangani kombinasi kerning dan tracking, menerapkan tracking di atas tabel kerning font.

Android menggunakan properti letterSpacing di TextView, yang ditentukan dalam em (pengganda relatif terhadap ukuran font). Nilai 0 — tracking default, 0.05 — peningkatan 5% dari em, -0.02 — penurunan. Di Android, letterSpacing berfungsi sebagai tracking (seragam untuk semua karakter), dan tabel kerning font diterapkan secara otomatis di tingkat mesin render Minikin.

// Dalam tata letak XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Secara terprogram di Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose di Android menggunakan parameter letterSpacing di TextStyle, ditentukan dalam sp. Misalnya, TextStyle(letterSpacing = 0.5.sp) memberikan tracking 0.5 sp. Berbeda dengan pendekatan XML, Compose memungkinkan penggabungan letterSpacing dengan parameter tipografi lainnya dalam satu objek TextStyle, yang menyederhanakan pembuatan sistem desain.

Pengaturan letter-spacing dalam pengembangan web

Di web, tracking diimplementasikan melalui properti CSS letter-spacing, yang menerima semua satuan panjang atau kata kunci normal. Nilai normal sesuai dengan 0 (tanpa jarak tambahan antar karakter). Properti ini diwariskan, mendukung nilai negatif, dan dapat dianimasikan. Menurut Spesifikasi CSS, letter-spacing diterapkan setelah tabel kerning font.

/* 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 dalam em menyesuaikan saat font-size berubah dan lebih disukai untuk aksesibilitas. px tidak menyesuaikan dan dapat menyebabkan ketidaksesuaian saat teks diperbesar oleh browser (Zoom). Rekomendasi: selalu gunakan em untuk letter-spacing. Pengecualian — kasus di mana tracking harus tetap tetap terlepas dari ukuran font, misalnya, dalam logo.

Animasi letter-spacing: properti ini mendukung CSS transitions dan animations, memungkinkan pembuatan efek kemunculan teks yang halus. Animasi dari letter-spacing: -0.05em ke letter-spacing: 0.01em saat memuat judul — teknik populer dalam antarmuka modern. Kinerja: animasi letter-spacing menyebabkan reflow (perhitungan ulang tata letak), karena lebar blok teks berubah. Gunakan transform dan opacity untuk animasi berkinerja tinggi jika memungkinkan.

Aksesibilitas dan tracking dalam antarmuka seluler

Tracking secara langsung memengaruhi keterbacaan teks untuk pengguna dengan keterbatasan penglihatan dan disleksia. WCAG 2.2 Guideline 1.4.12 (Text Spacing) mensyaratkan bahwa teks tidak kehilangan konten saat jarak antar karakter, antar baris, dan antar paragraf ditingkatkan hingga nilai tertentu. letter-spacing harus tahan terhadap peningkatan hingga 0.12em tanpa pemotongan konten dan tumpang tindih elemen.

Disleksia: penelitian British Dyslexia Association menunjukkan bahwa peningkatan letter-spacing hingga 0.12em meningkatkan kecepatan membaca pada pengguna dengan disleksia sebesar 10–15%. Namun ini bersifat individual — beberapa pengguna lebih memilih jarak standar. iOS dan Android menyediakan pengaturan aksesibilitas sistem untuk meningkatkan jarak antar karakter, yang harus dihormati oleh aplikasi.

Aturan untuk pengembang: jangan gunakan lebar/tinggi tetap yang dapat rusak saat letter-spacing ditingkatkan. Hindari overflow: hidden pada wadah dengan teks tanpa pemeriksaan aksesibilitas. Uji antarmuka dengan letter-spacing yang ditingkatkan hingga 0.12em di semua layar. Jika desain rusak — tinjau ulang tata letak, jangan abaikan aksesibilitas.

Dukungan platform: iOS secara otomatis meningkatkan letter-spacing saat fitur Teks Lebih Besar diaktifkan di pengaturan aksesibilitas, jika menggunakan UIFont.preferredFont. Android menyediakan opsi serupa melalui FontScale. Pengembang tidak boleh menonaktifkan pengaturan ini. Skenario uji: aktifkan ukuran teks maksimum di pengaturan perangkat dan periksa bahwa tracking tidak merusak tata letak antarmuka.