Nowa specyfikacja czcionki, która może znacznie zmniejszyć rozmiar pliku czcionek
Z tego artykułu dowiesz się, czym są zmienne czcionki, jakie dają korzyści i jak można ich używać w pracy. Zaczniemy od tego, jak działa typografia w internecie i jakie są możliwości czcionek zmiennych innowacji.
Zgodność z przeglądarką
Od maja 2020 r. czcionki zmiennych są obsługiwane przez większość przeglądarek. Przeczytaj artykuły Czy mogę używać zmiennych czcionek? i Wartości zastępcze.
Wstęp
Terminy i krój pisma są często stosowane zamiennie przez programistów. Istnieje jednak różnica: krój czcionki to podstawowy projekt wizualny, który może występować w wielu różnych technologiach kroju pisma, a jednym z takich implementacji jest czcionka w formacie pliku cyfrowego. Innymi słowy, jak widzisz krój, a czcionka to używana czcionka.
Kolejną kwestią, o której często zapominamy, jest różnica między stylem a rodziną. Styl to pojedynczy, konkretny krój czcionki (np. Pogrubiona kursywa), a rodzina to kompletny zestaw stylów.
Przed wprowadzeniem zmiennych czcionek każdy styl był implementowany jako osobny plik czcionek. Dzięki zmiennym czcionkom wszystkie style można zawrzeć w jednym pliku.
Wyzwania dla projektanta i programisty
Podczas tworzenia projektu druku projektant podlega pewnym ograniczeniom, takim jak fizyczny rozmiar układu strony, liczba kolorów, których może użyć (zależy od rodzaju używanej prasy drukarskiej) itd. Mogą jednak używać dowolnej liczby stylów kroju czcionki. Oznacza to, że typografia mediów drukowanych jest często bogata i wyrafinowana, co sprawia, że czytanie jest naprawdę przyjemnością. Przypomnij sobie, kiedy ostatnio lubiłeś przeglądać świetne czasopismo.
Projektanci stron internetowych i programiści mają inne ograniczenia niż projektanci odbitek. Istotnym elementem są koszty przepustowości związane z naszymi projektami. Jest to podstawa dla bogatszych treści typograficznych, które są płatne. W przypadku tradycyjnych czcionek internetowych każdy styl stosowany w naszych projektach wymaga od użytkowników pobrania osobnego pliku czcionek, co wydłuża czas oczekiwania i skraca czas renderowania stron. Rozmiar danych czcionek nie może przekraczać 500 KB, jeśli uwzględniono tylko style Zwykły i Pogrubienie oraz ich odpowiedniki kursywy. Jeszcze zanim zajęliśmy się renderowaniem czcionek, używanymi wzorcami zastępczymi i niepożądanymi skutkami ubocznymi, takimi jak FOIT i FOUT.
Wiele rodzin czcionek oferuje znacznie szerszy zakres stylów, od cienkiego po czarny, wąski i szeroki zakres szerokości, różnorodność szczegółów stylistycznych, a nawet konkretne projekty (zoptymalizowane pod kątem dużego i małego tekstu). Dla każdego stylu (lub kombinacji stylów) konieczne jest ładowanie nowego pliku czcionek, dlatego wielu programistów internetowych nie korzysta z tych funkcji, co zmniejsza komfort czytania.
Struktura czcionki zmiennej
Zmienne czcionki radzą sobie z tymi wyzwaniami, umieszczając style w jednym pliku.
Zaczynamy od stylu centralnego lub domyślnego, zwykle „Zwykły” – czyli pionowego, rzymskiego projektu o typowej grubości i szerokości, który najlepiej pasuje do zwykłego tekstu. Łączy się to z innymi stylami w ciągłym zakresie nazywanym „osią”. Najczęściej spotykana oś to Weight, która może łączyć styl domyślny ze stylem pogrubionym. Dowolny styl może być umieszczony wzdłuż osi. Jest to tzw. „wystąpienie” czcionki zmiennej. Niektóre instancje są nazwane przez programistę czcionki, np. Oś wagi 600 – oś wagi nosi nazwę „półpogrubienie”.
Czcionka Roboto Flex ma 3 style na osi Weight. Styl regularny znajduje się w środku. Na przeciwległych końcach osi są dwa style: jeden lżejszy i cięższy. Masz do wyboru 900 instancji:
Deweloper czcionki może zaoferować zestaw różnych osi. Można je połączyć, bo mają takie same style domyślne. Roboto ma trzy style na osi szerokości: regularny znajduje się pośrodku osi oraz dwa style, węższy i szerszy na każdym końcu. Obejmują one wszystkie szerokości stylu standardowego i są łączone z osią Waga, by uzyskać wszystkie szerokości dla każdej wagi.
To oznacza, że są tysiące stylów. Może się to wydawać ogromne, ale różnorodność stylów czcionki może znacznie podwyższyć jakość czytania. Jeśli nie da się tego zrobić, programiści mogą stosować dowolną liczbę stylów – to zależy od ich wyglądu.
Kursywa
Sposób obsługi kursywy przy użyciu zmiennych czcionek jest interesujący, ponieważ istnieją 2 różne podejścia. Kroje czcionek, takie jak Hanchor czy Roboto, mają kontury kompatybilne z interpolacją, dlatego style alfabetu łacińskiego i kursywy mogą być interpolowane między osią Slant, aby uzyskać zmiany z alfabetu rzymskiego na kursywę.
Inne kroje czcionki (np. Garamond, Baskerville czy Bodoni) mają kontury glifów rzymskich i kursywy, które nie są zgodne z interpolacją. Na przykład kontury, które zwykle definiują rzymską małą literę „n”, nie odpowiadają konturom używanym przy definiowaniu kursywy „n”. Zamiast interpolować jeden kontur na drugi, oś kursywa przełącza się z kontur rzymskich na kursywę.
Po przejściu na kursywę dostępne dla użytkownika osie powinny być takie same jak w przypadku języka rzymskiego, ale zestaw znaków powinien być taki sam.
Możliwość podstawienia glifów można również zaobserwować w przypadku poszczególnych glifów i wykorzystać ją w dowolnym miejscu w przestrzeni projektowej zmiennej czcionki. Na przykład znak dolara z dwoma pionowymi słupkami sprawdza się najlepiej w większych punktach, ale w mniejszych punktach projekt z tylko jednym słupkiem jest lepszy. Gdy mamy mniej pikseli do renderowania glifu, konstrukcja z 2 paskami może być nieczytelna. Aby zwalczyć ten problem, podobnie jak w przypadku osi Kursywa, wzdłuż osi Rozmiar optyczny może wystąpić zastąpienie glifami innego glifu w miejscu określonym przez projektanta typu.
Podsumowując, jeśli pozwalają na to kontury, projektanci tekstów mogą tworzyć czcionki, które współdziałają między różnymi stylami w wielowymiarowym projekcie. Daje to większą kontrolę nad typografią i daje wiele możliwości.
Definicje osi
Istnieje 5 zarejestrowanych osi, które kontrolują znane, przewidywalne funkcje czcionki: grubość, szerokość, rozmiar optyczny, skos i kursywę. Poza nimi czcionka może zawierać niestandardowe osie. Pozwalają one kontrolować dowolny aspekt projektowy czcionki zgodny z wymogami projektanta: rozmiar szeryfów, długość kresek, wysokość liter z wydłużeniem górnym lub rozmiar kropki na I.
Mimo że osie mogą sterować tą samą funkcją, mogą używać różnych wartości. Na przykład w czcionkach zmiennych Oswald i Hepta Slab dostępna jest tylko jedna oś, waga, ale zakresy są inne. Zakres Oswald jest taki sam jak przed jego przekształceniem w zmienną (200 do 700), ale Hepta Slab ma ekstremalną wagę linii włosów na poziomie 1, który wynosi maksymalnie 900.
Pięć zarejestrowanych osi ma tagi składające się z 4 znaków (małych liter), które służą do ustawiania wartości w CSS:
| Nazwy osi i wartości CSS | |
|---|---|
| Waga |
wght
|
| Szerokość |
wdth
|
| Spojrzenie z ukosa |
slnt
|
| Rozmiar optyczny |
opsz
|
| Kursywa |
ital
|
Ponieważ deweloper czcionki określa, które osie są dostępne dla zmiennych czcionek i jakie wartości mogą mieć, ważne jest, by sprawdzić, co oferuje każda z czcionek. Tę informację znajdziesz w dokumentacji czcionki. Możesz też sprawdzić czcionkę za pomocą narzędzia takiego jak Wakamai Fondue.
Przypadki użycia i korzyści
Ustawienie wartości osi sprowadza się do osobistego gustu i zastosowania sprawdzonych metod typograficznych. Niebezpieczeństwem związanym z nowymi technologiami jest możliwe niewłaściwe wykorzystanie. Ustawienia, które są zbyt artystyczne lub eksploracyjne, również mogą pogorszyć czytelność tekstu. W przypadku tytułów odkrywanie różnych elementów artystycznych w celu utworzenia znakomitej koncepcji może być ekscytujące, ale w przypadku tekstu głównego ryzykujesz to, że tekst będzie nieczytelny.
Ekscytująca mina
Doskonałym przykładem ekspresji artystycznej jest eksploracja kroju czcionki Decovar autorstwa Mandy Michael.
Działanie i kod źródłowy tego przykładu znajdziesz tutaj.
Animacja
Możesz też zastanowić się nad animowaniem znaków z wykorzystaniem zmiennych czcionek. Powyżej przedstawiono przykład różnych osi używanych w przypadku kroju pisma Zycon. Zobacz przykład animacji na żywo w AxisPraxis.
Anicons to pierwsza na świecie animowana czcionka w kolorze ikony, która została opracowana w stylu Material Design. Anikony to eksperyment, który łączy 2 najnowocześniejsze technologie czcionek: zmienne i kolorowe.
Finesse
Roboto Flex i Amstelvar oferują zestaw „osi parametrycznych”. Na tych osiach litery są rozkładane na 4 podstawowe aspekty formy: czarne lub dodatnie kształty, kształty białe lub ujemne oraz wymiary X i Y. Tak samo jak kolory podstawowe można mieszać z innymi kolorami w celu jego dostosowania, te 4 sposoby można wykorzystać do dostrajania dowolnej innej osi.
Oś XTRA w Amstelvar pozwala dostosować wartość bieli na milimetr, jak pokazano powyżej. Używając małych fragmentów XTRA w przeciwnych kierunkach, szerokości słów są wyrównywane.
Zmienne czcionki w CSS
Wczytuję pliki czcionek ze zmiennymi
Czcionki zmiennych są ładowane za pomocą tego samego mechanizmu @font-face co tradycyjne statyczne czcionki internetowe, ale z 2 nowymi ulepszeniami:
@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. Formaty źródłowe: nie chcemy, aby przeglądarka pobierała czcionkę, jeśli nie obsługuje zmiennych czcionek, dlatego do przyszłej składni (format('woff2') tech('variations')) dodajemy opisy typu format i tech. Pojawiają się raz w wycofanej, ale obsługiwanej przez przeglądarki składni (format('woff2-variations')). Jeśli przeglądarka obsługuje zmienne czcionki i obsługuje kolejną składnię, korzysta z pierwszej składni. Jeśli obsługuje czcionki zmiennych i bieżącą składnię, użyje drugiej deklaracji. Oba wskazują ten sam plik czcionek.
2. Zakresy stylów: podajemy dwie wartości dla właściwości font-weight i font-stretch. Zamiast informować przeglądarkę, jaką wagę ma dana czcionka (np. font-weight: 500;), podajemy jej zakres. W przypadku Roboto Flex oś Waga mieści się w zakresie od 100 do 1000, a CSS bezpośrednio mapuje zakres osi do właściwości stylu font-weight. Jeśli określisz zakres w funkcji @font-face, każda wartość spoza tego zakresu zostanie ograniczona do najbliższej prawidłowej wartości. Zakres osi szerokości jest mapowany w taki sam sposób na właściwość font-stretch.
Jeśli korzystasz z interfejsu Google Fonts API, wszystko zostanie rozwiązane. CSS nie tylko będzie zawierał odpowiednie formaty i zakresy źródłowe, lecz także Google Fonts wysyła także statyczne czcionki zastępcze na wypadek, gdyby czcionki zmienne nie były obsługiwane.
Używanie wag i szerokości
Obecnie osie, które można pewnie ustawić w CSS, to oś wght do font-weight, a oś wdth przez font-stretch.
Tradycyjnie ustawiasz font-weight jako słowo kluczowe (light, bold) lub wartość liczbową z zakresu od 100 do 900, w krokach 100. Czcionki te pozwalają ustawić
dowolną wartość z zakresu szerokości czcionki:
.kinda-light {
font-weight: 125;
}
.super-heavy {
font-weight: 1000;
}
Możemy także ustawić font-stretch za pomocą słów kluczowych (condensed, ultra-expanded) lub wartości procentowych:
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
Korzystanie z kursywy i ukośnych
Oś ital jest przeznaczona dla czcionek, które zawierają zarówno styl zwykły, jak i kursywa. Oś może być przełącznikiem do włączania i wyłączania: wartość 0 jest wyłączona i oznacza zwykły styl, a wartość 1 wskazuje kursywę. W przeciwieństwie do innych osi
nie ma przejść. Wartość 0.5 nie powoduje uwzględnienia „połowie kursywy”.
Oś slnt różni się od kursywy tym, że nie jest nowym stylem, tylko ukośa zwykły styl. Domyślnie jego wartością jest 0, co oznacza domyślne kształty pionowe liter. Maksymalny nachylenie urządzenia Roboto Flex to -10 stopni,
co oznacza, że litery pochylają się w prawo przy przechodzeniu od 0 do -10.
Ustawienie tych osi za pomocą właściwości font-style byłoby intuicyjne, ale od kwietnia 2020 r. pracujemy jeszcze nad tym, jak to zrobić. Na razie należy traktować je jako osie niestandardowe i ustawić je w 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;
}
Używanie rozmiarów optycznych
Krój czcionki może być renderowany bardzo mały (przypis o długości 12 pikseli) lub bardzo duży (nagłówek 80 pikseli). Czcionki mogą reagować na te zmiany rozmiaru, zmieniając kształty liter tak, by lepiej pasowały do rozmiaru. Im mały rozmiar, bez drobnych szczegółów, a duży – więcej szczegółów i cieńszych kresek.
W przypadku tej osi wprowadzono nową właściwość CSS: font-optical-sizing. Domyślnie ustawiona jest wartość auto, co sprawia, że przeglądarka ustawia wartość osi na podstawie parametru font-size. Oznacza to, że przeglądarka automatycznie wybierze najlepszy rozmiar optyczny, ale jeśli chcesz wyłączyć tę funkcję, możesz ustawić font-optical-sizing na none.
Jeśli celowo chcesz, aby rozmiar optyczny nie był zgodny z rozmiarem czcionki, możesz ustawić niestandardową wartość dla osi opsz. Ten kod CSS spowodowałby wyświetlenie tekstu w dużym rozmiarze, ale w rozmiarze optycznym, tak jakby był on wydrukowany w 8pt:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Używanie niestandardowych osi
W przeciwieństwie do zarejestrowanych osi niestandardowe osie nie będą mapowane na istniejącą właściwość CSS, więc zawsze trzeba będzie je ustawiać za pomocą właściwości font-variation-settings.
Tagi osi niestandardowych są zawsze pisane wielkimi literami, aby można było odróżnić je od zarejestrowanych osi.
Roboto Flex oferuje kilka niestandardowych osi, a najważniejszą z nich jest gradacja (GRAD).
Oś ocen jest ciekawa, bo zmienia wagę czcionki bez zmiany szerokości, dzięki czemu podziały wierszy się nie zmieniają. Wykorzystując oś ocen, można uniknąć konieczności zmiany ustawień osi wagi, która wpływa na całkowitą szerokość, a następnie zmiany osi Szerokość, która ma wpływ na wagę ogólną.
GRAD to oś niestandardowa o zakresie od -200 do 150 w Roboto Flex.
Musimy rozwiązać ten problem przez font-variation-settings:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Zmienne czcionki w Google Fonts
Google Fonts rozszerzał swój katalog o zmienne czcionki i regularnie dodawał nowe.
Obecnie interfejs służy do wybierania pojedynczych wystąpień czcionki. Wystarczy wybrać odmianę i kliknąć „Wybierz ten styl”, a element zostanie dodany do elementu <link>, który pobiera pliki CSS i czcionki z Google Fonts.
Aby użyć wszystkich dostępnych osi lub zakresów wartości, musisz ręcznie utworzyć adres URL do interfejsu Google Fonts API. Przegląd czcionek zmiennych zawiera wszystkie osie i wartości.
Narzędzie Google Zmienne Czcionki może też wyświetlić najnowsze adresy URL dla pełnych zmiennych czcionek.
Dziedziczenie ustawień odmian czcionki
Wszystkie zarejestrowane osie będą wkrótce obsługiwane przez istniejące właściwości CSS, ale na razie może być potrzebne użycie w zastępstwie zasady font-variation-settings. Jeśli czcionka ma niestandardowe osie, potrzebny będzie także font-variation-settings.
Jednak font-variation-settings ma inne problemy. Każda usługa, której nie ustawisz, zostanie automatycznie przywrócona do wartości domyślnej.
Wcześniej ustawione wartości nie są dziedziczone. Oznacza to, że te funkcje nie będą działać zgodnie z oczekiwaniami:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
Najpierw przeglądarka zastosuje font-variation-settings: 'slnt' 10 z klasy .slanted. Następnie zostanie zastosowany font-variation-settings: 'GRAD' -200 z klasy .grade-light. Spowoduje to jednak przywrócenie slnt do wartości domyślnej. Efektem będzie lekki tekst, ale bez pochylenia.
Na szczęście można to obejść, korzystając ze zmiennych 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);
}
Zmienne CSS są kaskadowe, więc jeśli element (lub jeden z jego elementów nadrzędnych) ustawił slnt na 10, zachowa tę wartość, nawet jeśli ustawisz GRAD na coś innego. Dokładne omówienie tej metody znajdziesz w sekcji Naprawianie dziedziczenia zmiennych dziedziczenia czcionek.
Pamiętaj, że animowanie zmiennych CSS nie działa (z założenia projektu), więc coś w tym stylu nie działa:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Animacje będą musiały wyświetlać się bezpośrednio na urządzeniu font-variation-settings.
Wzrost skuteczności
Czcionki ze zmiennymi OpenType umożliwiają przechowywanie wielu odmian danej rodziny w jednym pliku czcionek. Typ Monotype przeprowadził eksperyment, łącząc 12 czcionek wejściowych w celu wygenerowania 8 wag (przy 3 szerokościach) zarówno kursywy, jak i stylu rzymskiego. Przechowywanie 48 pojedynczych czcionek w jednym pliku czcionek pozwoliło zmniejszyć rozmiar pliku o 88%.
Jeśli jednak korzystasz z pojedynczej czcionki, np. Roboto Regular, i z innych opcji, po przejściu na czcionkę ze zmienną z wieloma osiami możesz nie zauważyć wyraźnego wzrostu rozmiaru czcionki. To zależy od konkretnego przypadku użycia.
Z drugiej strony animowanie czcionki między ustawieniami może powodować problemy z wydajnością. Chociaż poprawi się to, gdy obsługa zmiennych czcionek
w przeglądarkach stanie się bardziej dopracowana, problem można trochę ograniczyć, animując tylko czcionki aktualnie widoczne na ekranie. Ten przydatny fragment kodu autorstwa Dinamo wstrzymuje animacje w elementach z klasą vf-animation, gdy nie znajduje się na ekranie:
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); });
Jeśli czcionka reaguje na interakcje użytkownika, warto ograniczać lub wyciszać zdarzenia wejściowe. Zapobiega to renderowaniu przez przeglądarkę instancji czcionki zmiennej, która różniła się tak bardzo od poprzedniego wystąpienia, że ludzkie oko nie zauważy różnicy.
Jeśli używasz Google Fonts, warto wstępnie połączyć z https://fonts.gstatic.com – domeną, w której hostowane są czcionki Google. Dzięki temu przeglądarka będzie wiedzieć, gdzie pobrać czcionki, gdy znajdzie je w CSS:
<link rel="preconnect" href="https://fonts.gstatic.com" />
Ta wskazówka działa również w przypadku innych sieci CDN: im szybciej pozwolisz przeglądarce skonfigurować połączenie sieciowe, tym szybciej będzie mogła pobrać Twoje czcionki.
Więcej wskazówek dotyczących ładowania czcionek Google Fonts znajdziesz w sekcji Najszybsze czcionki Google.
Wartości zastępcze i obsługa przeglądarek
Wszystkie nowoczesne przeglądarki obsługują zmienne czcionki. Jeśli chcesz obsługiwać starsze przeglądarki, możesz utworzyć witrynę za pomocą statycznych czcionek, a ulepszenie progresywnie – używać czcionek zmiennych zmiennych:
/* 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;
}
}
W starszych przeglądarkach tekst z klasą .super-bold będzie renderowany przy użyciu zwykłego pogrubienia, ponieważ jest to jedyna dostępna czcionka pogrubiona. Gdy obsługiwane są czcionki zmienne, możemy użyć największej wagi, która wynosi 1000.
Reguła @supports nie jest obsługiwana przez Internet Explorera, więc ta przeglądarka nie wyświetli żadnych stylów. Jeśli to stanowi problem, zawsze możesz użyć jednego z starszych sposobów, aby ustawić kierowanie na odpowiednie starsze przeglądarki.
Jeśli korzystasz z interfejsu Google Fonts API, zadba on o wczytywanie czcionek odpowiednich dla przeglądarek użytkowników. Załóżmy, że prosisz o czcionkę Oswald o wadze od 200 do 700:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
Nowoczesne przeglądarki, które obsługują zmienne czcionki, otrzymają zmienną czcionkę. Każda waga będzie miała wartość od 200 do 700 znaków. Starsze przeglądarki otrzymują osobne czcionki statyczne dla każdej wagi. W tym przypadku oznacza to, że pobierze 6 plików czcionek: jeden dla wagi 200, drugi dla wagi 300 itd.
Dziękujemy
Stworzenie tego artykułu było możliwe tylko dzięki pomocy następujących osób:
- Mustafa Kurtuldu, projektantka UX i przedstawicielka ds. projektowania w Google
- Roel Nieskens, projektant/programistka UX i specjalistka typografii w Kabisa
- Dave Crossland, menedżer programu, Google Fonts
- David Berlow, projektant czcionek i typograf w firmie Font Bureau
- Laurence Penney, deweloperka axis-praxis.org
- Mandy Michael, programista witryny variablefonts.dev
Baner powitalny od Bruno Martinsa w serwisie Unsplash.