Leading dan Spasi Baris: apa itu dan konfigurasi di iOS dan Android

Apa itu leading dan spasi antar baris

Leading (diucapkan „lending”) — adalah jarak vertikal antara garis dasar baris yang berdekatan dalam tipografi. Garis dasar — garis tak terlihat di mana karakter teks ditempatkan. Semakin besar leading, semakin bebas baris ditempatkan relatif satu sama lain. Dalam tipografi digital, leading sering disebut spasi antar baris atau tinggi baris.

Secara historis, istilah ini muncul di era tipografi logam: penyusun huruf menempatkan strip timah tipis di antara baris untuk meningkatkan jarak. Dalam font modern, leading ditentukan sebagai rasio terhadap ukuran font. Nilai default sistem adalah 1.2 (120% dari ukuran font), tetapi untuk teks panjang dan antarmuka mobile nilai yang lebih besar direkomendasikan. Menurut Pedoman Tipografi Material Design, tinggi baris optimal untuk antarmuka web dan mobile adalah 1.4-1.5 untuk teks utama.

Perbedaan antara leading dan line spacing: leading — jarak penuh dari garis dasar ke garis dasar, line spacing — jarak antara batas bawah satu baris dan batas atas baris berikutnya. Di sebagian besar API mobile (iOS NSParagraphStyle, Android TextView) yang digunakan adalah line spacing sebagai spasi tambahan di atas tinggi alami baris. Ini penting untuk dipertimbangkan saat menghitung total spasi antar baris.

Nilai leading optimal untuk antarmuka mobile

Pemilihan leading optimal tergantung pada beberapa faktor: ukuran font, panjang baris, konteks penggunaan, dan audiens. Untuk antarmuka mobile dengan panjang baris tipikal 40-60 karakter, leading 1.4 hingga 1.6 dari ukuran font direkomendasikan. Baris pendek (label, tombol) dapat menggunakan leading yang lebih kecil — 1.0-1.2. Teks panjang (artikel, deskripsi) — leading lebih besar, hingga 1.8 untuk keterbacaan maksimal.

Data eksperimental: penelitian Wichita State University Software Usability Laboratory menunjukkan bahwa leading 1.5 meningkatkan kecepatan membaca sebesar 7.5% dibandingkan dengan leading 1.0 pada lebar baris yang sama. Untuk pengguna dengan disleksia, leading optimal bahkan lebih tinggi — hingga 1.8. Data ini dikonfirmasi oleh rekomendasi WCAG 2.2, yang mengharuskan kemungkinan peningkatan spasi antar baris hingga 1.5 tanpa kehilangan konten.

Pengaruh jenis huruf: font dengan x-height tinggi (tinggi relatif huruf kecil) membutuhkan leading yang lebih besar daripada font dengan x-height rendah. Misalnya, Helvetica (x-height tinggi) merekomendasikan leading 1.5 untuk body text, sedangkan Didot (x-height rendah) — 1.3. Ini karena pada x-height tinggi, baris secara visual lebih cepat menyatu pada spasi antar baris yang sama.

Implementasi leading di iOS melalui NSParagraphStyle

Di iOS, spasi antar baris dikelola melalui kelas NSMutableParagraphStyle, yang berisi dua properti kunci: lineSpacing (spasi tambahan antar baris dalam poin) dan lineHeightMultiple (pengali tinggi baris). Properti ini bekerja bersama: tinggi total baris dihitung sebagai tinggi alami font dikalikan dengan lineHeightMultiple ditambah lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metode 1: pengali tinggi baris
paragraphStyle.lineHeightMultiple = 1.5

// Metode 2: spasi tambahan antar baris
paragraphStyle.lineSpacing = 4.0

// Terapkan melalui NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — metode yang lebih disukai, karena secara otomatis berskala saat ukuran font berubah. lineSpacing diatur dalam poin absolut dan tidak berskala, yang dapat menyebabkan ketidaksesuaian saat menggunakan Dynamic Type. Menurut Apple Text Programming Guide, untuk antarmuka yang kompatibel dengan accessibility, gunakan lineHeightMultiple dalam kombinasi dengan UIFontMetrics.

