Wprowadzenie do zmiennych czcionek w internecie

nowa specyfikacja czcionek, która może znacznie zmniejszyć rozmiary plików czcionek;

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

Z tego artykułu dowiesz się, czym są zmienne fonty, jakie mają zalety i jak możesz ich używać w swojej pracy. Najpierw przyjrzyjmy się, jak działa typografia w internecie i jakie innowacje wnoszą czcionki zmienne.

Zgodność z przeglądarką

Od maja 2020 r. czcionki zmienne są obsługiwane przez większość przeglądarek. Zobacz Czy mogę używać czcionek zmiennych? i Czcionki zastępcze.

Wprowadzenie

Deweloperzy często używają zamiennie terminów „czcionka” i „font”. Istnieje jednak różnica: krój pisma to podstawowa kompozycja wizualna, która może występować w wielu różnych technologiach składu, a czcionka to jedna z tych implementacji w formacie cyfrowego pliku. Inaczej mówiąc, krój to to, co widzisz, a czcionka to to, czego używasz.

Innym pojęciem, o którym często zapominamy, jest rozróżnienie między stylem a rodziną. Styl to pojedyncza, konkretna czcionka, np. pogrubiona kursywa, a rodzina to kompletny zestaw stylów.

Przed czcionkami zmiennymi każdy styl był implementowany jako osobny plik czcionki. Dzięki czcionkom zmiennym wszystkie style mogą być zawarte w jednym pliku.

Wyzwania stojące przed projektantem i deweloperem

Gdy projektant tworzy projekt druku, napotyka pewne ograniczenia, takie jak fizyczny rozmiar układu strony czy liczbę kolorów, których może użyć (zależy to od rodzaju maszyny, która zostanie użyta). Mogą jednak używać dowolnej liczby krojów krojów pisma. Oznacza to, że typografia w mediach drukowanych jest często bogata i wyrafinowana, dzięki czemu czytanie jest naprawdę przyjemne. Przypomnij sobie, kiedy ostatnio przeglądałeś/przeglądałaś świetny magazyn.

Projektanci i programiści stron internetowych mają inne ograniczenia niż projektanci pracujący w branży wydawniczej. Jednym z ważnych ograniczeń są koszty przepustowości związane z naszym projektem. Był to punkt przestojowy w przypadku korzystania z bogatszych doświadczeń typograficznych, ponieważ są płatne. W przypadku tradycyjnych czcionek internetowych każdy styl użyty w naszych projektach wymaga od użytkowników pobrania osobnego pliku czcionki, co zwiększa opóźnienie i czas renderowania strony. Uwzględniając tylko czcionki w stylu zwykłym i pogrubionym oraz ich kursywę, można uzyskać ponad 500 KB danych czcionki. Mamy to jeszcze, zanim omówiliśmy sposób renderowania czcionek, wzorce działań zastępczych, których potrzebujemy, i niepożądane efekty uboczne, takie jak FOIT czy FOUT.

Wiele rodzin czcionek oferuje znacznie szerszy zakres stylów, od cienkich po czarnych, wąskie i szerokie szerokości, różne detale stylistyczne, a nawet projekty dostosowane do rozmiaru (zoptymalizowane pod kątem dużego i niewielkiego tekstu). Ponieważ dla każdego stylu (lub kombinacji stylów) trzeba by wczytać nowy plik czcionek, wielu programistów stron internetowych nie korzysta z tych funkcji, co zmniejsza wygodę czytania przez użytkowników.

Budowa czcionki zmiennej

Aby rozwiązać te problemy, czcionki zmienne pakują style do pojedynczego pliku.

Polega to na wybraniu stylu centralnego lub domyślnego, zwykle czcionki „Regular” – pionowej czcionki rzymskiej o typowej szerokości i grubości, która najlepiej nadaje się do zwykłego tekstu. Ten element jest następnie połączony z innymi stylami w ciągłym zakresie nazywanym „osią”. Najpopularniejsza oś to Waga, która łączy styl domyślny ze stylem pogrubionym. Każdy pojedynczy styl może znajdować się wzdłuż osi i nazywa się „wystąpieniem” zmiennej czcionki. Niektóre instancje są nazywane przez twórcę czcionki, np. opcja osi Weight o wartości 600 nosi nazwę SemiBold.

Czcionka zmienna Roboto Flex ma 3 style na osi Grubość. Styl Regularny znajduje się na środku, a na przeciwległych końcach osi znajdują się 2 inne style: jeden lżejszy, a drugi cięższy. Do wyboru jest 900 instancji:

