Menata Konten Teks dengan Baik

Setelah memahami hierarki, saatnya menerapkan pada pola konten yang umum: judul, body text, dan callout.

Titles (Judul)

Judul yang baik:

• Singkat dan jelas — idealnya 1 baris
• Font-size lebih besar dari body text (minimal 1.5x)
• Font-weight bold (600-700)
• Margin-bottom yang cukup untuk memberikan "breathing room" sebelum konten

.title {
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

Body Text

Body text yang nyaman dibaca:

• Font-size minimum 16px (1rem)
• Line-height 1.5-1.7 — jarak antar baris yang cukup
• Lebar maksimal 65-75 karakter per baris (max-width: 65ch) — terlalu lebar membuat mata lelah
• Warna tidak full black — #374151 lebih nyaman dari #000000

.body-text {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 65ch;
  color: #374151;
}

Callouts (Penyorot)

Callout adalah blok teks yang menonjol dari konten biasa — tips, peringatan, kutipan:

.callout {
  padding: 1rem 1.5rem;
  border-left: 4px solid #3B82F6;
  background-color: #EFF6FF;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.9375rem;
}

Kombinasi yang Baik

Perhatikan pola dari Notion, Stripe Docs, atau Vercel Docs — mereka semua menerapkan:

1. Judul yang jelas dan bold
2. Body text yang nyaman dibaca (warna abu-abu gelap, line-height longgar)
3. Callout boxes untuk informasi penting
4. Spacing yang generous antar section