SwiftUI menyediakan pengubah .lineSpacing() untuk Text dan VStack. Berbeda dengan UIKit, di SwiftUI spasi antar baris diatur dalam titik dan tidak memiliki pengali bawaan. Untuk mengimplementasikan pengali, pengembang perlu menghitung spasi antar baris secara manual berdasarkan ukuran font. Keterbatasan: SwiftUI tidak mendukung lineHeightMultiple secara langsung — gunakan .lineSpacing(CGFloat) dengan nilai yang dihitung.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% dari ukuran font
    }

    var body: some View {
        Text("Spasi baris")
        Text("Pengali 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Konfigurasi spasi antar baris di Android

Di Android, spasi antar baris diatur melalui dua atribut TextView: lineSpacingExtra (spasi tambahan dalam px) dan lineSpacingMultiplier (pengali tinggi baris, default 1.0). Mirip dengan iOS, pengali berskala saat ukuran font berubah, sedangkan extra adalah nilai absolut. Untuk antarmuka yang kompatibel dengan accessibility, penggunaan pengali lebih disukai.

// Dalam tata letak XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Secara terprogram di Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — framework UI Android modern — menggunakan parameter lineHeight dalam pengubah TextStyle. Berbeda dengan pendekatan XML, di Compose lineHeight diatur sebagai tinggi baris penuh dalam sp (default = fontSize * 1.2). Untuk mengatur pengali, pengembang menentukan lineHeight sebagai persentase dari fontSize: Contoh: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) menghasilkan pengali 1.5.

Keterbatasan: di Android sebelum API 28, lineSpacingExtra dan lineSpacingMultiplier tidak berfungsi dengan benar dengan beberapa font, terutama font kustom (TTF/OTF). Disarankan untuk menguji pada perangkat nyata dan mempertimbangkan bahwa systemTextView secara default menggunakan lineSpacingMultiplier 1.0 — tanpa spasi tambahan. Untuk teks panjang di ScrollView, pastikan untuk mengatur spasi antar baris secara eksplisit.

Spasi antar baris dalam pengembangan web melalui CSS line-height

Di web, spasi antar baris diatur oleh properti CSS line-height, yang dapat berupa angka (pengali), nilai persentase, satuan panjang (px, em), atau kata kunci normal. Pengali numerik — metode yang lebih disukai, karena diwariskan dan berskala relatif terhadap ukuran font elemen turunan. Nilai normal setara dengan sekitar 1.2 untuk sebagian besar font.

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

Pengali numerik vs em: line-height: 1.5 dan line-height: 1.5em adalah hal yang berbeda. Pengali numerik diwariskan sebagai nilai terhitung dan dihitung ulang untuk setiap elemen turunan berdasarkan font-size-nya. Em diwariskan sebagai nilai terhitung tetap berdasarkan font-size induk. Ini adalah perbedaan kritis: ketika font-size: 20px ditempatkan di dalam font-size: 16px, line-height: 1.5 menghasilkan 30px, sedangkan line-height: 1.5em — 24px (dari induk). Rekomendasi: selalu gunakan pengali numerik.

Perbandingan pengaturan leading di iOS, Android dan web

Meskipun API berbeda, prinsip konfigurasi spasi antar baris sama di semua platform. Pengali (multiplier) berskala saat ukuran font berubah dan ramah terhadap accessibility. Nilai absolut (spacing) tidak berskala dan dapat menyebabkan masalah saat menggunakan Dynamic Type atau pengaturan teks besar.

Strategi lintas platform: tetapkan lineHeight dalam sistem desain sebagai pengali dari fontSize. Misalnya, dalam token desain: line-height-body = 1.5, line-height-heading = 1.1. Setiap platform mengimplementasikan pengali ini dengan API-nya sendiri: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Ini menjamin hasil visual yang sama di semua platform.

Nuansa penting: di iOS, lineHeightMultiple diterapkan pada tinggi baris penuh (termasuk ascender + descender font), sedangkan di Android, lineSpacingMultiplier — pada tinggi baris yang dihitung oleh mesin render Minikin. Dalam praktiknya, ini menyebabkan perbedaan kecil dalam leading visual pada nilai pengali yang sama. Untuk kesesuaian pixel-perfect, gunakan nilai absolut dengan penyesuaian platform.