Twórca czcionki może zaoferować zestaw różnych osi. Możesz je łączyć, ponieważ wszystkie mają te same domyślne style. Roboto ma 3 style na osi szerokości: regularny znajduje się pośrodku osi, a na każdym jej końcu znajdują się dwa style, węższe i szersze. Zawierają one wszystkie szerokości stylu Regular. Po połączeniu z osią Waga uzyskujemy wszystkie szerokości dla każdej wagi.

Oznacza to, że są tysiące stylów. Może się to wydawać przesadą, ale różnorodność stylów czcionek może znacznie poprawić jakość czytania. Jeśli nie powoduje to spadku wydajności, deweloperzy mogą używać dowolnej liczby stylów – to od nich zależy, ile ich będzie.

Kursywa

Sposób obsługi kursywy w czcionkach zmiennych jest interesujący, ponieważ istnieją dwa różne podejścia. Czcionki takie jak Helvetica czy Roboto mają kontury zgodne z interpolacją, więc można je stosować do interpolowania między stylem rzymskim a kursywą, a oś Slant służy do przekształcania czcionek z rzymskiej w kursywę i odwrotnie.

Inne kroje pisma (np. Garamond, Baskerville czy Bodoni) mają kontury glifów w wersji zwykłej i kursywie, które nie są zgodne z interpolacją. Na przykład kontury, które zwykle definiują małą literę „n” w alfabecie łacińskim, nie pasują do kontur używanych do definiowania małej litery „n” w kursywie. Zamiast interpolowania jednego konturu do drugiego oś Kursywy przełącza się z konturów rzymskich na kursywy.

Po przejściu na czcionkę kursywę osie dostępne dla użytkownika powinny być takie same jak w przypadku czcionki rzymskiej, tak samo jak zestaw znaków.

Możliwość zastępowania znaków jest też dostępna w przypadku poszczególnych znaków i może być używana w dowolnym miejscu w przestrzeni projektowej czcionki zmiennej. Na przykład znak dolara z 2 pionowymi prętami sprawdza się najlepiej w przypadku większych rozmiarów czcionki, ale w przypadku mniejszych rozmiarów lepiej sprawdza się znak z jedną prętą. Gdy mamy mniej pikseli do wyrenderowania glifów, dwupasmowy układ może stać się nieczytelny. Aby temu zapobiec, podobnie jak w przypadku osi kursywy, w miejscu, które zostało określone przez projektanta czcionek, może nastąpić zamiana jednego glifu na inny wzdłuż osi Optical Size.

Podsumowując, jeśli pozwalają na to kontury, projektanci typów mogą tworzyć czcionki interpolujące między różnymi stylami w wielowymiarowej przestrzeni projektowej. Dzięki temu możesz precyzyjnie kontrolować typografię i zyskać dużą swobodę.

Definicje osi

Jest 5 zarejestrowanych osi, które kontrolują znane, przewidywalne właściwości czcionki: grubość, szerokość, rozmiar optyczny, nachylenie i kursywa. Oprócz nich czcionka może zawierać niestandardowe osie. Mogą one kontrolować dowolny aspekt projektu czcionki, na którym zależy projektantowi czcionki: rozmiar szeryfów, długość kresek ozdobnych, wysokość wydłużonych osikowych lub rozmiar kropki na i.

Chociaż osie mogą kontrolować tę samą funkcję, mogą używać różnych wartości. Na przykład w fontach zmiennych Oswald i Hepta Slab jest dostępna tylko 1 oś – „Weight”, ale zakresy są różne. W fontach Oswald zakres jest taki sam jak przed przekształceniem w font zmienny, czyli od 200 do 700, ale w fontach Hepta Slab jest ekstremalnie cienki 1 i rozpięty od 1 do 900.

5 zarejestrowanych osi ma 4-znakowe tagi w małej literze, które służą do ustawiania ich wartości w CSS:

Deweloper czcionki określa, które osie są dostępne w czcionce zmiennej i jakie wartości mogą przyjmować, dlatego warto dowiedzieć się, co oferuje każda czcionka. Informacje na ten temat można znaleźć w dokumentacji czcionki. Można też sprawdzić czcionkę w takim narzędziu jak Wakamai Fondue.

Przypadki użycia i korzyści

