Pengantar font variabel di web

Spesifikasi font baru yang dapat secara signifikan mengurangi ukuran file font

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

Dalam artikel ini, kita akan melihat apa yang dimaksud dengan font variabel, manfaatnya, dan cara menggunakannya dalam pekerjaan. 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 {i>font<i} dan jenis huruf sering kali digunakan secara bergantian oleh pengembang. 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 typeface spesifik, 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 untuk desainer dan pengembang

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. Ini berarti bahwa 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 yang penting adalah biaya bandwidth terkait dari desain kami. 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, beserta 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 menawarkan rentang gaya yang jauh lebih luas, dari tebal 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 memaketkan gaya ke dalam satu file.

Cara ini dilakukan 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 Bobot, 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 bobot 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 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. Dan, jika tanpa masalah performa, developer web dapat menggunakan beberapa atau sebanyak mungkin gaya sesuai keinginan 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.

Typeface lainnya (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 berinterpolasi 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 telah diketahui dan dapat diprediksi: ketebalan, lebar, ukuran optik, miring, dan miring. Selain itu, {i>font<i} dapat berisi sumbu khusus. 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 Bobot, tetapi rentangnya berbeda–Oswald memiliki rentang yang sama seperti sebelum diupgrade menjadi variabel, 200 ke 700, tetapi Hepta Slab memiliki ketebalan garis rambut ekstrem di 1 yang mencapai hingga 900.

Kelima 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 dimilikinya, penting untuk mencari tahu 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 yang 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 mengeksplorasi animasi karakter dengan font variabel. Di atas adalah contoh sumbu yang berbeda yang digunakan dengan typeface Zycon. Lihat contoh animasi langsung pada Sumbu Praksi.

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 "Parametric Axes." 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 dapat dicampur dengan warna lain untuk menyesuaikannya, keempat aspek ini dapat digunakan untuk meningkatkan 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, deklarasi kedua akan digunakan. 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 huruf miring dan 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 miring ke kanan saat beralih dari 0 ke -10.

Akan intuitif untuk menyetel sumbu ini melalui properti font-style, tetapi mulai April 2020, cara tepatnya untuk melakukannya masih diselesaikan. 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 yang terdaftar, sumbu kustom tidak akan dipetakan ke properti CSS yang sudah 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 bermain-main dengan sumbu Kelas, Anda dapat menghindari keharusan mengutak-atik perubahan pada sumbu Bobot yang memengaruhi lebar keseluruhan, lalu mengubah 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-variasi-font

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 Anda tidak tetapkan secara eksplisit akan otomatis direset ke default. 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, kode 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 dalam nilai ringan, tetapi tidak miring.

Untungnya, kita dapat mengatasi masalah 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 menurun, sehingga jika elemen (atau salah satu induknya) telah menetapkan slnt ke 10, elemen ini akan mempertahankan nilai tersebut, meskipun Anda menetapkan GRAD ke sesuatu yang 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 menggunakan font tunggal seperti Roboto Regular dan yang lain, Anda mungkin tidak akan melihat peningkatan bersih dalam 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 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 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 prakoneksikan 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 mereka akan mendownload 6 file font: 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.