Pengantar font variabel di web

Spesifikasi font baru yang dapat mengurangi ukuran file font secara signifikan

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

Dalam artikel ini, kita akan membahas definisi font variabel, manfaat yang ditawarkannya, dan cara menggunakannya dalam pekerjaan. Pertama, mari kita tinjau cara kerja tipografi di web, dan apa yang dihadirkan oleh {i>font variabel<i}.

Kompatibilitas browser

Mulai Mei 2020, font variabel didukung di sebagian besar browser. Lihat Dapatkah saya menggunakan font variabel? dan Penggantian.

Pengantar

Istilah {i>font<i} dan jenis huruf sering digunakan secara bergantian oleh pengembang. Namun, ada perbedaannya: Jenis huruf adalah desain visual dasar yang dapat ada di berbagai teknologi pengaturan huruf yang berbeda, dan {i>font<i} adalah salah satu implementasi ini, dalam format file digital. Dengan kata lain, typeface adalah apa yang Anda lihat, dan font adalah apa yang Anda gunakan.

Konsep lain yang sering diabaikan adalah perbedaan antara gaya dan keluarga. Gaya adalah jenis huruf tunggal dan spesifik, seperti Tebal Miring, dan keluarga adalah kumpulan gaya yang lengkap.

Sebelum font variabel, setiap gaya diterapkan sebagai file font terpisah. Dengan font variabel, semua gaya dapat dimuat dalam satu file.

Tantangan bagi desainer dan pengembang

Saat membuat project cetak, desainer menghadapi beberapa kendala, seperti ukuran fisik tata letak halaman, jumlah warna yang dapat digunakan (yang ditentukan oleh jenis mesin cetak yang akan digunakan), dan seterusnya. Tetapi mereka dapat menggunakan sebanyak mungkin gaya {i>typeface<i} yang diinginkan. Artinya, tipografi media cetak sering kali kaya dan canggih, sehingga pengalaman membaca benar-benar menyenangkan. Pikirkan terakhir kali Anda senang melihat majalah yang luar biasa.

Batasan desainer dan developer web berbeda dengan desainer cetak, dan yang terpenting adalah biaya bandwidth desain kami. Hal ini telah menjadi titik melekat untuk pengalaman tipografi yang lebih kaya, karena ada biaya yang dikenakan. Dengan font web tradisional, setiap gaya yang digunakan dalam desain kami mengharuskan pengguna mendownload file font terpisah, yang meningkatkan latensi dan waktu rendering halaman. Hanya menyertakan gaya Reguler dan Tebal, serta gaya yang dicetak miring, dapat berukuran hingga 500 KB atau lebih dari data font. Hal ini bahkan sebelum kami menangani cara font dirender, pola penggantian yang perlu digunakan, atau efek samping yang tidak diinginkan seperti FOIT dan FOUT.

Banyak jenis font menawarkan berbagai gaya yang jauh lebih luas, mulai dari bobot Tipis hingga Hitam, lebar sempit dan lebar, berbagai detail gaya, dan bahkan desain khusus ukuran (dioptimalkan untuk ukuran teks besar atau kecil). Karena Anda harus memuat file font baru untuk setiap gaya (atau kombinasi gaya), banyak developer web memilih untuk tidak menggunakan kemampuan ini, sehingga mengurangi pengalaman membaca pengguna mereka.

Anatomi font variabel

Font variabel mengatasi tantangan ini, dengan mengemas gaya ke dalam satu file.

Hal ini dapat dilakukan dengan memulai dengan gaya sentral atau 'default', biasanya 'Regular'–desain romawi tegak dengan ketebalan dan lebar paling umum yang paling cocok untuk teks biasa. Gaya ini kemudian dihubungkan ke gaya lain dalam rentang kontinu, yang disebut 'sumbu'. Sumbu yang paling umum adalah Weight, yang dapat menghubungkan gaya default ke gaya Tebal. Setiap gaya individual dapat ditempatkan di sepanjang sumbu, dan disebut 'instance' dari font variabel. Beberapa instance diberi nama oleh developer font, misalnya Weight axis location 600 disebut SemiBold.

Font variabel Roboto Flex memiliki tiga gaya untuk sumbu Weight. Gaya Regular berada di tengah, dan ada dua gaya di ujung sumbu yang berlawanan, satu lebih ringan dan lainnya lebih berat. Di antara opsi tersebut, Anda dapat memilih dari 900 instance:

Developer font dapat menawarkan sekumpulan sumbu yang berbeda. Anda dapat menggabungkannya karena semuanya memiliki gaya default yang sama. Roboto memiliki tiga gaya di sumbu Lebar: Reguler berada di tengah sumbu, dan dua gaya, lebih sempit dan lebih lebar, berada di setiap ujung. Keduanya memberikan semua lebar gaya Reguler, dan digabungkan dengan sumbu Bobot untuk memberikan semua lebar bagi setiap bobot.

Artinya, ada ribuan gaya. Ini mungkin tampak terlalu berlebihan, tetapi kualitas pengalaman membaca bisa sangat ditingkatkan dengan keragaman gaya tulisan ini. Selain itu, jika tanpa masalah performa, developer web dapat menggunakan beberapa atau sebanyak mungkin gaya yang mereka inginkan–terserah desain mereka.

Miring

Cara penanganan miring dalam font variabel menarik karena ada dua pendekatan yang berbeda. Typeface seperti Helvetica atau Roboto memiliki kontur yang kompatibel dengan interpolasi, sehingga gaya Roman dan Italic-nya dapat diinterpolasi di antara dan sumbu Slant dapat digunakan untuk beralih dari Roman ke Italic.

Typeface lainnya (seperti Garamond, Baskerville, atau Bodoni) memiliki kontur glyph Romawi dan Miring yang tidak kompatibel dengan interpolasi. Misalnya, kontur yang biasanya menetapkan huruf kecil "n" dalam huruf Romawi tidak cocok dengan kontur yang digunakan untuk menentukan huruf kecil "n" miring. Alih-alih menginterpolasi satu kontur ke kontur lainnya, sumbu Miring akan beralih dari kontur Romawi ke Miring.

Setelah beralih ke Miring, sumbu yang tersedia untuk pengguna harus sama dengan sumbu untuk bahasa Romawi, sama seperti himpunan karakternya.

Kemampuan substitusi glyph juga dapat dilihat untuk setiap glyph, dan digunakan di mana saja pada ruang desain font variabel. Misalnya, desain tanda dolar dengan dua batang vertikal berfungsi paling baik pada ukuran titik yang lebih besar, tetapi untuk ukuran titik yang lebih kecil, desain yang hanya memiliki satu batang akan lebih baik. Jika kita memiliki lebih sedikit piksel untuk merender glyph, desain dua batang mungkin tidak akan terbaca. Untuk mengatasi hal ini, seperti sumbu Miring, penggantian glyph dari satu glyph dengan glyph lainnya dapat terjadi di sepanjang sumbu Ukuran Optik pada titik yang ditentukan oleh desainer jenis.

Singkatnya, jika kontur memungkinkan hal ini, desainer jenis dapat membuat font yang berinterpolasi antara berbagai gaya dalam ruang desain multi-dimensi. Hal ini memberi Anda kontrol terperinci atas tipografi, dan banyak daya.

Definisi sumbu

Ada lima sumbu terdaftar, yang mengontrol fitur font yang dapat diprediksi dan diketahui: ketebalan, lebar, ukuran optik, miring, dan miring. Selain itu, font dapat berisi sumbu kustom. Atribut ini dapat mengontrol aspek desain apa pun dari font yang diinginkan desainer jenis: ukuran serif, panjang garis miring, tinggi ascender, atau ukuran titik pada i.

Meskipun sumbu dapat mengontrol fitur yang sama, namun sumbu tersebut dapat menggunakan nilai yang berbeda. Misalnya, dalam font variabel Oswald dan Hepta Slab, hanya ada satu sumbu yang tersedia, yaitu Bobot, tetapi rentangnya berbeda–Oswald memiliki rentang yang sama seperti sebelum diupgrade menjadi variabel, 200 hingga 700, tetapi Hepta Slab memiliki bobot garis rambut ekstrim pada angka 1 yang mencapai 900.

Lima sumbu yang terdaftar memiliki tag huruf kecil 4 karakter yang digunakan untuk menetapkan nilainya di CSS:

Karena developer font menentukan sumbu yang tersedia dalam font variabel, dan nilai mana yang dapat dimiliki, penting untuk mengetahui apa yang ditawarkan setiap font. Dokumentasi font harus menyediakan hal ini, atau Anda dapat memeriksa font menggunakan alat seperti Wakamai Fondue.

Kasus penggunaan dan manfaat

Menetapkan nilai sumbu bergantung pada selera pribadi dan menerapkan praktik terbaik tipografi. Bahaya dengan teknologi baru dapat disalahgunakan, dan setelan yang terlalu artistik atau eksploratif juga dapat mengurangi keterbacaan teks yang sebenarnya. Untuk judul, mengeksplorasi sumbu yang berbeda untuk membuat desain artistik yang hebat memang menarik, tetapi untuk teks isi, risiko ini membuat teks tidak terbaca.

Ekspresi yang menarik

Salah satu contoh bagus ekspresi artistik ditunjukkan di atas, eksplorasi typeface Decovar oleh Mandy Michael.

Anda dapat melihat contoh kerja dan kode sumber untuk contoh di atas di sini.

Animasi

Anda juga dapat mengeksplorasi karakter animasi dengan font variabel. Di atas adalah contoh sumbu yang berbeda yang digunakan dengan jenis huruf Zycon. Lihat contoh animasi live di Axis Praxis.

Anicons adalah font ikon warna animasi pertama di dunia, berdasarkan Ikon Desain Material. Anicons adalah eksperimen yang menggabungkan dua teknologi font canggih: font variabel dan font warna.

Kemahiran

Roboto Flex dan Amstelvar menawarkan serangkaian "Parametric Axes". Dalam sumbu-sumbu ini, huruf-huruf tersebut diuraikan menjadi 4 aspek dasar bentuk: bentuk hitam atau positif, bentuk putih atau negatif, dan dimensi x dan y. Dengan cara yang sama saat warna primer dapat dicampur dengan warna lain untuk menyesuaikannya, keempat aspek ini dapat digunakan untuk menyesuaikan sumbu lainnya.

Sumbu XTRA di Amstelvar memungkinkan Anda menyesuaikan nilai "putih" per seribu, seperti yang ditunjukkan di atas. Menggunakan potongan kecil XTRA dalam arah yang berlawanan, lebar kata diratakan.

Font variabel di CSS

Memuat file font variabel

Font variabel dimuat melalui mekanisme @font-face yang sama seperti font web statis tradisional, tetapi dengan dua peningkatan baru:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. Format Sumber: Kita tidak ingin browser mendownload font jika tidak mendukung font variabel, jadi kita menambahkan deskripsi format dan tech: setelah dalam sintaksis mendatang (format('woff2') tech('variations')), setelah tidak digunakan lagi tetapi didukung di antara sintaksis browser (format('woff2-variations')). Jika browser mendukung font variabel dan mendukung sintaksis yang akan datang, browser akan menggunakan deklarasi pertama. Jika mendukung font variabel dan sintaksis saat ini, deklarasi kedua akan digunakan. Keduanya mengarah ke file {i>font<i} yang sama.

2. Rentang Gaya: Anda akan melihat bahwa kita menyediakan dua nilai untuk font-weight dan font-stretch. Alih-alih memberi tahu browser tentang bobot spesifik yang disediakan font ini (misalnya font-weight: 500;), kini kita memberikan rentang bobot yang didukung oleh font. Untuk Roboto Flex, sumbu Berat berkisar dari 100 hingga 1000, dan CSS secara langsung memetakan rentang sumbu ke properti gaya font-weight. Dengan menentukan rentang dalam @font-face, nilai apa pun di luar rentang ini akan "dibatasi" ke nilai valid terdekat. Rentang sumbu Lebar dipetakan dengan cara yang sama ke properti font-stretch.

Jika Anda menggunakan Google Fonts API, semua hal ini akan ditangani. CSS tidak hanya akan berisi format sumber dan rentang yang tepat, Google Fonts juga akan mengirim font penggantian statis jika font variabel tidak didukung.

Menggunakan bobot dan lebar

Saat ini, sumbu yang dapat Anda tetapkan dengan andal dari CSS adalah sumbu wght hingga font-weight, dan sumbu wdth hingga font-stretch.

Biasanya, Anda akan menetapkan font-weight sebagai kata kunci (light, bold) atau sebagai nilai numerik antara 100 dan 900, dalam langkah 100. Dengan font variabel, Anda dapat menyetel nilai apa pun dalam Rentang lebar font:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Demikian pula, kita dapat menetapkan font-stretch dengan kata kunci (condensed, ultra-expanded) atau dengan nilai persentase:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Menggunakan huruf miring dan miring

Sumbu ital ditujukan untuk font yang berisi gaya reguler, dan gaya miring. Sumbu dimaksudkan untuk menjadi tombol aktif/nonaktif: nilai 0 nonaktif dan akan menampilkan gaya reguler, nilai 1 akan menampilkan huruf miring. Tidak seperti sumbu lain, tidak ada transisi. Nilai 0.5 tidak akan memberi Anda "setengah miring".

Sumbu slnt berbeda dari miring karena bukan merupakan gaya baru, tetapi hanya miring ke gaya biasa. Secara default, nilainya adalah 0, yang berarti bentuk huruf tegak default. Roboto Flex memiliki kemiringan maksimum -10 derajat, yang berarti hurufnya akan condong ke kanan saat beralih dari 0 ke -10.

Akan lebih intuitif untuk menetapkan sumbu ini melalui properti font-style, tetapi mulai April 2020, cara melakukannya dengan tepat masih diupayakan. Jadi untuk saat ini, Anda harus memperlakukannya sebagai sumbu kustom, dan menetapkannya melalui font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

Menggunakan ukuran optik

Jenis huruf dapat dirender dengan sangat kecil (catatan kaki 12px) atau sangat besar (judul 80px). Font dapat merespons perubahan ukuran ini dengan mengubah bentuk hurufnya agar lebih sesuai dengan ukurannya. Ukuran kecil mungkin lebih baik tanpa detail halus, sementara ukuran besar mungkin mendapatkan manfaat dari detail yang lebih banyak dan goresan yang lebih tipis.

Properti CSS baru telah diperkenalkan untuk sumbu ini: font-optical-sizing. Secara default, atribut ini ditetapkan ke auto, yang membuat browser menetapkan nilai sumbu berdasarkan font-size. Artinya, browser akan memilih ukuran optik terbaik secara otomatis, tetapi jika ingin menonaktifkannya, Anda dapat menetapkan font-optical-sizing ke none.

Anda juga dapat menetapkan nilai kustom untuk sumbu opsz, jika Anda sengaja menginginkan ukuran optik yang tidak cocok dengan ukuran font. CSS berikut akan menyebabkan teks ditampilkan pada ukuran besar, tetapi pada ukuran optik seolah-olah dicetak di 8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

Menggunakan sumbu kustom

Tidak seperti sumbu yang terdaftar, sumbu kustom tidak akan dipetakan ke properti CSS yang ada, sehingga Anda harus selalu menetapkannya melalui font-variation-settings. Tag untuk sumbu kustom selalu menggunakan huruf besar untuk membedakannya dari sumbu yang terdaftar.

Roboto Flex menawarkan beberapa sumbu kustom, dan yang paling penting adalah Nilai (GRAD). Sumbu Grade bersifat menarik karena dapat mengubah ketebalan font tanpa mengubah lebarnya, sehingga jeda baris tidak berubah. Dengan menggunakan sumbu Grade, Anda dapat menghindari keharusan mengutak-atik perubahan pada sumbu Berat yang memengaruhi lebar keseluruhan, lalu berubah pada sumbu Lebar yang memengaruhi bobot keseluruhan.

Karena GRAD adalah sumbu kustom, dengan rentang -200 hingga 150 di Roboto Flex. Kita perlu mengatasinya dengan font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Font variabel di Google Fonts

Google Fonts telah memperluas katalog mereka dengan font variabel, dan menambahkan yang baru secara rutin. Antarmuka saat ini ditujukan untuk memilih instance tunggal dari font: Anda memilih variasi yang diinginkan, klik "Select this style", dan itu akan ditambahkan ke elemen <link> yang mengambil CSS dan font dari Google Fonts.

Untuk menggunakan semua sumbu atau rentang nilai yang tersedia, Anda harus menulis URL secara manual ke Google Fonts API. Ringkasan font variabel mencantumkan semua sumbu dan nilai.

Alat Link Font Variabel Google juga dapat memberi Anda URL terbaru untuk font variabel lengkap.

Pewarisan setelan font-variasi

Meskipun semua sumbu yang terdaftar akan segera didukung melalui properti CSS yang ada, untuk saat ini Anda mungkin perlu mengandalkan font-variation-settings sebagai penggantian. Dan jika font Anda memiliki sumbu kustom, Anda juga memerlukan font-variation-settings.

Namun, ada sedikit kesalahan pada font-variation-settings. Setiap properti yang tidak Anda tetapkan secara eksplisit akan otomatis direset ke default. Nilai yang ditetapkan sebelumnya tidak diwariskan. Artinya, hal berikut tidak akan berfungsi seperti yang diharapkan:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Pertama, browser akan menerapkan font-variation-settings: 'slnt' 10 dari class .slanted. Kemudian, font-variation-settings: 'GRAD' -200 akan diterapkan dari class .grade-light. Namun, tindakan ini akan mereset slnt kembali ke default-nya, yaitu 0. Hasilnya akan berupa teks dalam tingkat ringan, tetapi tidak miring.

