Memilih Font Variabel

Apa itu variable font?

Variable font menyatukan banyak gaya (berat, lebar, miring) dalam satu berkas .woff2. Keuntungannya: kontrol tipografi halus tanpa memuat banyak file, plus transisi yang mulus antar nilai.

Sumbu umum (wght, wdth, slnt, ital)

• wght: berat (100–900)
• wdth: lebar (persen, mis. 75–125)
• slnt: derajat kemiringan (–10 – 0 – 10)
• ital: 0 normal, 1 italic

Memakai di CSS

@font-face{
  font-family:"Brand VF";
  src:url("/assets/fonts/BrandVariable.woff2") format("woff2");
  font-weight:100 900; /* rentang berat */
  font-stretch:75% 125%;
  font-style:oblique 0deg 10deg; /* slnt */
  font-display:swap;
}
.h1{
  font-family:"Brand VF", system-ui;
  font-variation-settings:"wght" 740, "wdth" 98, "slnt" 0, "ital" 0;
}

Skala responsif

.title{
  font-size: clamp(28px, 4vw, 40px);
  font-variation-settings: "wght" 600, "wdth" 95;
}
@media (min-width: 960px){
  .title{ font-variation-settings:"wght" 720, "wdth" 100 }
}

Performa & fallback

• Pakai font-display: swap agar teks cepat muncul.
• Subset huruf (latin basic) untuk mengecilkan ukuran file.
• Gunakan satu berkas VF ketimbang banyak OTF statis.
• Setel fallback ke system-ui saat font belum termuat.

Checklist pemilihan

• Rentang wght cukup untuk headline → body.
• Dukungan wdth untuk opsi sempit/lebar.
• Italic sejati (bukan hanya slant) bila perlu.
• Hinting/kerning rapi di ukuran kecil.
• Lisensi sesuai (web embedding).

Lihat juga Tipografi & Tata Letak untuk pola CSS siap pakai, dan baca Panduan Grid Majalah untuk ritme layout.