Ukuran dan ketebalan adalah dua kontrol tipografi yang paling sering kita sentuh sehari-hari. Properti font-size menentukan besar huruf, sedangkan font-weight menentukan kepadatan goresannya. Keduanya bekerja berpasangan saat menyusun hierarki: judul besar dan tebal, teks isi normal, keterangan kecil. Chapter ini membahas pilihan satuan untuk font-size, skala numerik font-weight, dan cara computed value keduanya dihitung oleh browser.

Satuan Ukuran: px, rem, em, dan Keyword #

Satuan yang tersedia terbagi dalam dua kelompok. Satuan absolut seperti px memberi ukuran tetap: font-size: 16px menghasilkan 16 piksel di kondisi apa pun, sehingga mudah diprediksi saat pengujian. Satuan relatif justru mengikuti konteks:

SatuanRujukanContoh nilai computed (root 16px)
pxPiksel layar16px tetap 16px
remfont-size elemen akar <html>1.5rem menjadi 24px
emfont-size elemen induk0.75em pada induk 16px menjadi 12px
keywordTabel ukuran bawaan CSSlarge menjadi 18px, x-large menjadi 24px

Dua satuan relatif ini memiliki perbedaan penting. rem selalu merujuk ke akar dokumen, yang default-nya 16px, sehingga nilai 1.5rem di mana pun berarti 24px — konversinya bisa dihitung sekali di kepala. em merujuk ke font-size induknya sendiri, sehingga hasilnya berubah mengikuti kedalaman sarang elemen; em yang bersarang dalam em lain menumpuk secara majemuk.

Kata kunci (xx-small hingga xx-large) memetakan ke tabel ukuran tetap CSS, dan smaller/larger bergeser satu tingkat dari ukuran induk — larger pada 16px menghasilkan sekitar 19.2px. Untuk pekerjaan modern, praktik yang disarankan adalah rem sebagai satuan utama, karena menghormati preferensi ukuran font pengguna yang kita bahas pada Chapter Responsive Typography.

Skala Font Weight 100 hingga 900 #

Font weight ditulis sebagai angka ratusan dari 100 (paling tipis) hingga 900 (paling tebal), berjarak 100 antar tingkat. Dua kata kunci tersedia sebagai alias: normal bernilai 400 dan bold bernilai 700. Nilai di luar kelipatan 100 seperti 550 juga sah — penggunaannya bergantung pada variable font yang membahasnya pada Chapter Variable Fonts.

Yang perlu diperhatikan: bila font yang terpasang hanya menyediakan bobot 400 dan 700, browser tidak menciptakan bobot menengah; tampilan 300 dan 400 bisa identik. Browser juga dapat melakukan sintesis tebal dengan menebalkan goresan secara paksa bila bobot yang diminta tidak tersedia, dan hasilnya tampak kurang rapi dibanding berat asli dari desainer font. Pada demo, kita mengunci nilai computed agar perilaku ini terverifikasi.

Hasil di Browser:

text 
Judul 1.5rem tampil 24px; teks em 0.75em pada induk 16px tampil 12px.
Kata kunci large tampil 18px dan x-large tampil 24px.
Bobot: normal tercatat 400, bold tercatat 700, 600 tercatat "600",
dan 100 tercatat "100" pada baris paling tipis.

Demo berikut menampilkan keenam kelompok tersebut dalam satu halaman, masing-masing membawa penanda data-expected:

css 
.judul-rem { font-size: 1.5rem; }
.teks-em { font-size: 0.75em; }
.kunci-large { font-size: large; }
.kunci-xlarge { font-size: x-large; }
.bobot-bold { font-weight: bold; }
.bobot-600 { font-weight: 600; }

Mari kita telaah baris demi baris:

  1. Baris 1 (.judul-rem): 1.5rem dikali font-size akar 16px menghasilkan 24px.
  2. Baris 2 (.teks-em): 0.75em dikali font-size induk (16px) menghasilkan 12px.
  3. Baris 3–4 (keyword): large dan x-large dibaca dari tabel ukuran CSS menjadi 18px dan 24px.
  4. Baris 5 (.bobot-bold): alias bold dihitung browser menjadi 700.
  5. Baris 6 (.bobot-600): angka 600 dilewatkan apa adanya sebagai nilai computed, tanpa normalisasi.

Buka demo, lalu coba periksa tab Elements di DevTools: kolom Computed menunjukkan nilai yang sama persis dengan yang dikunci oleh penanda uji. Dengan ukuran dan bobot terkendali, langkah berikutnya adalah mengatur jarak antar baris lewat Line Height .