Tumpukan font

Topik ini membahas cara browser menentukan huruf untuk teks melalui properti font-family, mulai dari tumpukan font (font stack) milik sistem hingga font web yang dimuat dengan aturan @font-face. Pembahasan mencakup alasan urutan tumpukan menentukan hasil, peran generic family sebagai jaring pengaman, strategi font-display saat berkas font datang terlambat, serta disiplin jumlah berkas font yang dimuat. Setelah membacanya, pemuatan font dapat direncanakan agar teks tampil cepat dan tetap terbaca pada berbagai perangkat.

Tumpukan font pada font-family#

Properti font-family menerima daftar nama font yang berurutan, dan daftar itu disebut tumpukan font. Browser menelusuri daftar dari kiri ke kanan, lalu menggunakan font pertama yang tersedia pada perangkat pembaca. Apabila font pertama tidak terpasang, penelusuran berlanjut ke nama berikutnya, dan seterusnya sampai satu nama cocok. Karena mekanisme itulah satu deklarasi dapat menghasilkan huruf yang berbeda antar perangkat, sesuai dengan font yang pertama kali ditemukan di masing-masing perangkat.

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

code, pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}

Urutan dalam tumpukan bukan urutan estetis, melainkan mekanisme pemilihan. Nama yang disebut lebih dulu selalu menang bila tersedia, sehingga font yang paling diinginkan diletakkan di awal dan pilihan cadangan (fallback) menyusul di belakangnya. Windows, macOS, dan Linux membawa koleksi font bawaan yang berbeda, sehingga menyebut beberapa nama sekaligus menutupi perbedaan antar sistem operasi tersebut.

Nama font yang mengandung spasi wajib diapit tanda kutip, misalnya "Segoe UI" dan "Helvetica Neue", sedangkan nama satu kata cukup ditulis tanpa kutip. Anggota terakhir umumnya berupa generic family seperti sans-serif, yaitu kata kunci yang tidak menunjuk satu font tertentu melainkan satu kelompok wujud huruf. Karena kelompok ini selalu tersedia di setiap perangkat, generic family ditempatkan paling akhir sebagai jaminan bahwa teks tetap tampil dengan wujud yang tepat kelompoknya.

Generic family dan kelebihan font sistem#

Generic family mengelompokkan font menurut wujudnya, bukan menurut namanya. Browser memilih anggota kelompok yang tersedia pada perangkat, sehingga hasilnya dapat berbeda antar sistem, tetapi karakter kelompoknya tetap terjaga. Tabel berikut memuat kata kunci yang paling sering digunakan beserta perannya.

Font sistem memiliki kelebihan yang tidak dapat ditandingi font web, yaitu tidak perlu diunduh. Teks langsung dirender dengan font yang sudah ada di perangkat, sehingga tidak ada masa tunggu dan tidak ada biaya jaringan. Kekurangannya ada pada konsistensi, karena perangkat yang berbeda dapat menampilkan keluarga huruf yang berbeda untuk tumpukan yang sama. Karena itu, keputusan menggunakan font sistem atau font web merupakan pertimbangan antara kecepatan, konsistensi visual, dan ukuran unduhan.

Keduanya juga dapat digunakan secara bersamaan pada satu halaman. Font sistem dapat menangani teks isi yang menuntut kecepatan, sedangkan satu font web dimuat khusus untuk judul yang menuntut identitas. Pola ini membatasi unduhan pada berkas yang paling berpengaruh terhadap tampilan, dan tumpukan pada elemen lain tetap dilindungi generic family.

Memuat font web dengan @font-face#

Ketika identitas huruf harus seragam di semua perangkat, font web dimuat melalui aturan @font-face. Aturan itu mendeklarasikan nama keluarga font beserta lokasi berkasnya, dan browser mengunduh berkas tersebut ketika ada teks yang memerlukannya. Format WOFF2 (Web Open Font Format 2) menjadi pilihan utama karena kompresinya paling hemat di antara format font web yang ada.

