Teks yang rapat antar barisnya melelahkan mata, sedangkan teks yang terlalu renggang terasa lepas dari konteks. Properti line-height mengontrol tinggi setiap baris teks, dan angka kecil ini berdampak besar pada kenyamanan membaca halaman. Nilai yang lazim untuk teks isi berada di kisaran 1.5 hingga 1.7 kali ukuran font. Kita mulai dari tiga bentuk nilai yang diterima, lalu membahas perbedaan pewarisannya — bagian yang sering mengejutkan pemula.

Tiga Bentuk Nilai line-height #

Bentuk pertama adalah angka tanpa satuan (unitless), misalnya line-height: 1.5; tinggi baris menjadi 1.5 dikali font-size elemen tersebut. Bentuk kedua adalah panjang, misalnya 24px atau 1.5rem. Bentuk ketiga adalah persentase, misalnya 200%, yang dihitung dari font-size elemen itu sendiri. Pada elemen yang bersangkutan, ketiganya bisa menghasilkan ukuran yang sama: pada font 16px, nilai 1.5, 24px, dan 150% sama-sama menghasilkan baris 24px.

Perbedaan muncul ketika nilai diwariskan ke anak, karena yang diwariskan bukan angka aslinya, melainkan hasilnya:

  • Unitless: faktor 1.5 yang diwariskan, lalu dikali font-size masing-masing anak. Elemen anak tetap menjaga proporsi.
  • Panjang dan persen: hasil perhitungan pada induk yang diwariskan, berapa pun font-size anaknya.

Karena itulah rekomendasi yang berlaku umum di industri adalah menulis line-height secara unitless untuk teks. Faktor skala ikut berpindah ke semua turunan, sehingga judul besar dan keterangan kecil sama-sama mendapat proporsi yang wajar tanpa kita mengulang deklarasi.

Perhatikan juga bahwa line-height tidak hanya soal kenyamanan — nilainya menentukan tinggi kotak setiap baris, dan tinggi baris inilah yang menyusun tinggi total paragraf. Mengubahnya berarti mengubah ruang vertikal halaman: paragraf 16px dengan faktor 1.5 menghasilkan baris 24px, sedangkan faktor 1.2 menghasilkan 19.2px. Angka panduan yang lazim dipakai: judul berada di kisaran 1.1–1.3 (baris rapat membuat judul terasa satu kesatuan), teks isi di kisaran 1.5–1.7, dan keterangan kecil bisa sedikit lebih longgar lagi karena huruf kecil membutuhkan ruang lega di sekelilingnya agar tetap terbaca.

Melihat Perbedaan Pewarisan dalam Kode #

Demo chapter ini menampilkan dua arena yang identik ukurannya, hanya berbeda bentuk line-height:

css 
.arena-unitless {
  font-size: 20px;
  line-height: 1.5;
}
.arena-px {
  font-size: 20px;
  line-height: 24px;
}
.kecil { font-size: 12px; }

Mari kita telaah baris demi baris:

  1. Baris 1–4 (.arena-unitless): font 20px dengan faktor 1.5 menghasilkan baris 30px pada induk. Anak .kecil (12px) mewarisi faktor 1.5, sehingga barisnya menjadi 18px.
  2. Baris 5–8 (.arena-px): font 20px dengan baris tetap 24px pada induk. Anak .kecil mewarisi hasil 24px — bukan faktor — sehingga barisnya tetap 24px meski hurufnya hanya 12px.
  3. Baris 9 (.kecil): satu class yang dipakai kedua arena agar perbandingan berlaku pada elemen yang identik.

Hasil di Browser:

text 
Arena unitless: induk font 20px berbaris 30px, anak 12px berbaris 18px.
Arena px: induk font 20px berbaris 24px, anak 12px tetap berbaris 24px
(huruf kecil dengan jarak baris induk yang renggang).
Baris pembanding pada font 16px: 1.5 menjadi 24px, 24px menjadi 24px,
200% menjadi 32px, dan normal tercatat "normal".

Untuk kasus khusus seperti tombol atau badge, line-height kadang dipakai menyaingi tinggi elemen agar teks berada di tengah secara vertikal; cara yang lebih disarankan saat ini adalah flexbox yang dibahas pada Section Layout. Selanjutnya kita menggeser perhatian dari jarak vertikal ke posisi teks horizontal pada Text Alignment .