Kerning: apa itu dan bagaimana mengatur jarak antar huruf

Apa itu kerning dalam tipografi

Kerning — adalah proses penyesuaian manual atau otomatis jarak antara pasangan karakter tertentu untuk menghilangkan artefak optik. Masalah muncul karena setiap huruf memiliki geometri unik: A memiliki puncak, V — kemiringan kanan, T — palang lebar. Ketika huruf-huruf seperti itu berdiri berdampingan, jarak antara konturnya tampak tidak merata, meskipun jarak antar karakter (set width) sama.

Tabel kerning font berisi pasangan karakter dengan nilai penyesuaian yang telah ditentukan. Dalam font yang bagus, bisa ada 300 hingga 2000 pasangan kerning. Font profesional — seperti SF Pro dari Apple atau Roboto dari Google — menyertakan tabel kerning yang dirancang dengan cermat yang mencakup semua kemungkinan kombinasi huruf Latin dan Sirilik. Menurut Fontshop Guide to Kerning, kualitas tabel kerning adalah salah satu tanda utama font profesional.

Efek visual kerning terutama terlihat pada judul, logo, dan teks berukuran besar (dari 24 pt). Dalam teks kecil (12-14 pt) jarak antar huruf kecil dan kerning kurang terlihat, meskipun tetap berfungsi. Browser web dan OS seluler menerapkan kerning bawaan secara default, tetapi pengembang dapat menonaktifkannya atau menyesuaikannya untuk desain tertentu.

Kerning dan tracking: perbedaan utama

Pengembang pemula sering membingungkan kerning dan tracking, tetapi ini adalah parameter tipografi yang fundamental berbeda. Kerning bekerja pada tingkat pasangan karakter dan menyesuaikan jarak hanya antara kombinasi tertentu di mana geometri huruf menciptakan ketidakseimbangan optik. Tracking (letter-spacing) mengubah jarak antara semua karakter dari fragmen yang dipilih secara sama — meningkatkannya atau menguranginya secara seragam.

Kapan tracking digunakan: untuk meningkatkan keterbacaan teks kecil (tracking positif), untuk membuat judul aksen (tracking negatif), untuk penataan teks dalam desain antarmuka. Tracking ditetapkan dengan nilai numerik dan diterapkan pada setiap karakter, termasuk pasangan yang sudah di-kerning — koreksi kerning dipertahankan, tetapi pergeseran umum ditambahkan di atasnya.

Aturan penting: pada tracking negatif (pemampatan) perhatikan pasangan kerning — mereka dapat menciptakan tumpang tindih huruf yang tidak diinginkan. Di CSS, properti letter-spacing diterapkan di atas tabel kerning font, dan pada pemampatan kuat (letter-spacing: -1px) koreksi kerning dapat menyebabkan penggabungan karakter.

Implementasi kerning di iOS melalui NSAttributedString

Di iOS kerning dikelola melalui atribut .kern di NSAttributedString. Nilai atribut adalah Float, di mana angka positif meningkatkan jarak, negatif mengurangi, dan 0 menonaktifkan kerning. Nilai default adalah nil, yang berarti menggunakan tabel kerning font. API utama untuk bekerja dengan kerning adalah NSMutableAttributedString dengan menambahkan atribut ke rentang teks.

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

// Aktifkan kerning (menggunakan tabel font)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Terapkan ke UILabel
label.attributedText = attributedText

Nilai default .kern = nil mengaktifkan kerning dari tabel font. Jika perlu menonaktifkan kerning sepenuhnya — atur .kern = 0. Nilai 0.0 dan nil adalah keadaan yang berbeda: nil menggunakan tabel, 0 memaksa meniadakan semua pasangan kerning. Menurut Apple Text Programming Guide, penetapan 0 secara eksplisit berguna untuk teks monospace atau kasus di mana kerning mengganggu — misalnya, pada tombol dengan lebar tetap.

SwiftUI menyediakan pengubah .kerning() untuk Text. Berbeda dengan UIKit, di SwiftUI kerning diatur pada tingkat tampilan, bukan string yang diatribusikan. Pengubah menerima CGFloat dan diterapkan ke seluruh teks di dalam blok Text. Untuk kerning parsial di SwiftUI digunakan kombinasi operator + untuk Text dan pengubah terpisah.

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

Kinerja: NSAttributedString dengan atribut kerning menghitung ulang posisi karakter saat merender. Untuk teks statis ini terjadi sekali. Untuk teks dinamis (teks berubah di UICollectionView) — setiap kali saat perubahan. Penggunaan rentang besar dengan kerning dalam string panjang (lebih dari 500 karakter) dapat mengurangi FPS saat menggulir.

