Font Weight — Ketebalan untuk Hierarki
Font weight adalah salah satu tool paling kuat untuk membuat hierarki visual tanpa mengubah ukuran font.
Weight yang Umum
| Nilai | Nama | Kegunaan |
|---|---|---|
| 300 | Light | Caption, teks sekunder yang besar |
| 400 | Regular | Body text, paragraf |
| 500 | Medium | Subtitle, label, navigasi |
| 600 | Semibold | Heading kecil, emphasis |
| 700 | Bold | Heading, CTA, emphasis kuat |
Aturan Dasar
- Jangan gunakan semua weight — 2-3 weight sudah cukup (misal: Regular, Medium, Bold)
- Kontras weight harus jelas — lompatan dari 400 ke 500 sering kali tidak cukup terlihat. Gunakan minimal 2 langkah (400 → 600, atau 400 → 700)
- Light weight butuh ukuran besar — font 300 pada 14px sangat sulit dibaca. Gunakan light hanya pada teks besar (24px+)
Font Pairing — Kombinasi Font
Menggunakan 2 font yang berbeda bisa membuat desain lebih menarik, tapi harus dilakukan dengan benar:
Aturan emas: Contrast, not Conflict
- Kombinasikan font yang berbeda karakter (serif + sans-serif)
- Hindari font yang mirip tapi tidak sama — ini terlihat seperti kesalahan
Kombinasi populer:
- Inter (sans-serif) untuk UI + Georgia (serif) untuk artikel
- System UI untuk app + Merriweather untuk konten panjang
- Atau cukup 1 font dengan variasi weight — ini sering kali sudah cukup!
Tips
Kebanyakan website modern hanya menggunakan 1 font family dengan variasi weight dan size. Stripe, Vercel, Linear — semua hanya pakai 1 font. Jangan over-complicate.
