Line Height dalam pengembangan aplikasi — apa itu dan pengaruhnya pada tipografi

Apa itu Line Height dalam tipografi

Line Height (tinggi baris) — adalah parameter fundamental tipografi yang menentukan jarak antara garis dasar (baseline) baris berurutan. Dalam pengembangan web dan seluler, line height mengatur ritme vertikal teks: setiap baris menempati tinggi tertentu, dan parameter ini bertambah saat beralih ke baris berikutnya. Line height tidak hanya mencakup tinggi sebenarnya dari glyph (ascender + descender), tetapi juga ruang tambahan yang meningkatkan keterbacaan.

Secara matematis, line height dinyatakan sebagai: line-height = font-size × multiplier. Jika font-size = 16 px dan multiplier = 1.5, maka line-height = 24 px. Spasi antar baris (leading) dalam kasus ini adalah 24 - (ascender + descender) piksel. Sebagian besar sistem desain dan platform menggunakan pengali, karena secara otomatis berskala saat ukuran font berubah.

Menurut Material Design Type Scale (2025), line height — salah satu dari tiga parameter kunci sistem tipografi aplikasi di samping font-size dan font-weight. Nilai line height yang konsisten untuk semua tingkat hierarki tipografi menciptakan ritme vertikal yang membuat antarmuka terlihat kohesif. Penyimpangan line-height sebesar 10% dari nilai optimal sudah terlihat dengan mata telanjang dan menurunkan kualitas antarmuka yang dirasakan.

Line Height vs Leading: apa perbedaannya