Pengaturan kerning di Android melalui letterSpacing

Di Android kerning dikelola melalui properti letterSpacing di TextView dan tata letak XML. Atribut bertipe Float dan berfungsi sebagai pengali ukuran font dalam em. Nilai 0 sesuai dengan kerning default, positif — meningkatkan jarak, negatif — mengurangi. letterSpacing tersedia mulai API Level 21 (Android 5.0 Lollipop).

Implementasi melalui SpannableString memungkinkan penerapan kerning ke bagian string, bukan ke seluruh teks. Kelas ScaleXSpan atau ReplacementSpan kustom digunakan untuk kontrol yang presisi. Menurut Android Developer Guide, ScaleXSpan menskalakan karakter secara lebar, mensimulasikan perubahan jarak antar karakter, tetapi tidak memberikan kontrol langsung atas pasangan kerning.

// Di tata letak XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Secara terprogram di Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Keterbatasan: Android tidak mendukung tabel kerning secara langsung — letterSpacing berfungsi seperti tracking untuk semua karakter. Untuk kerning pasangan di Android digunakan font dengan tabel kerning bawaan (OpenType GPOS feature kern). Dukungan tergantung pada versi OS dan mesin render: pada Android 10+ digunakan Minikin dengan dukungan penuh untuk fitur OpenType, pada versi yang lebih lama — HarfBuzz dengan keterbatasan. Rekomendasi: periksa tampilan kerning pada perangkat dengan Android di bawah 8.0.

Kerning dalam pengembangan web melalui CSS

Di web kerning dikelola melalui properti CSS font-kerning, yang mengaktifkan atau menonaktifkan tabel kerning bawaan font. Nilai: auto (browser memutuskan), normal (kerning aktif), none (kerning nonaktif). Properti ini didukung oleh semua browser modern sejak 2016. Menurut MDN Web Docs, font-kerning hanya berlaku untuk font OpenType dengan tabel kerning.

Properti CSS letter-spacing — adalah analog dari tracking, tetapi juga digunakan untuk efek mirip kerning. Berbeda dengan font-kerning, letter-spacing mengubah jarak antara semua karakter secara seragam, tanpa memperhitungkan pasangan kerning. Saat menggunakan kedua properti, font-kerning diterapkan terlebih dahulu, kemudian letter-spacing menambahkan pergeseran seragam di atasnya.

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

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

Utilitas TypeScript untuk menghitung letter-spacing optimal dengan mempertimbangkan kerning dapat menganalisis tabel kerning font melalui Canvas API. Namun dalam praktiknya, pengembang web mengandalkan font-kerning: normal — dalam banyak kasus memberikan hasil optimal. Penyesuaian tambahan letter-spacing hanya diperlukan untuk aksen desain — misalnya, di halaman arahan dengan tipografi besar.

Rekomendasi praktis untuk pengaturan kerning

Kerning adalah alat penyesuaian halus dan penerapannya yang salah memperburuk keterbacaan. Aturan pertama: jangan mengubah kerning untuk teks utama (body text). Tabel kerning font profesional sudah berisi nilai optimal untuk ukuran 12-16pt. Intervensi pada kerning teks utama menyebabkan ketidakseragaman dan kebisingan visual.

Aturan kedua: untuk judul dari 24pt gunakan kerning positif (0.5-1.5 pt tergantung font). Teks besar membutuhkan lebih banyak ruang antar huruf untuk keterbacaan. Font dengan x-height rendah (misalnya Didot) membutuhkan lebih banyak kerning daripada font dengan x-height tinggi (misalnya Helvetica). Data uji: di aplikasi iOS Apple Music, judul menggunakan kerning 0.8 pt.

Aturan ketiga: selalu periksa kerning pada string nyata, bukan pada Lorem Ipsum uji. Kombinasi karakter yang berbeda memberikan efek visual yang berbeda. Berikan perhatian khusus pada pasangan dengan vokal dan konsonan dengan elemen menonjol: AV, Te, To, Wa, LT. Pada kerning negatif perhatikan pasangan fi, fl, fj — di beberapa font mereka dapat bergabung tanpa ligatur.

Aspek aksesibilitas: pengguna dengan disleksia membaca teks dengan kerning positif kecil (0.3-0.5 pt) lebih baik. iOS dan Android mendukung pengaturan aksesibilitas yang dapat menimpa kerning aplikasi. Gunakan UIFontDescriptor dengan Dynamic Type dan perhitungkan kerning dalam pengaturan aksesibilitas melalui UIAccessibility. Penting: jangan blokir pengaturan kerning sistem — ini melanggar WCAG 2.2 Guideline 1.4.12 tentang adaptasi teks.