Ustawianie wartości osi zależy od osobistych upodobań i stosowania sprawdzonych metod typograficznych. Niebezpieczeństwo, jakie wiążą się z każdą nową technologią, to możliwe niewłaściwe użycie, a ustawienia o zbyt artystycznym lub eksploracyjnym charakterze mogą również zmniejszyć czytelność rzeczywistego tekstu. W przypadku tytułów warto eksperymentować z różnymi ośmi, aby tworzyć ciekawe projekty artystyczne, ale w przypadku tekstu w ciele strony może to spowodować, że tekst będzie niewyraźny.

Ekscytujący wyraz twarzy

Przykładem takiego wyrazu artystycznego jest pokazana powyżej eksploracja kroju pisma Decovar autorstwa Mandy Michael.

Działający przykład i kod źródłowy powyższego przykładowego przykładu znajdziesz tutaj.

Animacja

Możesz też spróbować animacji znaków za pomocą czcionek zmiennych. Powyżej przedstawiono przykłady różnych osi używanych w kroju Zycon. Zobacz przykład animacji na żywo w Axis Praxis.

Anicons to pierwsza na świecie animowana czcionka z kolorowymi ikonami, oparta na ikonach Material Design. Anicons to eksperyment, który łączy 2 najnowocześniejsze technologie czcionek: czcionki zmienne i czcionki kolorowe.

Finesse

Roboto Flex i Amstelvar oferują zestaw „osi parametrycznych”. Na tych osiach litery są rozkładane na 4 podstawowe aspekty formy: kształty czarne lub dodatnie, kształty białe i ujemne oraz wymiary x i y. Tak samo jak kolory podstawowe można wplątać w dowolny inny kolor w celu dostosowania, te 4 aspekty można wykorzystać do dostrajania dowolnej innej osi.

Osie XTRA w programie Amstelvar umożliwia dostosowanie wartości „białych” na tysiąc Używając małych fragmentów XTRA w przeciwnych kierunkach, wyrównujemy szerokość słów.

Czcionki zmienne w CSS

Ładowanie plików czcionek ze zmiennymi

Czcionki zmiennych są wczytywane przez ten sam mechanizm @font-face co tradycyjne statyczne czcionki internetowe, ale mają 2 nowe ulepszenia:

@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 czcionki, jeśli nie obsługuje czcionek zmiennych, dlatego dodajemy opisy format i tech: raz w ramach przyszłej składni (format('woff2') tech('variations')), a raz w ramach przestarzałej, ale obsługiwanej przez przeglądarki składni (format('woff2-variations')). Jeśli przeglądarka obsługuje czcionki zmienne i obsługuje przyszłą składnię, użyje pierwszej deklaracji. Jeśli obsługuje czcionki zmiennych i bieżącą składnię, użyje drugiej deklaracji. Oba wskazują ten sam plik czcionki.

2. Zakresy stylów: jak widać, są dostępne dwie wartości dla font-weight i font-stretch. Zamiast informować przeglądarkę o tym, jaką wagę ma ta czcionka (np. font-weight: 500;), teraz przypisujemy jej zakres wag obsługiwanych przez czcionkę. W przypadku czcionki Roboto Flex zakres osi Weight (Waga) wynosi od 100 do 1000, a CSS bezpośrednio mapuje zakres osi na właściwość stylu font-weight. Jeśli określisz zakres w parametrye @font-face, każda wartość spoza tego zakresu zostanie „ograniczona” do najbliższej prawidłowej wartości. Zakres osi Szerokość jest mapowany w taki sam sposób jak w przypadku właściwości font-stretch.

Jeśli używasz interfejsu Google Fonts API, wszystkie te działania zostaną uwzględnione. Plik CSS będzie zawierać odpowiednie formaty i zakresy źródeł, a Google Fonts wyśle też czcionki statyczne na wypadek, gdyby czcionki zmienne nie były obsługiwane.

Używanie wag i szerokości

Obecnie osie, które można ustawić w CSS, to od osi wght do font-weight i osi wdth do font-stretch.

Tradycyjnie parametr font-weight ustawia się jako słowo kluczowe (light, bold) lub wartość liczbową z zakresu 100–900 z co 100. W przypadku czcionek zmiennych możesz ustawić dowolną wartość w zakresie szerokości czcionki:

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

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

Podobnie możemy ustawić parametr 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%;
}

Używanie kursywy i pionowych kresek

Oś ital jest przeznaczona do czcionek, które zawierają zarówno zwykły styl, jak i kursywę. Oś ma być przełącznikiem do włączania i wyłączania: wartość 0 jest wyłączona i przedstawia styl zwykły, a wartość 1 – kursywa. W przeciwieństwie do innych osi nie ma przejścia. Wartość 0.5 nie spowoduje zastosowania „półkursywy”.

