Hierarki Teks — Membimbing Mata Pembaca

Hierarki teks adalah cara mengatur tingkat kepentingan informasi melalui tipografi. Tujuannya: pembaca langsung tahu apa yang paling penting tanpa harus membaca semuanya.

3 Level Dasar

1. Primary — Judul utama, hal pertama yang dilihat (besar, bold)
2. Secondary — Subjudul, pendukung konteks (medium size, semibold)
3. Tertiary — Body text, detail (normal size, regular weight)

Cara Membuat Hierarki

Gunakan kombinasi dari property berikut:

/* Primary — judul */
h1 {
  font-size: 2.25rem;   /* Ukuran besar */
  font-weight: 700;     /* Bold */
  color: #111827;        /* Warna gelap/kontras tinggi */
  line-height: 1.2;     /* Line-height rapat untuk heading */
}

/* Secondary — subjudul */
h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;        /* Sedikit lebih terang */
  line-height: 1.3;
}

/* Tertiary — body */
p {
  font-size: 1rem;
  font-weight: 400;
  color: #6B7280;        /* Abu-abu untuk body */
  line-height: 1.6;     /* Line-height longgar untuk readability */
}

Line Height

Line-height sangat penting untuk readability:

• Heading → 1.1 - 1.3 (rapat, karena ukurannya sudah besar)
• Body text → 1.5 - 1.7 (longgar, untuk kenyamanan membaca)
• Teks panjang (artikel) → 1.6 - 1.8 (lebih longgar lagi)

Warna untuk Hierarki

Selain size dan weight, warna juga membuat hierarki:

• Primary text: Hitam/sangat gelap (#111827)
• Secondary text: Abu-abu gelap (#374151 atau #4B5563)
• Tertiary text: Abu-abu medium (#6B7280 atau #9CA3AF)

Perhatikan website Stripe — hierarki teksnya sangat jelas: judul besar dan gelap, subjudul medium, body text abu-abu.