nowa specyfikacja czcionek, która może znacznie zmniejszyć rozmiary plików czcionek;
Z tego artykułu dowiesz się, czym są zmienne fonty, jakie mają zalety i jak można 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 w większości przeglądarek. Zobacz Czy mogę używać czcionek zmiennych? i Czcionki zastępcze.
Wprowadzenie
Deweloperzy często używają zamiennie terminów „czcionka” i „krój”. 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, które często jest pomijane, jest rozróżnienie stylu od rodziny. 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 dla projektanta i programisty
Gdy projektant tworzy projekt do druku, musi wziąć pod uwagę pewne ograniczenia, takie jak fizyczny rozmiar układu strony czy liczba kolorów, których może użyć (określana przez rodzaj używanej maszyny drukarskiej). Mogą jednak używać dowolnej liczby stylów czcionek. 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ło to problemem w przypadku bardziej zaawansowanych układów typograficznych, ponieważ wiążą się one z kosztami. 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. To wszystko jeszcze przed zaznajomieniem się z renderowaniem czcionek, wzorami zastępczymi, których trzeba używać, czy niepożądanymi efektami ubocznymi, takimi jak FOIT i FOUT.
Wiele rodzin czcionek oferuje znacznie szerszy zakres stylów, od cienkich do grubych czcionek, wąskich i szerokich szerokości, różnych szczegółów stylistycznych, a nawet wzorów dostosowanych do rozmiaru tekstu (zoptymalizowanych pod kątem dużych lub małych rozmiarów tekstu). Ponieważ trzeba wczytywać nowy plik czcionki dla każdego stylu (lub kombinacji stylów), wielu deweloperów stron internetowych decyduje się nie korzystać z tych możliwości, co pogarsza komfort czytania 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. Jest ono następnie połączone z innymi stylami w ciągłym zakresie, zwanym „osią”. Najczęściej używaną osią jest Waga, która może łączyć styl domyślny ze stylem pogrubionym. Każdy pojedynczy styl może być umieszczony wzdłuż osi i nazywany „wystąpieniem” zmiennej czcionki. Niektóre instancje są nazywane przez twórcę czcionki, np. opcja osi Weight o wartości 600 jest nazywana 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ść: czcionka Regular znajduje się na środku osi, a 2 style węższe i szersze znajdują się na jej końcach. Te wartości określają wszystkie szerokości stylu Regular. Po połączeniu z osią Waga określają 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 między nimi przeprowadzić interpolację, a oś Slant służy do przekształcania czcionek z pochylenia prostego na kursywę.
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 kursywę osie dostępne dla użytkownika powinny być takie same jak w przypadku czcionki rzymskiej, podobnie 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 określa projektant czcionki, może nastąpić zamiana jednego glifu na inny wzdłuż osi Optical Size.
Podsumowując, w przypadku, gdy kontury na to pozwalają, projektanci czcionek mogą tworzyć czcionki, które interpolują różne style 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 tego czcionka może zawierać własne osie. Mogą one kontrolować dowolny aspekt projektu czcionki, na przykład rozmiar szeryfów, długość ozdobników, wysokość wydłużonych elementów lub rozmiar kropki w literze 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 „hairline” o wartości 1, który sięga aż do 900.
5 zarejestrowanych osi ma 4-znakowe tagi w małej literze, które służą do ustawiania ich wartości w CSS:
| Nazwy osi i wartości w CSS | |
|---|---|
| Waga |
wght
|
| Szerokość |
wdth
|
| Spojrzenie z ukosa |
slnt
|
| Rozmiar optyczny |
opsz
|
| Kursywa |
ital
|
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 te powinny być podane w dokumentacji czcionki. Możesz też sprawdzić czcionkę za pomocą narzędzia takiego jak Wakamai Fondue.
Zastosowania i korzyści
Ustawianie wartości osi zależy od osobistych upodobań i stosowania sprawdzonych metod typograficznych. Niebezpieczeństwo związane z każdą nową technologią to możliwość jej niewłaściwego użycia. Ustawienia zbytnio artystyczne lub eksperymentalne mogą też zmniejszyć czytelność 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.
Wyrażenie ekscytacji
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 do niego znajdziesz tutaj.
Animacja
Możesz też spróbować animacji znaków za pomocą czcionek zmiennych. Powyżej przedstawiono przykład różnych osi używanych z czcionką 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 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, białe lub ujemne kształty oraz wymiary x i y. Podobnie jak kolory podstawowe można mieszać z dowolnym innym kolorem, aby go dostosować, te 4 aspekty można wykorzystać do doprecyzowania 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
Wczytywanie plików czcionek zmiennych
Czcionki zmienne są wczytywane za pomocą tego samego mechanizmu @font-face co tradycyjne 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 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 zmienne fonty i bieżącą składnię, użyje drugiej deklaracji. Oba wskazują na ten sam plik czcionki.
2. Zakresy stylów: jak widać, podajemy 2 wartości dla font-weight i font-stretch. Zamiast informować przeglądarkę, jaką konkretną wagę ma ta czcionka (np. font-weight: 500;), podajemy teraz zakres wag obsługiwanych przez czcionkę. W przypadku czcionki Roboto Flex zakres osi Weight (Waga) wynosi od 100 do 1000, a kod 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 korzystasz z interfejsu Google Fonts API, nie musisz się tym martwić. 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 z usługi porównywania cen można wiarygodnie ustawić tylko oś wght–font-weight oraz oś wdth–font-stretch.
Tradycyjnie parametr font-weight ustawia się jako słowo kluczowe (light, bold) lub jako 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 włącz/wyłącz: wartość 0 jest wyłączona i będzie wyświetlać styl zwykły, a wartość 1 będzie wyświetlać kursywę. W przeciwieństwie do innych osi nie ma tu 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 ukośny styl. 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 należy traktować je jako osie niestandardowe i ustawiać je za pomocą elementu 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
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łego rozmiaru lepiej jest pominąć drobne szczegóły, natomiast w przypadku dużego rozmiaru 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 jest ona ustawiona na auto, co powoduje, że przeglądarka ustawia wartość osi na podstawie font-size. Oznacza to, że przeglądarka automatycznie wybierze najlepszy rozmiar optyczny. Jeśli chcesz to wyłączyć, możesz ustawić wartość font-optical-sizing na none.
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ące właściwości CSS, więc zawsze musisz je ustawiać za pomocą 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 udziałem font-variation-settings:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Czcionki zmienne w Google Fonts
Serwis Czcionki Google 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 on 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 wszystkie osie i wartości.
Najnowsze adresy URL pełnych czcionek zmiennych znajdziesz też w narzędziu Linki do czcionek zmiennych Google.
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.
Oto jednak mały problem z 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 będą działać kaskadowo, więc jeśli element (lub jeden z jego nadrzędnych) ma ustawioną wartość slnt na 10, będzie ona zachowana, nawet jeśli ustawisz wartość GRAD na inną. Szczegółowe informacje o tej metodzie znajdziesz w artykule Rozwiązywanie problemów z dziedziczeniem czcionek zmiennych.
Pamiętaj, że animacja zmiennych CSS nie działa (z powodu specyfikacji), więc takie rozwiązanie nie działa:
@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 zmienne OpenType umożliwiają przechowywanie wielu odmian rodziny czcionek w pojedynczym pliku czcionki. Firma Monotype przeprowadziła eksperyment, łącząc 12 czcionek wejściowych, aby wygenerować 8 grubości w 3 szerokościach w stylach kursywym i prostokątnym. Przechowywanie 48 pojedynczych czcionek w pojedynczym pliku czcionki zmiennej oznacza 88% obniżenie rozmiaru pliku.
Jeśli jednak używasz tylko jednej czcionki, np. Roboto Regular, i nic więcej, to po przejściu na czcionkę zmienną z wielu osi możesz nie zauważyć netto wzrostu rozmiaru czcionki. Jak zawsze, wszystko zależy od przypadku użycia.
Z drugiej strony animacja czcionki między ustawieniami może powodować problemy ze skutecznością. Chociaż sytuacja ulegnie poprawie, gdy obsługa czcionek zmiennych w przeglądarkach stanie się bardziej dopracowana, problem można w pewnym stopniu ograniczyć, animując tylko czcionki, które są aktualnie widoczne na ekranie. Ten przydatny fragment kodu autorstwa 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.
Zastępcze rozwiązania i obsługa 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ć najgrubszej czcionki o wartoś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ą czcionki zmienne, będą wyświetlać czcionki zmienne, a w ich przypadku będzie dostępna każda waga w zakresie od 200 do 700. 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ł powstał dzięki pomocy tych osób:
- Mustafa Kurtuldu, projektant UX i orędownik designu w Google
- Roel Nieskens, projektant/programista UX i ekspert ds. typografii w firmie 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.