Oś slnt różni się od kursywy tym, że nie jest to nowy styl, ale tylko powoduje nachylenie zwykłego stylu. Domyślna wartość to 0, czyli domyślne pionowe kształty liter. Roboto Flex ma maksymalne nachylenie –10 stopni, co oznacza, że litery będą nachylone w prawo, gdy przejdziesz od 0 do –10.

Ustawienie tych osi za pomocą właściwości font-style byłoby intuicyjne, ale w kwietniu 2020 r. nadal pracujemy nad tym, jak to zrobić. Na razie potraktuj je jak osie niestandardowe i ustaw je za pomocą 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;
}

Korzystanie z rozmiarów optycznych

Czcionka może być bardzo mała (stopka o wysokości 12 pikseli) lub bardzo duża (nagłówek o wysokości 80 pikseli). Czcionki mogą reagować na te zmiany rozmiaru przez zmianę kształtu liter, aby lepiej dopasować je do rozmiaru. W przypadku małych rozmiarów lepiej jest pominąć drobne szczegóły, natomiast w przypadku dużych rozmiarów warto dodać więcej szczegółów i cieńsze linie.

Wprowadziliśmy nową właściwość CSS dla tej osi: font-optical-sizing. Domyślnie ustawiona jest wartość auto, co oznacza, ż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ę, ustaw wartość none na font-optical-sizing.

Jeśli chcesz, aby rozmiar optyczny nie odpowiadał rozmiarowi czcionki, możesz też ustawić niestandardową wartość dla osi opsz. Ten kod CSS spowoduje, że tekst będzie wyświetlany w dużym rozmiarze, ale w rozmiarze optycznym, jak gdyby był wydrukowany w układzie 8pt:

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

Korzystanie z osi niestandardowych

W przeciwieństwie do zarejestrowanych osi niestandardowe osie nie będą mapowane na istniejącą właściwość CSS, więc zawsze trzeba je ustawiać za pomocą parametru font-variation-settings. Tagi osi niestandardowych są zawsze pisane wielkimi literami, aby odróżnić je od zarejestrowanych osi.

Roboto Flex oferuje kilka osi niestandardowych, z których najważniejsza to Grade (GRAD). Oś Grade jest interesująca, ponieważ zmienia grubość czcionki bez zmiany szerokości, dzięki czemu nie zmienia się podział na wiersze. Dzięki zastosowaniu osi oceny możesz uniknąć konieczności wprowadzania zmian w osi Waga, która wpływa na ogólną szerokość, a potem w osi Szerokość, która wpływa na ogólną wagę.

Funkcja GRAD to niestandardowa oś o zakresie od –200 do 150 w Roboto Flex. Musimy rozwiązać ten problem z 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

Serwis Google Fonts rozszerzył swój katalog o czcionki zmienne i regularnie dodaje nowe. Interfejs jest obecnie przeznaczony do wybierania pojedynczych wystąpień czcionki: wybierasz odpowiednią odmianę, klikasz „Wybierz ten styl”, a wybrany styl zostanie dodany do elementu <link>, który pobiera CSS i czcionki z Google Fonts.

Aby używać wszystkich dostępnych osi lub zakresów wartości, musisz ręcznie stworzyć adres URL interfejsu Google Fonts API. Przegląd czcionek zmiennych zawiera listę wszystkich osi i wartości.

Narzędzie Linki czcionek zmiennych Google może też podać najnowsze adresy URL dla czcionek pełnych zmiennych.

Dziedziczenie ustawień czcionki

Wszystkie zarejestrowane osie będą wkrótce obsługiwane za pomocą istniejących właściwości CSS, ale na razie może być konieczne użycie wartości font-variation-settings jako zastępczej. Jeśli czcionka ma własne osie, musisz też użyć font-variation-settings.

Jest jednak garść ciekawostek na temat font-variation-settings. Wszystkie właściwości, które nie zostały jawnie ustawione, zostaną automatycznie zresetowane do wartości domyślnych. Wartości ustawione wcześniej 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 zastosuje font-variation-settings: 'GRAD' -200 z klasy .grade-light. Spowoduje to jednak zresetowanie wartości slnt do domyślnej wartości 0. W efekcie tekst będzie miał jasny kolor, ale nie będzie nachylony.

