Membuat Tipografi yang Mudah Dibaca

Seluruh property sudah ada di tangan kita: ukuran, ketebalan, jarak antarbaris, perataan, sampai spasi antarhuruf. Tantangan chapter penutup section ini bukan menambah property baru, melainkan merangkainya menjadi satu keputusan desain yang tujuannya tunggal — teks yang tetap nyaman dibaca dalam waktu lama. Kita bahas enam angka pragmatis yang dipegang para desainer, lihat apa yang terjadi bila salah satunya dilanggar, lalu merakit satu blok CSS artikel yang bisa langsung disalin ke proyek.

Enam Aturan Kenyamanan Membaca #

Empat aturan pertama sudah tersedia property-nya dari chapter-chapter sebelumnya; dua aturan terakhir kita dalami sedikit.

Hierarki Lewat Tiga Sumber Kontras #

Hierarki dibangun dari perbedaan, dan perbedaan bisa datang dari tiga sumber: ukuran (font-size), ketebalan (font-weight), dan warna (color). Dua sumber saja sudah cukup untuk kebanyakan kasus — judul yang lebih besar dan lebih tebal, plus teks pendukung yang sedikit lebih pudar. Pastikan teks yang dipudarkan tetap memenuhi kontras minimal; standar kontras teks dibahas pada chapter Kontras Warna di section Warna, Background, dan Borders.

Mengapa Justify Dihindari #

text-align: justify menyamakan tepi kanan dengan merentangkan spasi antarkata. Pada layar lebar hasilnya kadang masih bisa diterima, tetapi pada kolom sempit spasi antarkata menjadi tidak merata dan mata kehilangan ritme. Teks bahasa Indonesia juga tidak dipecah otomatis dengan tanda hubung oleh browser, sehingga tidak ada penyeimbangnya. Rata kiri adalah pilihan paling aman untuk teks baca di web.

Satu Blok CSS untuk Artikel yang Nyaman #

.artikel {
  max-width: 65ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.65;
  color: #374151;
}

.artikel p {
  margin-bottom: 1em;
}

.artikel h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

Mari kita baca keputusannya satu per satu:

1. max-width: 65ch — satuan ch adalah lebar karakter “0”, sehingga 65ch menahan panjang baris di sekitar 65 karakter, tepat di tengah rentang 45-75. Karena satuannya relatif, batas ini tetap masuk akal bila ukuran huruf diubah.
2. margin-inline: auto — kolom teks yang sudah dibatasi lebarnya diletakkan di tengah halaman, bukan menempel di tepi kiri.
3. font-size: 1rem — setara 16px pada konfigurasi default, dan ikut menyesuaikan bila pengguna memperbesar ukuran dasar di pengaturan browser.
4. line-height: 1.65 — berada di tengah rentang 1.5-1.7; ditulis tanpa satuan agar rasionya diwariskan, sesuai kebiasaan dari chapter line-height.
5. color: #374151 — abu gelap yang lebih nyaman daripada hitam penuh, tetapi tetap lolos ambang kontras 4.5:1 di latar putih.
6. .artikel p { margin-bottom: 1em } — jarak antarparagraf konsisten dan ikut menskala bersama ukuran huruf.
7. .artikel h2 — judul bagian 1.5 kali ukuran isi, line-height lebih rapat karena teksnya pendek, letter-spacing: -0.01em dari chapter letter-spacing, dan margin-top yang besar memberi ruang sebelum bagian baru dimulai.

Demo berikut membandingkan artikel yang sama sebelum dan sesudah penyetelan:

Isinya sama; yang berubah hanya keputusan tipografinya.

Kesalahan Umum #

Ringkasan #

Enam angka pragmatis memegang kenyamanan membaca: panjang baris 45-75 karakter lewat max-width: 65ch, line-height 1.5-1.7, ukuran minimal 16px, jarak antarparagraf 1em, hierarki lewat ukuran-ketebalan-warna, dan perataan kiri. Blok CSS artikel pada chapter ini menjadi titik awal yang bisa disalin ke proyek mana pun. Section Typography sampai di sini; pada section Display dan Normal Flow kita beralih dari teks ke kotak — bagaimana setiap elemen dirender sebagai box dan bagaimana browser menyusunnya dalam alur dokumen.