Font Family

Tipografi adalah bagian terbesar dari tampilan sebuah halaman web, dan properti font-family adalah pintu masuknya: properti ini menentukan keluarga huruf yang dipakai browser untuk menggambar teks. Berbeda dengan dokumen cetak, browser tidak dapat memastikan font mana yang tersedia di perangkat pembaca, sehingga CSS dirancang untuk menerima daftar font sekaligus. Browser mencoba satu per satu dari kiri ke kanan, lalu memakai font pertama yang berhasil ditemukan. Pada Chapter ini kita mempelajari cara menyusun daftar tersebut, peran generic family sebagai jaring pengaman, dan aturan penulisan namanya.

Daftar Font dan Generic Family #

Nilai font-family berupa satu atau beberapa nama font yang dipisah koma (istilahnya font stack). Browser memeriksa ketersediaan font secara berurutan dan berhenti pada kandidat pertama yang tersedia, sehingga urutan penulisan adalah urutan preferensi kita. Jika seluruh nama font gagal ditemukan, browser memakai font default-nya.

Di akhir setiap stack wajib ada satu generic family, yaitu kata kunci bawaan CSS yang dipetakan browser ke font bawaan sistem. Generic family menjamin stack tidak pernah kosong, karena kata kunci ini selalu dapat dipenuhi. Enam nilai yang tersedia:

system-ui layak dicatat tersendiri: nilai ini mengikuti font yang dipakai sistem operasi pengguna, sehingga tampilan terasa native di setiap platform. Banyak website besar menjadikan system-ui pilihan pertama stack-nya.

Menyusun Fallback Stack #

Pola penyusunan stack yang sehat adalah: font utama yang kita inginkan, diikuti font mirip yang umum terpasang, lalu generic family. Contoh berikut membangun stack untuk teks kode dan untuk isi artikel:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Font Family</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
    }
    .kode {
      font-family: "Cascadia Code", Consolas, monospace;
    }
    .artikel {
      font-family: Georgia, "Times New Roman", serif;
    }
  </style>
</head>
<body>
  <p class="kode">const salam = "Halo";</p>
  <p class="artikel">Paragraf ini memakai huruf serif.</p>
</body>
</html>

Mari kita telaah stack di dalam blok <style> baris demi baris:

1. Baris 6 (system-ui, sans-serif): font UI sistem dipilih lebih dahulu; bila tidak tersedia, browser jatuh ke sans-serif. Ini pola standar untuk teks antarmuka.
2. Baris 9 ("Cascadia Code", Consolas, monospace): font kode modern dicoba dahulu, disusul Consolas yang umum di Windows, dan monospace sebagai penutup. Karena "Cascadia Code" mengandung spasi, namanya harus diapit tanda kutip.
3. Baris 12 (Georgia, "Times New Roman", serif): stack serif untuk teks panjang. Georgia tersedia di hampir semua sistem, dan "Times New Roman" memakai kutip karena berisi spasi.

Setiap elemen anak mewarisi font-family dari induknya, jadi satu deklarasi pada body mencakup seluruh halaman; class .kode dan .artikel hanya perlu menimpa bila ingin berbeda.

Cara Browser Membaca Nama Font #

Dua aturan penulisan perlu kita pegang. Pertama, nama font yang mengandung spasi atau diawali angka wajib diapit tanda kutip — kutip ganda maupun tunggal diperbolehkan selama berpasangan. Kedua, nama font tidak sensitif terhadap besar-kecil huruf, tetapi konsistensi penulisan membuat kode mudah dibaca.

Ada satu fakta yang sering mengejutkan pemula ketika memeriksa DevTools: nilai computed font-family adalah persis daftar yang kita tulis, bukan nama font yang benar-benar digambar. Browser tidak mengganti daftar tersebut dengan font terpilih; keputusan pemilihan font terjadi di tingkat rendering. Karena itu stack yang kita tulis dapat diverifikasi apa adanya oleh alat uji otomatis, seperti pada demo berikut.

Hasil di Browser:

Tiga paragraf demo tampil dalam tiga generic family berbeda:
serif (huruf berkaki), sans-serif (tanpa kaki), dan monospace
(lebar huruf seragam). Nilai computed font-family masing-masing
adalah "serif", "sans-serif", dan "monospace". Paragraf keempat
dengan stack Georgia, serif tercatat computed "Georgia, serif".

Rangkaian berikutnya, Font Size dan Font Weight , membahas ukuran dan ketebalan huruf dari stack yang telah kita pilih ini.