Line Height

Dua paragraf dengan font dan ukuran yang sama bisa terasa sangat berbeda saat dibaca: yang satu sesak, yang lain lega. Bedanya sering hanya satu property — line-height. Nilai ini mengatur jarak antarbaris, dan cara menulisnya menentukan apakah jarak itu ikut menyesuaikan ukuran huruf pada elemen-elemen di dalamnya. Pada chapter ini kita mempelajari cara menghitung tinggi baris, rasio tanpa satuan yang direkomendasikan, jebakan pewarisan persen, serta angka yang nyaman untuk teks isi.

Cara Menghitung Tinggi Baris #

line-height bekerja sebagai pengali: nilai rasio dikalikan font-size menghasilkan tinggi setiap baris teks.

.paragraf-artikel {
  font-size: 16px;
  line-height: 1.5; /* 16 × 1,5 = 24px per baris */
}

Semakin besar rasio, semakin lega jarak antarbarisnya.

Rasio Tanpa Satuan: Pilihan Terbaik #

Cara menulis yang direkomendasikan adalah angka tanpa satuan, misalnya 1.5. Alasannya ada pada pewarisan: nilai tanpa satuan diwariskan sebagai rasio, sehingga setiap elemen anak menghitung ulang jarak baris dari font-size-nya sendiri. Judul besar dan caption kecil sama-sama mendapat jarak yang proporsional dari satu deklarasi di induk.

.artikel { line-height: 1.6; }

Pola kodenya membandingkan dua pendekatan berikut:

.induk-persen { font-size: 16px; line-height: 150%; } /* anak mewarisi 24px */
.induk-rasio  { font-size: 16px; line-height: 1.5;  } /* anak mewarisi rasio 1,5 */

Angka yang Nyaman #

Pedoman aksesibilitas WCAG menyarankan jarak antarbaris minimal 1,5 kali ukuran font untuk teks isi. Untuk tampilan yang lebih enak dibaca, kisaran ini menjadi pegangan umum:

Heading memakai rasio lebih rapat karena barisnya pendek dan jarang melipat; jarak yang terlalu lega justru memutus kesatuan visual judul.

Demo berikut membandingkan dua ujung kisaran itu pada teks yang sama:

Ritme Vertikal dengan rem #

Jarak antarbaris yang konsisten menjadi dasar ritme vertikal halaman: spasi antarelemen mengikuti kelipatan yang sama. Pasangkan line-height tanpa satuan dengan margin ber-satuan rem:

.artikel { line-height: 1.6; }
.artikel p + p { margin-top: 1rem; }

Ringkasan #

line-height dihitung sebagai rasio dikali font-size, dan bentuk tanpa satuan adalah pilihan terbaik karena diwariskan sebagai rasio yang dihitung ulang tiap elemen. Persen dan piksel menyesatkan: keduanya mengunci nilai hitungan yang diwarisi anak, membuat teks besar tampil rapat. Pegangan praktisnya 1,5–1,7 untuk teks isi dengan minimal 1,5 demi aksesibilitas. Dengan jarak antarbaris beres, chapter berikutnya mengatur posisi teks di dalam bloknya melalui text-align.