Font weight adalah ketebalan huruf, ditulis sebagai angka dari 100 (paling tipis) sampai 900 (paling tebal). Dengan tebal tipis saja kamu bisa bikin orang tahu mana yang dibaca duluan, tanpa membesarkan apa pun. Bayangin papan pengumuman di warung: judulnya ditulis pakai spidol tebal, keterangannya pakai pulpen. Ukuran hurufnya hampir sama, tapi mata langsung ke tulisan spidol. Font pairing mirip memilih baju: kemeja batik dengan celana polos itu serasi karena kontras, dua motif batik yang beda malah bertabrakan.
🧪 Tebakan cepat: Di kartu kamar Homestay Kabut, subjudul ditulis tebal 500 dan isi tebal 400, dengan ukuran dan warna yang sama persis. Bedanya kelihatan gak? Jawabannya ada di bagian "Kontras tebal harus kelihatan".
Angka font-weight
| Nilai | Nama | Dipakai untuk |
|---|---|---|
| 300 | Light | Teks besar yang tenang, 24px ke atas |
| 400 | Regular | Body text, paragraf. Sama dengan normal |
| 500 | Medium | Subjudul, label, menu |
| 600 | Semibold | Heading kecil, penekanan |
| 700 | Bold | Heading, tombol, penekanan kuat. Sama dengan bold |
Ada juga 100 (Thin), 200 (Extra Light), 800 (Extra Bold), dan 900 (Black), tapi jarang dibutuhkan di halaman biasa. Tiap font punya weight yang tersedia sendiri-sendiri: ada yang cuma punya 400 dan 700.
Hierarki dengan tebal: 2 sampai 3 weight
Ini kartu kamar Bu Sri, dengan hierarki yang dibuat dari font-weight:
<p class="title">Kamar Teras</p>
<p class="subtitle">2 tamu · kasur queen · sarapan</p>
<p class="body">Kamar di lantai dua dengan teras kayu yang menghadap kebun kentang.</p>
<style>
.title { font-weight: 700; } /* Bold: dibaca pertama */
.subtitle { font-weight: 500; } /* Medium: info pendukung */
.body { font-weight: 400; } /* Regular: isinya */
</style>
.titlepaling tebal (700), jadi itu yang ditangkap mata duluan..subtitledi tengah (500): lebih tegas dari isi, tapi gak bersaing dengan judul..body400, tebal bawaan<p>. Menulisnya membuat niatmu jelas di kode.
Tiga weight seperti ini sudah cukup untuk satu website. Aturan praktisnya 2 sampai 3 weight, misalnya 400, 500, dan 700. Kalau 300, 400, 500, 600, 700, dan 800 dipakai semua, gak ada lagi yang terasa paling penting.
Kontras tebal harus kelihatan
Selisih 100 (400 ke 500) nyaris gak kelihatan kalau tebal jadi satu-satunya pembeda. Jadi jawaban tebakannya: hampir gak kelihatan. Kalau cuma tebal yang beda, lompatlah minimal 200: 400 ke 600, atau 400 ke 700.
Subjudul 500 di kartu Bu Sri tetap jelas karena dia juga beda di hal lain:
.subtitle {
font-weight: 500;
font-size: 0.875rem; /* 14px, lebih kecil dari isi */
color: #475569; /* abu-abu, lebih tenang dari isi */
}
Coba hapus pembedanya satu per satu: hapus warnanya, masih kebaca beda. Hapus ukurannya juga, tinggal selisih 100, dan subjudul hampir menyatu dengan isi.
Satu lagi: weight tipis (300 ke bawah) butuh ukuran besar. Garis huruf yang tipis di 14px gampang hilang, apalagi di layar yang kurang terang. Pakai Light cuma untuk teks 24px ke atas.
Font pairing: kontras, bukan konflik
Kalau mau pakai dua font, pilih yang karakternya jelas berbeda. Pasangan paling aman: serif untuk judul, sans-serif untuk isi. Serif adalah huruf berkait, dengan kaki kecil di ujung garisnya (Georgia, Times). Sans-serif tanpa kait (Arial, Inter, system-ui).
.title { font-family: Georgia, serif; } /* judul berkait */
body { font-family: system-ui, sans-serif; } /* isi tanpa kait */
- Dua font yang mirip tapi gak sama, misalnya Verdana untuk judul dan Arial untuk isi, kelihatan seperti salah ketik, bukan pilihan.
- Kombinasi yang sering dipakai: Inter untuk UI dengan Georgia untuk artikel, atau system-ui untuk app dengan Merriweather untuk konten panjang.
- Atau cukup 1 font dengan variasi weight dan ukuran. Banyak app modern hanya pakai satu font family, dan itu sering sudah cukup.
⚠️ Jebakan yang sering ketemu
- Weight-nya gak dimuat. Kalau font web cuma diunduh weight 400 dan 700,
font-weight: 500tampil sebagai 400, dan600tampil sebagai 700. Browser memilih weight terdekat yang tersedia, jadi subjudulmu diam-diam sama dengan isi. Cek weight apa saja yang kamu muat. - Memakai semua weight. Lima atau enam weight di satu halaman bikin hierarki kabur.
- Light di teks kecil. 300 di 14px susah dibaca.
- Dua font yang mirip. Kalau berbeda, harus jelas berbeda. Kalau ragu, pakai satu font saja.
TL;DR: font-weight mengatur tebal huruf dari 100 sampai 900: 400 = Regular (normal), 500 = Medium, 600 = Semibold, 700 = Bold (bold). Cukup 2 sampai 3 weight per website, misalnya judul 700, subjudul 500, isi 400. Kalau tebal jadi satu-satunya pembeda, lompat minimal 200, karena 400 ke 500 nyaris gak kelihatan. Light cuma untuk teks besar. Untuk pairing, pilih kontras, bukan konflik: serif untuk judul dengan sans-serif untuk isi, atau satu font saja dengan variasi weight. Pastikan weight yang kamu pakai memang dimuat.