@font-face {
  font-family: "Buku Teks";
  src: url("/font/buku-teks-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Buku Teks", Georgia, serif;
}

Nama pada deskriptor font-family di dalam @font-face adalah label bebas yang kemudian dirujuk oleh tumpukan, sehingga tidak harus sama dengan nama berkasnya. Deskriptor font-weight dan font-style menandai varian yang dimuat oleh satu berkas, misalnya varian tebal 700 atau varian miring, sehingga tumpukan dapat memilihnya secara tepat. Properti font-display pada aturan yang sama mengatur perilaku browser selama berkas sedang diunduh, dan perilaku itulah yang dibahas pada bagian berikutnya.

font-display dan dampaknya saat berkas lambat#

Unduhan font web tidak selalu selesai sebelum teks dirender, misalnya pada jaringan lambat. Properti font-display menentukan bagaimana browser memperlakukan teks selama masa tunggu itu. Garis waktunya terbagi menjadi masa blok dan masa tukar. Masa blok adalah saat teks disembunyikan, sedangkan masa tukar adalah saat teks ditampilkan dengan font cadangan dan dapat ditukar begitu font web siap. Setelah kedua masa berlalu, font cadangan tetap digunakan dan tidak ada pertukaran lagi.

Nilai swap paling lazim untuk teks isi karena keterbacaan tidak pernah dikorbankan, sedangkan block dapat dipertimbangkan untuk font ikon yang tampak rusak bila sesaat digantikan huruf biasa. Nilai optional cocok untuk situasi yang menempatkan kestabilan tata letak di atas keseragaman huruf. Karena itu, pemilihan nilai mengikuti peran teksnya, bukan satu nilai untuk semua keadaan.

Disiplin jumlah berkas font#

Setiap kombinasi keluarga, ketebalan, dan gaya menuntut satu berkas tersendiri. Satu keluarga dengan empat ketebalan yang masing-masing memiliki versi miring berarti delapan berkas yang semuanya berpotensi diunduh. Semakin banyak berkas, semakin besar unduhan dan semakin sering teks tampil tanpa font yang dimintanya. Disiplin berikut menjaga pemuatan tetap ringan.

• Muat ketebalan yang benar-benar digunakan, umumnya 400 untuk teks isi dan 700 untuk penekanan.
• Gunakan format WOFF2 saja untuk target browser modern, tanpa format cadangan lama.
• Pertimbangkan variable font, yaitu satu berkas yang memuat rentang ketebalan sehingga beberapa berkas dapat digantikan oleh satu berkas itu.
• Gunakan subset, yakni berkas font yang hanya memuat rangkaian karakter yang diperlukan, untuk memangkas ukuran unduhan.

Disiplin ini melengkapi strategi font-display. Berkas yang sedikit dan kecil membuat masa tunggu pendek, sehingga nilai swap jarang terlihat sedang bekerja. Karena itu, font web yang terencana terasa secepat font sistem pada mayoritas kunjungan, dengan konsistensi visual yang tetap terjaga.

Kesalahan umum#

Kesalahan pertama adalah meletakkan generic family di awal tumpukan. Generic family selalu cocok, sehingga penelusuran berhenti di situ dan font web di belakangnya tidak pernah digunakan. Perbaikannya, jadikan generic family anggota terakhir dan letakkan font yang paling diinginkan di awal daftar.

Kesalahan kedua adalah menulis nama font berspasi tanpa tanda kutip. Browser membaca nama yang terpotong spasi sebagai beberapa nama sekaligus, dan deklarasi tidak menghasilkan font yang dimaksud. Perbaikannya, apit setiap nama yang mengandung spasi dengan tanda kutip, misalnya "Helvetica Neue".

Kesalahan ketiga adalah memuat banyak varian berkas yang tidak pernah digunakan, misalnya lima ketebalan untuk halaman yang hanya menampilkan dua. Unduhan menjadi besar tanpa manfaat, dan font-display pun lebih sering bekerja karena berkasnya bertambah. Perbaikannya, audit panel Network untuk melihat berkas font yang benar-benar diunduh, lalu muat ulang hanya varian yang digunakan halaman.

Ringkasan#

• font-family menerima tumpukan font yang ditelusuri dari kiri ke kanan, dan font pertama yang tersedia menang.
• Generic family adalah kata kunci kelompok wujud huruf yang selalu tersedia, sehingga ditempatkan paling akhir sebagai jaminan.
• @font-face mendeklarasikan font web beserta lokasi berkasnya, dan font-display mengatur masa blok serta masa tukar saat berkas lambat.
• Disiplin jumlah berkas, pemilihan WOFF2, variable font, dan subset menjaga pemuatan teks tetap ringan.

Referensi#

• CSS fonts — MDN — Gambaran modul font CSS, mulai dari font-family hingga pencocokan font.
• @font-face — MDN — Aturan pendefinisian font web beserta seluruh deskriptornya.
• font-display — MDN — Dokumentasi garis waktu masa blok dan masa tukar pada font-display.