Na szczęście możemy obejść ten problem, używając 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 działają kaskadowo, więc jeśli element (lub jeden z jego elementów nadrzędnych) ustawi parametr slnt na 10, zachowa on tę wartość, nawet jeśli ustawisz GRAD na coś innego. Dokładne omówienie tej metody znajdziesz w artykule Naprawianie dziedziczenia czcionek ze zmiennymi czcionkami.

Animacja zmiennych CSS nie działa (z założenia), więc nie działa np. ten kod:

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

Te animacje będą musiały się odbywać bezpośrednio w font-variation-settings.

Zwiększenie wydajności

Czcionki OpenType pozwalają nam przechowywać wiele odmian rodziny typów w jednym pliku czcionek. Firma Monotype przeprowadziła eksperyment, łącząc 12 czcionek wejściowych, aby wygenerować 8 grubości w 3 szerokościach w stylach kursywy i zwykłym. Przechowywanie 48 pojedynczych czcionek w pliku z jedną zmienną oznacza zmniejszenie rozmiaru pliku o 88%.

Jeśli jednak korzystasz z pojedynczej czcionki, takiej jak Roboto Regular, i nic innego, możesz nie zauważyć wzrostu rozmiaru czcionki w przypadku zmiany czcionki na zmienną z wieloma osiami. Jak zawsze, wszystko zależy od przypadku użycia.

Z drugiej strony animacja czcionki między ustawieniami może powodować problemy ze skutecznością. Poprawi się to, gdy obsługa czcionek zmiennych w przeglądarkach stanie się bardziej dopracowana, jednak problem można ograniczyć, animując tylko czcionki widoczne na ekranie. Ten przydatny fragment kodu firmy Dinamo wstrzymuje animacje w elementach z klasą vf-animation, gdy nie są one widoczne 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 ograniczyć lub debounceować zdarzenia wejściowe. Zapobiegnie to renderowaniu przez przeglądarkę wystąpień zmiennego czcionki, które różnią się tak nieznacznie od poprzedniego wystąpienia, że ludzkie oko nie zauważy różnicy.

Jeśli używasz Google Fonts, warto wstępnie połączyć się z domeną https://fonts.gstatic.com, w której hostowane są czcionki Google. Dzięki temu przeglądarka będzie wiedzieć, skąd pobrać czcionki, gdy napotka je w pliku CSS:

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

Ta wskazówka działa również w przypadku innych usług CDN: im szybciej pozwolisz przeglądarce skonfigurować połączenie z siecią, tym szybciej będzie mogła pobrać czcionki.

Więcej wskazówek dotyczących wczytywania czcionek Google znajdziesz w artykule Najszybsze czcionki Google.

Obsługa zastępcza i przeglądarek

Wszystkie nowoczesne przeglądarki obsługują zmienne fonty. Jeśli musisz obsługiwać starsze przeglądarki, możesz utworzyć witrynę z czcionkami statycznymi i użyć czcionek zmiennych jako ulepszenia progresywnego:

/* 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 w normalnej czcionce pogrubionej, ponieważ jest to jedyna dostępna czcionka pogrubiona. Jeśli czcionki zmienne są obsługiwane, możemy użyć grubości 1000.

Reguła @supports nie jest obsługiwana przez Internet Explorera, więc ta przeglądarka nie będzie wyświetlać żadnego formatowania. Jeśli jest to problem, możesz użyć jednego z starych sposobów, aby kierować reklamy na starsze przeglądarki.

Jeśli używasz interfejsu Google Fonts API, to on zajmie się wczytaniem odpowiednich czcionek do przeglądarek użytkowników. Załóżmy, że żądasz czcionki Oswald o grubości w zakresie 200–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, korzystają z czcionek o zmiennej i małej dostępnych grubości. Starsze przeglądarki będą wyświetlać osobne czcionki statyczne dla każdej wagi. W tym przypadku oznacza to, że pobierzesz 6 plików czcionek: jeden dla grubości 200, jeden dla grubości 300 itd.

Dziękujemy

Ten artykuł zostałby możliwy tylko z pomocą następujących osób:

• Mustafa Kurtuldu, projektantka UX i przedstawicielka ds. projektowania w Google
• Roel Nieskens, projektant/programista UX i ekspert ds. typografii w Kabisa
• Dave Crossland, menedżer programu, Google Fonts
• David Berlow, projektant i konsultant typograficzny w Font Bureau
• Laurence Penney, programistka na stronie axis-praxis.org
• Mandy Michael, programistka, autorka variablefonts.dev

Baner powitalny autorstwa Bruno Martins z Unsplash.