Hierarki teks adalah urutan baca yang kamu atur lewat tampilan teks: mana yang dibaca pertama, kedua, dan terakhir, tanpa pembaca harus membaca semuanya dulu. Bayangin koran yang digantung di kios. Dari jauh kamu sudah bisa baca judul besarnya, dari dekat kamu lihat subjudulnya, dan beritanya baru terbaca kalau korannya kamu pegang. Redaksi koran mengatur itu dengan empat alat: ukuran, tebal, warna tinta, dan jarak. Kamu pakai empat alat yang sama di CSS.
🧪 Tebakan cepat: Catatan kecil di kartu kamar diberi warna abu-abu muda
#9CA3AFdi atas latar putih, supaya terlihat "kurang penting". Masih lolos sebagai teks yang bisa dibaca semua orang? Jawabannya ada di bagian "Warna: makin terang, tapi tetap terbaca".
Empat teks, tiga level
Kartu pesan Homestay Kabut punya empat teks. Urutannya diputuskan dari riset Bu Sri: dari 40 chat tamu, 11 bertanya "Totalnya berapa?". Jadi total naik ke level 2, tepat di bawah nama kamar.
| Teks | Level | Kenapa |
|---|---|---|
| Kamar Teras | 1 (primary) | Tamu memastikan kamar yang dia pesan |
| 2 malam × Rp 350.000 = Rp 700.000 | 2 (secondary) | Angka yang dia bayar, pertanyaan nomor dua terbanyak |
| Rp 350.000 / malam · 2 tamu | 3 (tertiary) | Detail pendukung, sudah masuk ke total |
| Gratis batal sampai 3 hari sebelum check-in. | 3 (tertiary) | Penting, tapi dibaca setelah tamu yakin |
Cukup 3 level. Kalau tiap teks punya gaya sendiri, gak ada lagi yang terasa paling penting.
Kode hierarkinya
<p class="room">Kamar Teras</p>
<p class="price">Rp 350.000 / malam · 2 tamu</p>
<p class="total">2 malam × Rp 350.000 = Rp 700.000</p>
<p class="note">Gratis batal sampai 3 hari sebelum check-in.</p>
<style>
p { margin: 0; }
/* Level 1: 36px, paling tebal, paling gelap */
.room { font-size: 2.25rem; font-weight: 700; color: #111827; line-height: 1.2; margin-bottom: 4px; }
/* Level 3: 16px, regular, abu-abu sedang, baris longgar */
.price { font-size: 1rem; font-weight: 400; color: #6B7280; line-height: 1.6; margin-bottom: 16px; }
/* Level 2: 20px, semibold, abu-abu gelap */
.total { font-size: 1.25rem; font-weight: 600; color: #374151; line-height: 1.2; margin-bottom: 4px; }
/* Level 3 lagi */
.note { font-size: 1rem; font-weight: 400; color: #6B7280; line-height: 1.6; }
</style>
- Ukuran turun dari 2.25rem (36px) ke 1.25rem (20px) ke 1rem (16px). Nama kamar 2,25 kali teks isi.
- Tebal turun dari 700 ke 600 ke 400.
- Warna makin terang:
#111827,#374151,#6B7280. Teks yang paling penting paling gelap, jadi paling kontras dengan latar putih. - Jarak: nama kamar dan harganya cuma berjarak 4px, jadi terbaca sebagai satu kelompok. Jarak 16px sebelum total memisahkan kelompok berikutnya.
Di latihan, tiga level yang sama ditulis di h1, h2, dan p.
Hapus pembedanya satu per satu
Cara mengecek hierarki: matikan satu pembeda, biarkan yang lain, lalu lihat apa yang masih kebaca. Di Lab kamu bisa melakukannya di teks yang sama.
| Yang dimatikan | Yang terjadi |
|---|---|
| Ukuran (semua 16px) | Nama kamar masih paling tebal dan paling gelap, tapi gak lagi menonjol dari jauh |
| Tebal (semua 400) | Urutan tetap terbaca dari ukuran dan warna |
Warna (semua #6B7280) |
Urutan tetap terbaca dari ukuran dan tebal |
| Jarak (semua 8px) | Harga gak lagi menempel ke nama kamar, kelompoknya hilang |
| Keempatnya | Empat baris sama persis: tamu harus membaca semuanya |
Hierarki yang kuat memakai beberapa pembeda sekaligus. Kalau satu hilang, misalnya warna di layar HP yang redup, urutannya tetap terbaca. Cara cepat mengeceknya: uji juling. Sipitkan mata atau buramkan halaman (filter: blur(3px)). Yang masih kelihatan adalah level 1 dan 2.
Warna: makin terang, tapi tetap terbaca
Warna yang makin terang membuat teks terasa kurang penting, tapi ada batas bawahnya. Batas itu diukur dengan rasio kontras: perbandingan terang teks dan latarnya, dari 1:1 (sama persis) sampai 21:1 (hitam di atas putih). WCAG 2.2, standar aksesibilitas web, minta minimal 4,5:1 untuk teks biasa (kriteria 1.4.3, level AA).
Rumusnya: (L terang + 0,05) ÷ (L gelap + 0,05). L adalah luminans relatif, 0 untuk hitam dan 1 untuk putih. Untuk #6B7280 di atas putih: L = 0,1672, jadi (1 + 0,05) ÷ (0,1672 + 0,05) = 4,83:1. Lolos.
| Warna | Dipakai untuk | Kontras di atas putih |
|---|---|---|
#111827 |
Primary text | 17,74:1 |
#374151 |
Secondary text | 10,31:1 |
#4B5563 |
Secondary text (pilihan lain) | 7,56:1 |
#6B7280 |
Tertiary text | 4,83:1 |
#9CA3AF |
Teks nonaktif, misalnya tombol yang gak bisa ditekan | 2,54:1 |
Jadi jawaban tebakannya: gak lolos. #9CA3AF cuma 2,54:1, jauh di bawah 4,5:1. Catatan aturan batal yang dibaca 8 dari 40 tamu jadi susah dibaca justru oleh orang yang matanya sudah gak setajam dulu, seperti Pak Hadi. Abu-abu paling terang yang masih aman untuk teks isi di palet ini adalah #6B7280.
Line-height: rapat untuk judul, longgar untuk isi
Line-height (tinggi baris) juga bagian dari hierarki. Tulis tanpa satuan, jadi dikalikan ukuran font-nya sendiri:
- Heading: 1,1 sampai 1,3. Nama kamar 36px × 1,2 = 43,2px. Judul besar dengan baris longgar terlihat seperti dua judul terpisah.
- Body text: 1,5 sampai 1,7. Catatan 16px × 1,6 = 25,6px. Mata lebih gampang menemukan awal baris berikutnya.
- Artikel panjang: 1,6 sampai 1,8.
⚠️ Jebakan yang sering ketemu
- Semuanya dibuat penting. Lima teks bold dan besar berarti gak ada yang menonjol. Pilih satu level 1.
- Abu-abu terlalu terang.
#9CA3AF(2,54:1) cuma pantas untuk komponen nonaktif, yang memang dibebaskan WCAG dari aturan kontras. Teks yang harus dibaca, termasuk placeholder, butuh 4,5:1. Hitung kontrasnya, jangan ditebak. - Lupa gaya bawaan heading.
h2sudah tebal 700 dari browser. Kalau mau 600, tulisfont-weight: 600sendiri. - Line-height pakai px.
line-height: 24pxcocok untuk teks 16px, tapi bikin baris judul 36px bertumpuk. Pakai angka tanpa satuan.
TL;DR: Hierarki teks adalah urutan baca yang diatur lewat ukuran, tebal, warna, dan jarak. Cukup 3 level: primary (2.25rem, 700, #111827), secondary (1.25rem, 600, #374151 atau #4B5563), tertiary (1rem, 400, #6B7280, line-height 1.6). Cek hierarki dengan mematikan pembeda satu per satu dan dengan uji juling: yang masih kelihatan harus level 1 dan 2. Warna boleh makin terang asal kontrasnya minimal 4,5:1 (WCAG AA): #6B7280 4,83:1 lolos, #9CA3AF 2,54:1 gak lolos. Line-height heading 1,1 sampai 1,3, body text 1,5 sampai 1,7, ditulis tanpa satuan.
