Variable Fonts

Font konvensional menyimpan satu bobot per file: bold butuh file terpisah, demikian pula light dan medium. Variable fonts mengubah model ini — satu file font memuat satu atau lebih sumbu (axis) yang nilainya dapat diatur kontinu oleh CSS, misalnya bobot apa pun dari 100 hingga 900, bukan hanya kelipatan 100. Untuk desainer, ini berarti kebebasan memilih bobot 450; untuk pengembang, ini berarti lebih sedikit permintaan file. Mekanisme @font-face yang kita pelajari pada Chapter Web Fonts tetap menjadi pintunya, hanya saja satu deklarasi bisa mencakup rentang bobot lewat font-weight: 100 900.

Sumbu Terdaftar: wght, wdth, dan opsz #

Sumbu adalah parameter yang disimpan di dalam file font. Sebagian sumbu bersifat registered (terdaftar di spesifikasi CSS) sehingga punya properti CSS khusus:

Karena properti-properti itu telah kita kenal, memakai variable font pada sumbu terdaftar tidak butuh sintaks baru: font-weight: 450 langsung berbicara ke sumbu wght file font tersebut. Nilai font-stretch juga ditulis sebagai persentase — 75% berarti sumbu wdth pada tingkat 75 — dan font-optical-sizing: auto (nilai bawaannya) membuat browser memilih tingkat ukuran optik sesuai font-size yang sedang dipakai. Desain huruf memang menyesuaikan bentuknya pada ukuran kecil agar tetap terbaca; opsz mengaktifkan penyesuaian itu secara otomatis.

Dari sisi berkas, keunggulan variable font terasa pada jumlah permintaan: halaman yang membutuhkan empat bobot cukup memuat satu file, bukan empat. Sebagai imbangannya, ukuran satu file variable font memang lebih besar dari satu file bobot tunggal, sehingga perbandingannya bergantung pada berapa banyak varian yang benar-benar dipakai. Informasi sumbu yang tersedia di dalam sebuah file font dapat diperiksa lewat alat seperti wakamaifondue.com atau panel Font di DevTools browser modern.

Nilai computed font-weight dilewatkan apa adanya: menulis 450 menghasilkan computed 450 meskipun font yang terpasang tidak punya sumbu wght sama sekali. Ini membuat pengujian nilai tengah menjadi deterministik, sebagaimana kita kunci pada demo.

font-variation-settings: Jalur Langsung ke Sumbu #

Bila sumbu yang diinginkan tidak punya properti khusus — misalnya sumbu kustom buatan desainer font — jalurnya adalah font-variation-settings . Properti ini menerima pasangan nama sumbu dan angka:

.judul {
  font-family: "Naskah Variabel", Georgia, serif;
  font-weight: 450;
  font-stretch: 87.5%;
}
.tulis-langsung {
  font-variation-settings: "wght" 450, "wdth" 80;
}

Mari kita telaah baris demi baris:

1. Baris 3 (font-weight: 450;): cara tingkat tinggi yang disarankan untuk bobot — browser menerjemahkannya ke sumbu wght bila font mendukung.
2. Baris 4 (font-stretch: 87.5%;): sumbu wdth diatur ke tingkat sedikit menyempit; pada font non-variabel deklarasi ini diabaikan dengan aman.
3. Baris 7 (.tulis-langsung): font-variation-settings menyentuh sumbu secara langsung, termasuk sumbu kustom yang tidak punya properti terdaftar.

Hasil di Browser:

Baris demo tampil dengan tiga bobot berbeda dari satu keluarga huruf:
450 (menengah), 700 (tebal), dan 100 (tipis) — nilai computed
font-weight tercatat "450", "700", dan "100" tanpa dibulatkan.
Baris font-variation-settings tercatat "wght" 450, dan baris
optical sizing tercatat font-optical-sizing "auto".

Bila font yang dipakai bukan variable font (seperti pada demo, yang memakai font sistem), browser tetap mencatat nilai yang kita minta lalu memetakan ke bobot terdekat yang tersedia — deklarasi tidak dianggap galat. Dengan bobot kontinu di tangan, kita punya kontrol penuh atas hierarki tipografi; berikutnya Text Wrapping mengatur bagaimana teks mengalir saat ruangnya terbatas.