Ketebalan huruf membawa informasi yang jarang disadari pembaca: judul tampil tegas, teks isi netral, dan teks tebal di tengah paragraf menandai bagian yang penting. Property font-weight mengatur ketebalan itu dengan skala angka 100 sampai 900. Pada chapter ini kita mempelajari skala beserta keyword-nya, nilai relatif bolder dan lighter, ketebalan menengah dari variable font, serta batasan penting yang sering terlupa: ketebalan hanya tampil bila font-nya menyediakannya.
Skala 100 sampai 900 #
font-weight menerima angka kelipatan 100 dari 100 (paling kurus) hingga 900 (paling tebal). Dua keyword menutupi kebutuhan sehari-hari: normal setara 400 dan bold setara 700.
| Nilai | Keyword setara | Kesan umum |
|---|---|---|
| 100–300 | — | tipis, untuk angka besar atau aksen |
| 400 | normal | teks isi |
| 500–600 | — | menengah, label dan subjudul |
| 700 | bold | judul dan penekanan |
| 800–900 | — | sangat tebal, display |
h1 { font-weight: 700; }
p { font-weight: 400; }
.label-form { font-weight: 500; }Angka dipilih saat kita butuh langkah antara — 600 misalnya — karena keyword tidak menyediakannya.
Demo berikut memperlihatkan tangga ketebalannya:
Pada font sistem yang hanya menyimpan dua varian (biasa dan tebal), sebagian langkah tampil sama — bukti bahwa hasil akhir ditentukan bersama oleh CSS dan varian font yang tersedia.
bolder dan lighter: Ketebalan Relatif #
Dua keyword menghitung ketebalan dari nilai elemen induk: bolder naik satu tingkat lebih tebal, lighter turun satu tingkat lebih kurus. Keduanya berguna di komponen yang bisa bersarang:
aside.kutipan-tepi { font-weight: 300; }
aside.kutipan-tepi strong { font-weight: bolder; } /* relatif terhadap 300 */strong secara bawaan memakai bolder, itulah mengapa penekanannya selalu lebih tebal dari sekitarnya.
Variable Font: Ketebalan di Antara Skala #
Font biasa menyimpan beberapa varian ketebalan dalam berkas terpisah. Variable font menyimpan seluruh rentang dalam satu berkas, sehingga nilai di antara kelipatan 100 pun valid:
.judul-menengah { font-weight: 450; }
.subjudul { font-weight: 650; }Fitur ini didukung seluruh browser modern; yang dibutuhkan font variable itu sendiri — dibahas di chapter Web Fonts.
Ketebalan Hanya Tampil Bila Font Menyediakannya #
Angka yang kita tulis hanyalah permintaan. Browser menyediakan ketebalan tersebut hanya bila berkas font memuat varian itu; bila tidak ada, browser menampilkan varian terdekat atau mensintesis ketebalan dengan menebalkan huruf biasa — praktik yang disebut faux bold. Hasilnya biasanya kurang rapi: jarak huruf menyempit dan batang huruf gemuk merata tanpa penyesuaian bentuk. Inilah penyebab judul tebal bisa tampak berbeda antar komputer.
Pasangan Ketebalan yang Umum #
Kombinasi berikut menjadi titik awal yang aman untuk kebanyakan website:
| Peran teks | font-weight |
|---|---|
| Judul utama dan section heading | 600–700 |
| Teks isi paragraf | 400 |
| Caption, label, teks sekunder | 400–500 |
Penekanan (strong) | 600 |
Aturan praktisnya: jangan memakai lebih dari tiga tingkat ketebalan dalam satu halaman, agar hierarki tetap terbaca.
Ringkasan #
font-weight memetakan ketebalan pada skala 100–900 dengan normal = 400 dan bold = 700, dilengkapi bolder dan lighter yang relatif terhadap induk. Variable font membuka nilai menengah seperti 450, tetapi setiap nilai hanya tampil bila font menyediakan variannya. Pasangan 600–700 untuk heading dan 400 untuk teks isi sudah cukup untuk hierarki yang sehat. Berikutnya kita beralih ke kemiringan huruf dengan font-style.