Teks di halaman punya tiga peran. Title (judul) memberi nama: ini halaman apa. Body text (teks isi) adalah yang dibaca panjang. Callout adalah blok yang keluar dari alur bacaan untuk bilang "yang ini jangan sampai terlewat". Bayangin kemasan obat. Nama obatnya dicetak besar di depan, aturan pakainya berupa paragraf biasa, dan peringatannya dicetak di dalam kotak bergaris: "Jangan diminum saat perut kosong." Orang yang cuma melirik pun menangkap nama obat dan peringatannya.
🧪 Tebakan cepat: Callout aturan batal di halaman Kamar Teras punya latar biru muda
#EFF6FFdi halaman putih dan garis biru 4px di kirinya. Kalau garisnya dihapus, callout-nya masih kelihatan jelas? Jawabannya ada di bagian "Callout: dihitung, bukan dikira".
Halaman detail Kamar Teras
Ini halaman detail kamar Homestay Kabut, dengan tiga peran teksnya:
<h1 class="title">Kamar Teras</h1>
<p class="body">Kamar di lantai dua dengan teras kayu yang menghadap kebun kentang. Pagi hari kabut turun sampai ke pagar, jadi siapkan jaket. Air panas menyala sepanjang hari dan sarapan nasi goreng disajikan jam tujuh.</p>
<div class="callout">Gratis batal sampai 3 hari sebelum check-in. Untuk check-in 12 Des, berarti paling lambat 9 Des.</div>
<style>
body { font-family: system-ui, sans-serif; color: #1f2937; }
.title { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; }
.body { font-size: 1rem; line-height: 1.6; max-width: 65ch; color: #374151; margin: 0 0 16px; }
.callout {
padding: 1rem 1.5rem;
border-left: 4px solid #3B82F6;
background-color: #EFF6FF;
color: #374151;
border-radius: 0 8px 8px 0;
}
</style>
Kenapa callout-nya untuk aturan batal? Karena 8 dari 40 chat tamu ke Bu Sri menanyakan "Bisa batal gak?". Pertanyaan yang sering muncul pantas dapat tempat yang gak bisa terlewat.
Title: besar, tebal, dan dekat dengan isinya
font-size: 1.875rem= 30px. Itu 30 ÷ 16 = 1,875 kali teks isi. Judul minimal sekitar 1,5 kali teks isi supaya jelas beda level.font-weight: 700, tebal.h1sudah 700 dari browser, tapi menulisnya membuat niatmu jelas.margin: 0 0 0.5rem: jarak bawah 8px. Judul lebih dekat ke paragraf di bawahnya daripada ke apa pun di atasnya, jadi mata membacanya sebagai satu kelompok.line-height: 1.2: rapat, karena judul besar.- Isinya singkat, idealnya satu baris: "Kamar Teras", bukan "Informasi Lengkap Mengenai Kamar Teras Kami".
Body text: 16px, baris longgar, lebar terbatas
font-size: 1rem(16px), ukuran teks isi yang nyaman.line-height: 1.6: tiap baris 16 × 1,6 = 25,6px.color: #374151: abu-abu gelap, bukan hitam pekat. Kontrasnya di atas putih masih 10,31:1, jauh di atas batas 4,5:1.max-width: 65ch: lebar maksimal 65 kali lebar karakter "0" di font itu. Satuanchsama dengan lebar angka 0.
Kenapa dibatasi? Baris yang terlalu panjang bikin mata kehilangan awal baris berikutnya. Robert Bringhurst di The Elements of Typographic Style menyebut 45 sampai 75 karakter per baris sebagai panjang yang nyaman, dengan 66 sebagai yang ideal. Jadi batas atasnya sekitar 65 sampai 75 karakter, dan property yang membatasinya adalah max-width: max-width: 65ch dekat dengan angka 66 itu. Di kebanyakan font, angka 0 lebih lebar dari rata-rata huruf, jadi 65ch biasanya muat sedikit lebih dari 65 karakter. Di Lab, panjang baris terpanjangnya dihitung langsung dari teks yang dirender.
Callout: dihitung, bukan dikira
Callout yang baik bisa dicek dengan angka. Kontras dihitung dengan rumus WCAG yang sama seperti di pelajaran hierarki teks:
| Pasangan | Kontras | Artinya |
|---|---|---|
Teks #374151 di latar #EFF6FF |
9,47:1 | Teks callout gampang dibaca, minimal 4,5:1 terpenuhi |
Latar #EFF6FF di halaman putih |
1,09:1 | Hampir sama dengan putih |
Garis #3B82F6 di halaman putih |
3,68:1 | Kelihatan jelas, di atas 3:1 |
Garis #3B82F6 di latar #EFF6FF |
3,38:1 | Tetap kelihatan di dalam callout |
Jadi jawaban tebakannya: gak jelas lagi. Latar biru muda cuma 1,09:1 dari putih, di layar HP yang redup bisa nyaris hilang. Yang benar-benar menandai callout adalah garis 4px, 3,68:1 dari halaman. WCAG minta minimal 3:1 untuk bagian grafis yang dibutuhkan untuk memahami isi (kriteria 1.4.11).
Jaraknya juga dihitung. padding: 1rem 1.5rem artinya 16px atas dan bawah, 24px kiri dan kanan. Teks callout mulai 4 + 24 = 28px dari tepi kiri luarnya: garis 4px ditambah padding 24px. Tanpa padding, teksnya menempel ke garis dan ke tepi latar.
Kenapa biru, bukan hijau? Di halaman Bu Sri, hijau #15803d sudah berarti "bisa ditekan": warna tombol pesan. Callout yang hijau bisa dikira tombol. Biru muda dipakai untuk informasi.
Kapan pakai callout
- Untuk hal yang mengubah keputusan pembaca: aturan batal, peringatan, syarat. Bukan untuk mempercantik paragraf biasa.
- Sedikit saja, satu per bagian. Kalau tiap paragraf jadi callout, gak ada lagi yang menonjol.
- Isinya pendek dan konkret: "paling lambat 9 Des" lebih berguna daripada "batas waktu pembatalan berlaku".
⚠️ Jebakan yang sering ketemu
- Body text tanpa batas lebar. Di layar laptop, satu baris bisa lebih dari 120 karakter. Pasang
max-width: 65ch. - Callout cuma dari warna latar. Latar pucat seperti
#EFF6FFcuma 1,09:1 dari putih. Tambahkan garis atau border dengan kontras minimal 3:1. - Lupa padding. Tanpa
padding, teks callout menempel ke garis kirinya. - Semua jadi callout. Kalau tiga dari empat blok di halaman berwarna, pembaca berhenti memperhatikannya.
TL;DR: Title memberi nama halaman: besar (1.875rem = 30px, minimal sekitar 1,5 kali teks isi), tebal 700, singkat, dan dekat dengan isinya (margin bawah 0.5rem). Body text 1rem dengan line-height: 1.6, warna #374151 (10,31:1), dan lebar dibatasi max-width: 65ch, karena baris nyaman 45 sampai 75 karakter dengan batas atas sekitar 65 sampai 75; ch adalah lebar karakter "0". Callout menyorot hal yang gak boleh terlewat, dengan padding: 1rem 1.5rem, border-left: 4px solid #3B82F6, dan background-color: #EFF6FF. Hitung angkanya: latar pucat cuma 1,09:1 dari putih, jadi garisnya (3,68:1) yang menandai callout, dan teksnya mulai 28px dari tepi.