Leading (diucapkan „lending") — adalah istilah tipografi historis yang menunjukkan jarak antar baris dari baseline ke baseline dikurangi tinggi glyph. Dalam penyusunan huruf logam, leading — strip timah yang disisipkan di antara baris untuk meningkatkan jarak. Line height — konsep yang lebih modern yang mencakup tinggi font dan leading.

Dalam praktiknya, perbedaan penting saat memindahkan mockup dari Figma atau Sketch ke kode. Alat desain biasanya menunjukkan line-height (atau sekadar tinggi baris). Di platform seluler, API bisa disebut berbeda: iOS menggunakan istilah lineSpacing (lebih dekat ke leading) bersama minimumLineHeight/maximumLineHeight, Android — LineHeightStyle dengan alignment dan trim, Flutter — height (unitless multiplier).

// iOS: perbedaan antara line height dan line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Pengaturan line height langsung
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Spasi baris (ruang tambahan antar baris)
paragraphStyle.lineSpacing = 4.0  // ditambahkan ke line height alami font

Perbedaan utama: jika Anda mengatur minimumLineHeight, semua baris akan memiliki tinggi yang sama, yang baik untuk grid berirama. Jika Anda hanya mengatur lineSpacing, tinggi baris akan berubah tergantung ukuran font — pendekatan yang lebih fleksibel tetapi kurang dapat diprediksi. Untuk sistem desain, disarankan menggunakan minimumLineHeight karena memberikan hasil yang terkontrol secara ketat.

Menurut IBM Carbon Design System — Typography Guidelines (2025), perbedaan antara line height dan leading terutama terlihat saat menggunakan font khusus. Jika font memiliki leading bawaan yang besar (misalnya, SF Pro), lineSpacing = 0 memberikan hasil yang dapat diterima. Jika leading font kecil (beberapa font open-source), tanpa lineSpacing tambahan, baris akan terlihat menempel.

Line Height optimal untuk antarmuka seluler

Line height optimal tergantung pada beberapa faktor: ukuran font, panjang baris, jenis font, dan audiens target. Untuk teks utama di perangkat seluler (panjang baris 35–55 karakter), rentang yang direkomendasikan adalah 1.4–1.6 dari font-size. Nilai ini memberikan interval vertikal yang cukup untuk perpindahan pandangan yang nyaman antar baris tanpa kehilangan kohesi visual teks.

Untuk judul, di mana panjang baris biasanya lebih pendek (2–6 kata), line height bisa lebih kecil — 1.1–1.25 dari font-size. Judul tidak memerlukan spasi antar baris yang besar, karena fungsi utamanya adalah menarik perhatian, bukan membaca panjang. Selain itu, ukuran judul besar (24–32 pt) dengan line-height 1.5 akan menciptakan spasi berlebihan yang mengganggu ritme vertikal halaman.

• Teks utama (16–18 pt) — line-height 1.4–1.6. Minimal untuk membaca nyaman di perangkat seluler, di mana panjang baris dibatasi lebar layar.
• Teks kecil (11–13 pt) — line-height 1.3–1.5. Ukuran kecil memerlukan pengali yang lebih kecil, karena baris lebih pendek dan mata lebih cepat menemukan baris berikutnya.
• Teks besar (20–32 pt) — line-height 1.1–1.25. Semakin besar font, semakin sedikit spasi antar baris relatif yang diperlukan untuk keterbacaan.
• Teks monospace — line-height 1.3–1.5. Font monospace (untuk kode) biasanya memiliki metrik yang lebih besar, sehingga line-height dapat dikurangi menjadi 1.3.

// Flutter: line height dalam sistem desain
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

Menurut W3C — Accessibility Requirements for Typography (2025), line height di bawah 1.2 untuk teks utama dianggap sebagai hambatan aksesibilitas: pengguna dengan disleksia dan gangguan penglihatan mengalami kesulitan signifikan saat membaca teks padat. WCAG 2.2 merekomendasikan line-height setidaknya 1.5 untuk konten utama, namun di antarmuka seluler nilai ini dapat diturunkan menjadi 1.4 mengingat lebar layar yang terbatas.

Line Height di iOS: UIKit dan SwiftUI

Di iOS, line height dikelola melalui NSMutableParagraphStyle atau pengubah bawaan SwiftUI. Di UIKit, tiga properti utama tersedia: minimumLineHeight dan maximumLineHeight (menentukan tinggi baris yang tepat) dan lineSpacing (spasi tambahan antar baris). Saat menggunakan TextKit (NSTextStorage, NSLayoutManager), line height diperhitungkan dalam lineFragmentRect dan memengaruhi perhitungan geometri blok teks.

// iOS UIKit: mengatur line height melalui NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Penting: minimum + maximum = line-height tetap

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

Di SwiftUI, line height diatur melalui pengubah .lineSpacing(value), yang menambahkan ruang ekstra antar baris, atau melalui .font dengan TextStyle kustom yang menyertakan line height. SwiftUI juga mendukung tipe dinamis: line height yang ditetapkan akan berskala saat pengguna mengubah ukuran font di pengaturan.

// SwiftUI: line height melalui lineSpacing
Text("Teks dengan spasi baris kustom
baris kedua
baris ketiga")
    .font(.body)
    .lineSpacing(4)     // ruang tambahan antar baris

// SwiftUI: line height tetap melalui gaya kustom
Text("Judul dengan line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompensasi untuk line-height yang presisi

Menurut Apple HIG — Typography Implementation (2025), saat menggunakan line-height tetap melalui minimumLineHeight, pastikan nilainya tidak lebih kecil dari line-height alami font. Jika minimumLineHeight lebih kecil dari ascender + descender, UIKit mengabaikan pengaturan dan menggunakan tinggi alami. Ini dapat menyebabkan hasil yang tidak terduga saat mengganti font atau ukuran.

Line Height di Android: sistem View dan Compose

Dalam pengembangan Android, line height dikelola secara berbeda di sistem View klasik dan Jetpack Compose. Di sistem View, metode TextView.setLineSpacing(extra, multiplier) digunakan. Parameter extra — ruang tambahan dalam piksel, multiplier — pengali tinggi alami baris. Tinggi akhir = line-height alami × multiplier + extra.

// Sistem View Android: spasi baris
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Penggunaan di XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Di Jetpack Compose, untuk mengelola line height digunakan kelas LineHeightStyle, yang memungkinkan pengaturan perataan (Alignment) dan pemotongan (Trim) ruang antar baris. Ini memberikan kontrol yang lebih halus daripada pengali sederhana. Misalnya, dapat ditentukan bahwa ruang antar baris tambahan harus didistribusikan secara merata di atas dan di bawah baris (align.Center) atau ditambahkan sepenuhnya di atas (align.Top).

// Jetpack Compose: contoh LineHeightStyle
Text(
    text = "Teks contoh
dengan LineHeightStyle kustom
di Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Pengali sederhana melalui TextStyle
Text(
    text = "Pengali line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Menurut Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (default) mempertahankan baris pertama dan terakhir dengan spasi, yang dapat mengganggu perataan di Card atau Column. Disarankan menggunakan Trim.Both untuk wadah dengan tinggi tetap dan Trim.LastLine untuk blok teks di mana tepi bawah penting.

Line Height di Flutter: TextStyle dan StrutStyle

Di Flutter, line height diatur melalui properti height dari kelas TextStyle. Ini adalah pengali unitless dari font-size: height: 1.5 dengan fontSize: 16 menghasilkan line-height 24.0. Nilai height secara implisit dikalikan dengan fontSize, sehingga saat ukuran berubah, line-height berskala secara proporsional. Flutter juga menawarkan StrutStyle — mekanisme untuk memaksakan line-height tetap terlepas dari glyph sebenarnya dalam baris.

// Flutter: line height melalui TextStyle.height
Text(
    'Teks dengan line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle untuk line height tetap
Text(
    'Teks dengan StrutStyle
line height tetap
terlepas dari glyph',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle sangat berguna untuk daftar dengan ukuran berbeda (misalnya, chat, feed berita), di mana semua baris harus memiliki tinggi yang sama terlepas dari konten. Tanpa StrutStyle, baris yang hanya berisi huruf tanpa descender akan memiliki tinggi sebenarnya lebih kecil daripada baris dengan huruf „p" dan „y", yang menyebabkan teks bergetar saat di-scroll.

Menurut Flutter Documentation — Text Layout (2025), StrutStyle dengan forceStrutHeight: true menjamin bahwa tinggi setiap baris akan sama dengan nilai yang ditetapkan, sementara glyph sejati akan sejajar pada baseline di dalam ruang ini. Ini adalah pendekatan standar untuk daftar teks di mana ritme vertikal sangat penting untuk persepsi visual.

Line Height adaptif untuk berbagai layar

Aplikasi seluler berjalan di perangkat dengan berbagai ukuran layar, kerapatan piksel, dan pengaturan aksesibilitas. Line height harus beradaptasi dengan perubahan ini, mempertahankan keterbacaan. Aturan dasar: gunakan pengali tanpa dimensi (unitless), bukan nilai tetap dalam px atau pt, sehingga line-height berskala bersama font-size.

Saat menggunakan Dynamic Type (iOS) atau fontScale (Android), ukuran font dapat meningkat 20–50% relatif terhadap dasar. Line-height yang ditetapkan melalui pengali secara otomatis berskala. Jika line-height ditetapkan sebagai nilai tetap (misalnya, 24 px pada font-size 16 pt), saat font ditingkatkan menjadi 22 pt, line-height relatif akan turun menjadi 1.09 — yang sudah di bawah ambang keterbacaan.

// iOS: line height adaptif dengan Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Hitung line-height sebagai pengali dari font dinamis
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Menurut Material Design — Responsive Typography (2025), untuk tablet dan layar besar (lebar di atas 600 dp), line-height teks utama disarankan ditingkatkan 0.1–0.2 relatif terhadap ponsel, karena panjang baris menjadi lebih besar. Untuk perangkat foldable, di mana lebar layar berubah secara dinamis, line-height harus dihitung ulang pada setiap perubahan konfigurasi.