csstipografiline-heightPemula4 mnt baca

Line Height dan Spasi

line-height tanpa satuan, letter-spacing, word-spacing, dan keterbacaan teks.

line-height: tanpa satuan lebih baik

css

p {
  line-height: 1.6; /* BAIK: pengali dari font-size */
}

p {
  line-height: 24px; /* KURANG BAIK: nilai mati */
}

line-height: 1.6 berarti 1.6 × font-size, dan diwariskan sebagai pengali. Kalau anak mengubah font-size, line-height ikut menyesuaikan. Versi px diwariskan sebagai nilai mati dan merusak proporsi.

Nilai ideal: 1.5-1.7 untuk body text, 1.1-1.3 untuk heading besar.

letter-spacing dan word-spacing

css

.judul-kecil {
  letter-spacing: 3px;      /* renggang antar huruf, gaya label */
  text-transform: uppercase;
}

.teks-lebar {
  word-spacing: 8px;        /* jarang dipakai, hati-hati */
}

letter-spacing positif kecil (1-3px) + uppercase = gaya label modern. Nilai negatif (-0.5px) merapatkan, kadang dipakai untuk heading besar agar terlihat kokoh.

Keterbacaan: aturan praktis

Panjang baris ideal: 45-75 karakter (max-width: 65ch, ch = lebar karakter "0").
Jangan center-align paragraf panjang.
Kontras cukup, ukuran minimal 16px untuk body.

Catatan teknis: line-height tanpa satuan adalah satu dari sedikit properti yang perilakunya berubah drastis antara versi bersatuan dan tidak. Selalu pakai tanpa satuan kecuali ada alasan khusus.

Analogi: jarak antar baris di buku

Line-height seperti spasi baris di buku pelajaran: terlalu rapat (1.0) membuat mata lelah mencari baris berikutnya; terlalu renggang (2.5) membuat teks terputus-putus. Buku yang nyaman dibaca memakai 1.5-1.7 untuk isi, 1.1-1.3 untuk judul.

Letter-spacing dan word-spacing seperti mengatur kelonggaran huruf dan kata: sedikit kelonggaran pada judul besar terlihat mewah, pada paragraf justru mengganggu.

Kenapa angka tanpa satuan untuk line-height?

line-height: 24px mengunci tinggi baris. Kalau font-size berubah (misal diwariskan ke elemen dengan font lebih besar), tinggi baris tetap 24px dan teks bertumpuk! line-height: 1.5 berarti "1.5x font-size elemen INI", selalu proporsional.

css

/* SALAH: rapuh saat font berubah */
.teks { font-size: 16px; line-height: 24px; }
.teks-besar { font-size: 32px; } /* mewarisi 24px -> bertumpuk! */

/* BENAR: selalu proporsional */
.teks { font-size: 16px; line-height: 1.5; }
.teks-besar { font-size: 32px; } /* otomatis 48px */

Contoh bertahap: kenyamanan baca

Rapat dan melelahkan:

css

.artikel { line-height: 1.2; }

Nyaman:

css

.artikel {
  line-height: 1.7;
  letter-spacing: 0.01em; /* sedikit napas antar huruf */
}

.artikel h2 {
  line-height: 1.25;      /* judul: lebih rapat */
  letter-spacing: -0.01em;
  margin-top: 2em;        /* jeda sebelum topik baru */
}

Aturan praktis: body 1.5-1.8, judul 1.1-1.3. Judul rapat terlihat kokoh; paragraf lega mudah dibaca.

Kesalahan umum pemula

Salah: line-height px diwariskan. Sudah dibahas di atas: pakai angka tanpa satuan.

Salah: letter-spacing besar untuk paragraf. letter-spacing: 0.2em pada body text membuat teks terputus-putus. Simpan untuk judul kecil/kapital (eyebrow text).

Salah: mengabaikan margin antar blok. Line-height mengatur dalam paragraf; jarak ANTAR paragraf/judul pakai margin. Keduanya bekerja sama membentuk ritme vertikal.

Latihan kilat

Paragraf 16px terasa sesak dengan line-height: 20px. Perbaiki dengan cara yang tetap proporsional bila font diperbesar.
Elemen anak mewarisi line-height: 24px dari induk tapi font-nya 32px sehingga teks bertumpuk. Jelaskan akar masalahnya dan perbaikannya.
Aturan praktis line-height untuk body vs judul? Tulis angkanya.

Kunci: (1) line-height: 1.5; (angka tanpa satuan). (2) px mengunci tinggi baris; perbaiki induk menjadi line-height: 1.5; agar mengikuti font tiap elemen. (3) Body 1.5-1.8; judul 1.1-1.3.

Istilah kunci

line-height: jarak antar baris teks.
Unitless: angka tanpa satuan (1.5) yang proporsional terhadap font.
letter-spacing: jarak antar huruf.
word-spacing: jarak antar kata.
Ritme vertikal: pola jarak yang konsisten dari atas ke bawah halaman.

Spacing scale untuk ritme vertikal

css

:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px;
  --sp-4: 24px; --sp-5: 32px; --sp-6: 48px;
}

.artikel > * + * { margin-top: var(--sp-4); }
.section { padding-block: var(--sp-6); }

Ritme vertikal yang konsisten lahir dari skala spacing yang terbatas, bukan angka acak tiap elemen.

Rangkuman

line-height tanpa satuan (1.6 untuk body), letter-spacing untuk aksen label, dan jaga panjang baris 45-75 karakter untuk keterbacaan maksimal.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Artikel Nyaman Dibaca

Di playground:

Ubah .badan menjadi line-height: 24px (nilai mati), lalu tambahkan elemen span berukuran 24px di dalamnya. Amati barisnya bertabrakan. Kembalikan ke 1.7 dan jelaskan di komentar kenapa versi tanpa satuan menang.
Buat .label lebih renggang: letter-spacing 5px.
Batasi .badan agar maksimal 60ch.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox