Spesifikasi font baru yang dapat secara signifikan mengurangi ukuran file font
Dalam artikel ini, kita akan melihat apa itu font variabel, manfaat yang ditawarkannya, dan cara menggunakannya dalam pekerjaan kita. Pertama, mari kita tinjau cara kerja tipografi di web, dan inovasi yang dibawa font variabel.
Kompatibilitas browser
Mulai Mei 2020, font variabel didukung di sebagian besar browser. Lihat Dapatkah saya menggunakan font variabel? dan Penggantian.
Pengantar
Istilah font dan typeface sering digunakan secara bergantian oleh developer. Namun, ada perbedaan: Jenis huruf adalah desain visual yang mendasarinya yang dapat ada dalam berbagai teknologi tata letak, dan font 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 satu jenis huruf tertentu, seperti Bold Italic, dan keluarga adalah kumpulan lengkap gaya.
Sebelum font variabel, setiap gaya diterapkan sebagai file font terpisah. Dengan font variabel, semua gaya dapat dimuat dalam satu file.
Tantangan bagi desainer dan developer
Saat membuat project cetak, desainer menghadapi beberapa batasan, seperti ukuran fisik tata letak halaman, jumlah warna yang dapat digunakan (yang ditentukan oleh jenis mesin cetak yang akan digunakan), dan sebagainya. Namun, mereka dapat menggunakan gaya typeface sebanyak yang mereka suka. Artinya, tipografi media cetak sering kali kaya dan canggih, sehingga pengalaman membaca benar-benar menyenangkan. Pikirkan terakhir kali Anda menikmati menjelajahi majalah yang bagus.
Desainer dan developer web memiliki batasan yang berbeda dengan desainer cetak, dan salah satu yang penting adalah biaya bandwidth terkait desain kita. Hal ini telah menjadi masalah bagi pengalaman tipografi yang lebih kaya, karena pengalaman tersebut memerlukan biaya. Dengan font web tradisional, setiap gaya yang digunakan dalam desain kami mengharuskan pengguna untuk mendownload file font terpisah, yang meningkatkan latensi dan waktu rendering halaman. Hanya menyertakan gaya Biasa dan Tebal, serta gaya miringnya, dapat berjumlah 500 KB atau lebih data font. Hal ini bahkan sebelum kita menangani cara font dirender, pola penggantian yang perlu kita gunakan, atau efek samping yang tidak diinginkan seperti FOIT dan FOUT.
Banyak jenis font yang menawarkan rentang gaya yang jauh lebih luas, dari ketebalan Tipis hingga Tebal, 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 memaketkan gaya ke dalam satu file.
Cara ini berfungsi dengan memulai dari gaya tengah atau 'default', biasanya 'Regular'–desain romawi tegak dengan ketebalan dan lebar paling umum yang paling cocok untuk teks biasa. Kemudian, ini terhubung ke gaya lain dalam rentang berkelanjutan, yang disebut 'sumbu'. Sumbu yang paling umum adalah Ketebalan, yang dapat menghubungkan gaya default ke gaya Tebal. Setiap gaya individual dapat ditempatkan di sepanjang sumbu, dan disebut 'instance' font variabel. Beberapa instance diberi nama oleh developer font, misalnya lokasi sumbu Ketebalan 600 disebut SemiBold.
Font variabel Roboto Flex memiliki tiga gaya untuk sumbu Bobot. Gaya Reguler berada di tengah, dan ada dua gaya di ujung yang berlawanan dari sumbu, satu lebih terang dan yang lainnya lebih gelap. Di antara keduanya, Anda dapat memilih dari 900 instance:
Developer font dapat menawarkan serangkaian sumbu yang berbeda. Anda dapat menggabungkannya karena semuanya memiliki gaya default yang sama. Roboto memiliki tiga gaya dalam sumbu Lebar: Reguler berada di tengah sumbu, dan dua gaya, lebih sempit dan lebih lebar, berada di setiap ujung. Ini memberikan semua lebar gaya Reguler, dan digabungkan dengan sumbu Bobot untuk memberikan semua lebar untuk setiap bobot.
Artinya, ada ribuan gaya! Hal ini mungkin tampak berlebihan, tetapi kualitas pengalaman membaca dapat ditingkatkan secara signifikan dengan keragaman gaya huruf ini. Selain itu, jika tidak ada penurunan performa, developer web dapat menggunakan beberapa atau sebanyak gaya yang mereka inginkan–tergantung desain mereka.
Miring
Cara penanganan huruf 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 Miring dapat diinterpolasi di antara dan sumbu Miring dapat digunakan untuk beralih dari Roman ke Miring.
Jenis huruf lain (seperti Garamond, Baskerville, atau Bodoni) memiliki kontur glyph Roman dan Miring yang tidak kompatibel dengan interpolasi. Misalnya, kontur yang biasanya menentukan "n" kecil Romawi tidak cocok dengan kontur yang digunakan untuk menentukan "n" kecil Miring. Alih-alih melakukan interpolasi satu kontur ke kontur lainnya, sumbu Italic beralih dari kontur Roman ke Italic.
Setelah beralih ke Miring, sumbu yang tersedia untuk pengguna harus sama dengan sumbu untuk Roman, sama seperti kumpulan karakter yang harus sama.
Kemampuan penggantian glyph juga dapat dilihat untuk setiap glyph, dan digunakan di mana saja di ruang desain font variabel. Misalnya, desain tanda dolar dengan dua batang vertikal berfungsi paling baik pada ukuran titik yang lebih besar, tetapi pada ukuran titik yang lebih kecil, desain dengan hanya satu batang akan lebih baik. Jika kita memiliki lebih sedikit piksel untuk merender glyph, desain dua batang dapat menjadi tidak terbaca. Untuk mengatasi hal ini, seperti sumbu Miring, penggantian glyph dari satu glyph ke glyph lain dapat terjadi di sepanjang sumbu Ukuran Optik pada titik yang ditentukan oleh desainer huruf.
Singkatnya, jika kontur memungkinkannya, desainer huruf dapat membuat font yang melakukan interpolasi di antara berbagai gaya dalam ruang desain multi-dimensi. Hal ini memberi Anda kontrol terperinci atas tipografi, dan banyak hal lainnya.
Definisi sumbu
Ada lima sumbu terdaftar, yang mengontrol fitur font yang diketahui dan dapat diprediksi: ketebalan, lebar, ukuran optik, miring, dan miring. Selain itu, font dapat berisi sumbu kustom. Hal ini dapat mengontrol aspek desain font yang diinginkan desainer huruf: ukuran serif, panjang goresan, tinggi ascender, atau ukuran titik pada huruf i.
Meskipun sumbu dapat mengontrol fitur yang sama, sumbu tersebut mungkin menggunakan nilai yang berbeda. Misalnya, dalam font variabel Oswald dan Hepta Slab, hanya ada satu sumbu yang tersedia, yaitu Ketebalan, tetapi rentangnya berbeda–Oswald memiliki rentang yang sama seperti sebelum diupgrade menjadi variabel, 200 hingga 700, tetapi Hepta Slab memiliki ketebalan garis tipis yang ekstrem pada 1 yang mencapai hingga 900.
Lima sumbu terdaftar memiliki tag huruf kecil 4 karakter yang digunakan untuk menetapkan nilainya di CSS:
| Nama sumbu dan nilai CSS | |
|---|---|
| Berat |
wght
|
| Lebar |
wdth
|
| Bingung |
slnt
|
| Ukuran Optik |
opsz
|
| Miring |
ital
|
Karena developer font menentukan sumbu yang tersedia dalam font variabel, dan nilai yang dapat dimilikinya, penting untuk mengetahui apa yang ditawarkan setiap font. Dokumentasi font akan memberikan informasi 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 dari teknologi baru adalah kemungkinan penyalahgunaan, dan setelan yang terlalu artistik atau eksploratif juga dapat mengurangi keterbacaan teks yang sebenarnya. Untuk judul, menjelajahi berbagai sumbu untuk membuat desain artistik yang bagus memang menarik, tetapi untuk teks isi, hal ini berisiko membuat teks tidak terbaca.
Ekspresi menarik
Salah satu contoh ekspresi artistik yang bagus ditampilkan di atas, yaitu eksplorasi font Decovar oleh Mandy Michael.
Anda dapat melihat contoh yang berfungsi dan kode sumber untuk contoh di atas di sini.
Animasi
Ada juga kemungkinan untuk menjelajahi karakter animasi dengan font variabel. Di atas adalah contoh sumbu yang berbeda yang digunakan dengan typeface Zycon. Lihat contoh animasi langsung di Axis Praxis.
Anicons adalah font ikon warna animasi pertama di dunia, berdasarkan Ikon Desain Material. Anikon adalah eksperimen yang menggabungkan dua teknologi font canggih: font variabel dan font warna.
Finesse
Roboto Flex dan Amstelvar menawarkan serangkaian "Sumbu Parametrik". Pada sumbu ini, huruf didekonstruksi menjadi 4 aspek bentuk fundamental: bentuk hitam atau positif, bentuk putih atau negatif, dan dimensi x dan y. Dengan cara yang sama seperti warna primer yang dapat dicampur dengan warna lain untuk menyesuaikannya, 4 aspek ini dapat digunakan untuk menyesuaikan sumbu lainnya.
Sumbu XTRA di Amstelvar memungkinkan Anda menyesuaikan nilai per mille "putih", seperti yang ditunjukkan di atas. Dengan menggunakan sedikit XTRA dalam arah yang berlawanan, lebar kata akan disamakan.
Font variabel di CSS
Memuat file font variabel
Font variabel dimuat melalui mekanisme @font-face yang sama dengan 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: sekali dalam
sintaksis
mendatang
(format('woff2') tech('variations')), sekali dalam sintaksis browser
yang tidak digunakan lagi tetapi didukung (format('woff2-variations')). Jika browser mendukung font variabel dan mendukung
sintaksis mendatang, browser akan menggunakan deklarasi pertama. Jika mendukung font
variabel dan sintaksis saat ini, font tersebut akan menggunakan deklarasi kedua. Keduanya
menunjuk ke file font yang sama.
2. Rentang Gaya: Anda akan melihat bahwa kami menyediakan dua nilai untuk font-weight
dan font-stretch. Daripada memberi tahu browser ketebalan spesifik yang disediakan font ini (misalnya font-weight: 500;), sekarang kita memberinya rentang ketebalan yang didukung oleh font. Untuk Roboto Flex, sumbu Bobot berkisar dari 100
hingga 1.000, dan CSS secara langsung memetakan rentang sumbu ke properti gaya
font-weight. Dengan menentukan rentang di @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 ini akan ditangani. CSS tidak hanya akan berisi format dan rentang sumber yang tepat, Google Fonts juga akan mengirimkan font penggantian statis jika font variabel tidak didukung.
Menggunakan ketebalan dan lebar
Saat ini, sumbu yang dapat Anda tetapkan dengan andal dari CSS adalah sumbu wght melalui
font-weight, dan sumbu wdth melalui font-stretch.
Secara tradisional, Anda akan menetapkan font-weight sebagai kata kunci (light, bold) atau sebagai
nilai numerik antara 100 dan 900, dengan langkah 100. Dengan font variabel, Anda
dapat menetapkan 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 miring dan miring miring
Sumbu ital ditujukan untuk font yang berisi gaya reguler dan
gaya miring. Sumbu dimaksudkan sebagai tombol aktif/nonaktif: nilai 0 nonaktif dan
akan menampilkan gaya reguler, nilai 1 akan menampilkan miring. Tidak seperti sumbu lainnya,
tidak ada transisi. Nilai 0.5 tidak akan memberi Anda "setengah miring".
Sumbu slnt berbeda dengan miring karena bukan gaya baru, tetapi
hanya memiringkan gaya reguler. Secara default, nilainya adalah 0, yang berarti
bentuk huruf tegak default. Roboto Flex memiliki kemiringan maksimum -10 derajat,
yang berarti huruf akan miring ke kanan saat beralih dari 0 ke -10.
Anda dapat menetapkan sumbu ini secara intuitif melalui properti font-style, tetapi
pada April 2020, cara melakukannya secara persis masih sedang
dikerjakan. Jadi, untuk saat ini, Anda harus
menganggapnya 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 sangat kecil (catatan kaki 12 px) atau sangat besar (judul 80 px). Font dapat merespons perubahan ukuran ini dengan mengubah bentuk hurufnya agar lebih sesuai dengan ukurannya. Ukuran kecil mungkin lebih baik tanpa detail halus, sedangkan ukuran besar mungkin mendapatkan manfaat dari lebih banyak detail 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 Anda 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 dalam ukuran besar, tetapi dalam ukuran optik seolah-olah
dicetak dalam 8pt:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Menggunakan sumbu kustom
Tidak seperti sumbu 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 terdaftar.
Roboto Flex menawarkan beberapa sumbu kustom, dan yang paling penting adalah Grade (GRAD).
Sumbu Grade menarik karena mengubah ketebalan font tanpa
mengubah lebar, sehingga akhir baris tidak berubah. Dengan mengubah sumbu Gradien,
Anda dapat menghindari perubahan pada sumbu Bobot yang memengaruhi
lebar keseluruhan, lalu perubahan 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 katalognya dengan font
variabel, dan menambahkan font baru secara rutin.
Antarmuka saat ini ditujukan untuk memilih satu instance dari font:
Anda memilih variasi yang diinginkan, mengklik "Pilih gaya ini", dan variasi tersebut akan
ditambahkan ke elemen <link> yang mengambil CSS dan font dari Google Fonts.
Untuk menggunakan semua sumbu, atau rentang nilai yang tersedia, Anda harus membuat 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-variation
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, berikut adalah sedikit masalah dengan font-variation-settings. Setiap properti
yang tidak Anda tetapkan secara eksplisit akan otomatis direset ke setelan defaultnya.
Nilai yang ditetapkan sebelumnya tidak diwarisi. 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, class ini akan menerapkan font-variation-settings: 'GRAD' -200 dari
class .grade-light. Namun, tindakan ini akan mereset slnt kembali ke defaultnya
0. Hasilnya akan berupa teks dengan tingkat terang, tetapi tidak miring.
Untungnya, kita dapat mengatasi hal 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 berurutan, jadi jika elemen (atau salah satu induknya) akan
menetapkan slnt ke 10, elemen tersebut akan mempertahankan nilai tersebut, meskipun Anda menetapkan GRAD ke
hal lain. Lihat
Memperbaiki pewarisan font variabel
untuk penjelasan mendalam tentang teknik ini.
Perhatikan bahwa menganimasikan variabel CSS tidak berfungsi (secara desain), sehingga hal seperti ini tidak berfungsi:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Animasi ini harus terjadi langsung di font-variation-settings.
Peningkatan performa
Font variabel OpenType memungkinkan kita menyimpan beberapa variasi jenis huruf ke dalam satu file font. Monotype melakukan eksperimen dengan menggabungkan 12 font input untuk menghasilkan delapan ketebalan, di tiga lebar, di seluruh gaya Miring dan Romawi. Menyimpan 48 font individual dalam satu file font variabel berarti pengurangan ukuran file sebesar 88%.
Namun, jika Anda menggunakan satu font seperti Roboto Regular dan tidak ada font lainnya, Anda mungkin tidak melihat peningkatan bersih pada ukuran font jika beralih ke font variabel dengan banyak sumbu. Seperti biasa, hal ini bergantung pada kasus penggunaan Anda.
Di sisi lain, menganimasikan font di antara setelan dapat menyebabkan masalah performa. Meskipun hal 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 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 batasi atau jeda peristiwa input. Hal ini akan mencegah browser merender instance font variabel yang berubah sangat sedikit dari instance sebelumnya sehingga mata manusia tidak akan melihat perbedaannya.
Jika Anda menggunakan Google Fonts, sebaiknya
prakoneksi ke https://fonts.gstatic.com,
domain tempat font Google dihosting. Tindakan ini akan memastikan browser
mengetahui sejak awal tempat mendapatkan font saat menemukannya di CSS:
<link rel="preconnect" href="https://fonts.gstatic.com" />
Tips ini juga berlaku untuk CDN lain: 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 mem-build 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 itu satu-satunya font tebal yang tersedia. Jika font variabel
didukung, kita sebenarnya dapat menggunakan ketebalan terberat 1.000.
Aturan @supports tidak didukung oleh Internet Explorer, sehingga browser ini tidak akan menampilkan gaya apa pun. Jika ini menjadi masalah, Anda selalu dapat menggunakan salah satu
hack lama untuk menargetkan browser lama
yang relevan.
Jika Anda menggunakan Google Fonts API, API ini akan memuat font yang tepat untuk browser pengunjung. Misalnya, Anda meminta font Oswald dalam rentang ketebalan 200 hingga 700, seperti ini:
<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 ketebalan antara 200 dan 700. Browser lama akan menerima font statis individual untuk setiap ketebalan. Dalam hal ini, artinya file font akan didownload sebanyak 6: satu untuk ketebalan 200, satu untuk ketebalan 300, dan sebagainya.
Terima kasih
Artikel ini hanya dapat dibuat dengan bantuan orang-orang berikut:
- Mustafa Kurtuldu, UX designer dan pendukung desain di Google
- Roel Nieskens, UX designer/developer dan pakar tipografi di Kabisa
- Dave Crossland, Program Manager, Google Fonts
- David Berlow, desainer dan tipografi huruf di Font Bureau
- Laurence Penney, developer axis-praxis.org
- Mandy Michael, developer variablefonts.dev
Gambar hero oleh Bruno Martins di Unsplash.