Untungnya, kita bisa mengatasi ini dengan menggunakan variabel CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

Variabel CSS akan bersifat menurun, sehingga jika suatu elemen (atau salah satu induknya) menetapkan slnt ke 10, nilai tersebut akan dipertahankan, meskipun Anda menetapkan GRAD ke hal lain. Lihat Memperbaiki pewarisan font variabel untuk mengetahui penjelasan mendalam tentang teknik ini.

Perhatikan bahwa menganimasikan variabel CSS tidak akan berfungsi (berdasarkan desain), jadi sesuatu seperti ini tidak akan berfungsi:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Animasi ini harus terjadi langsung pada font-variation-settings.

Peningkatan performa

Font variabel OpenType memungkinkan kita menyimpan beberapa variasi jenis jenis ke dalam satu file font. Monotype menjalankan eksperimen dengan menggabungkan 12 font input untuk menghasilkan delapan bobot, di tiga lebar, pada gaya Miring dan Roman. Dengan menyimpan 48 font individual dalam satu file font variabel, ukuran file berkurang 88%.

Namun, jika menggunakan font tunggal seperti Roboto Regular dan tidak yang lain, Anda mungkin tidak melihat perolehan bersih dalam ukuran font jika beralih ke font variabel dengan banyak sumbu. Seperti biasa, ini tergantung pada kasus penggunaan Anda.

Di sisi lain, menganimasikan font di antara setelan dapat menyebabkan masalah performa. Meskipun ini akan meningkat setelah dukungan font variabel di browser menjadi lebih matang, masalahnya dapat dikurangi dengan hanya menganimasikan font yang saat ini ada di layar. Cuplikan praktis dari Dinamo ini menjeda animasi dalam elemen dengan class vf-animation saat tidak ada di layar:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

Jika font Anda merespons interaksi pengguna, sebaiknya throttle atau debounce peristiwa input. Ini akan mencegah browser merender instance dari font variabel yang sedikit berubah dari instance sebelumnya, mata manusia tidak akan melihat perbedaannya.

Jika Anda menggunakan Google Fonts, sebaiknya lakukan preconnect ke https://fonts.gstatic.com, domain tempat font Google dihosting. Cara ini akan memastikan browser tahu lebih awal di mana harus mendapatkan font ketika menemukannya di CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Tips ini juga berfungsi untuk CDN lainnya: semakin cepat Anda mengizinkan browser menyiapkan koneksi jaringan, semakin cepat browser dapat mendownload font Anda.

Temukan tips performa lainnya untuk memuat Google Fonts di Google Fonts Tercepat.

Penggantian dan dukungan browser

Semua browser modern mendukung font variabel. Jika perlu mendukung browser lama, Anda dapat memilih untuk membuat situs dengan font statis, dan menggunakan font variabel sebagai progressive enhancement:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

Untuk browser lama, teks dengan class .super-bold akan dirender dalam cetak tebal normal, karena hanya itulah font tebal yang tersedia. Ketika font variabel didukung, kita sebenarnya dapat menggunakan bobot terberat 1000.

Aturan @supports tidak didukung oleh Internet Explorer, sehingga browser ini tidak akan menampilkan gaya visual apa pun. Jika hal ini menjadi masalah, Anda dapat menggunakan salah satu hack sekolah lama untuk menargetkan browser lama yang relevan.

Jika Anda menggunakan Google Fonts API, pemuatan font yang tepat untuk browser pengunjung akan dilakukan. Misalnya Anda meminta font Oswald dalam rentang ketebalan 200 hingga 700, seperti berikut:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Browser modern yang dapat menangani font variabel akan mendapatkan font variabel, dan akan memiliki setiap bobot yang tersedia antara 200 dan 700. Browser lama akan dilayani setiap font statis untuk setiap bobot. Dalam hal ini, ini berarti mereka akan mendownload 6 file font: satu untuk ketebalan 200, satu untuk ketebalan 300, dan seterusnya.

Terima kasih

Artikel ini hanya akan dapat terwujud dengan bantuan dari orang-orang berikut:

• Harusafa Kurtuldu, UX designer dan advokat desain di Google
• Roel Nieskens, UX designer/developer dan pakar tipografi di Kabisa
• Dave Crossland, Program Manager, Google Fonts
• David Berlow, desainer jenis dan tipografi di Font Bureau
• Laurence Penney, developer axis-praxis.org
• Mandy Michael, developer variablefonts.dev

Banner besar oleh Bruno Martins di Unsplash.