Fonty variable bez zgadywania

Suwak to dopiero początek

Przesuwasz grubość z 400 na 560 i nagle nagłówek wygląda dokładnie tak, jak trzeba. Właśnie taki moment potrafi przekonać do fontów variable. Zamiast wybierać wyłącznie między kilkoma gotowymi odmianami, możesz pracować z wartościami mieszczącymi się w zakresie zapisanym w pliku.

Ta swoboda jest przydatna, ale nie musisz od razu używać dziesiątek ustawień. Font variable najlepiej traktować jako narzędzie do precyzyjnego wyboru, a nie zaproszenie do niekończącego się kręcenia suwakami. Najpierw ustal role tekstu. Potem dopasuj parametry tak, aby te role były czytelne. Strona nadal potrzebuje kilku dobrych decyzji, nawet jeśli plik pozwala podjąć ich znacznie więcej.

Punktem wyjścia jest profil rodziny i osie konkretnego pliku. Hasło font variable mówi o możliwościach formatu; o tym, które z nich wykorzystasz, decyduje zadanie projektu.

Źródło: MDN: Variable fonts ↗

Poznaj osie, które naprawdę są w pliku

Oś opisuje parametr, który projektant fontu udostępnił do zmiany. Wśród zarejestrowanych osi OpenType są wght dla grubości, wdth dla szerokości, opsz dla rozmiaru optycznego, slnt dla pochylenia i ital dla przejścia między odmianą prostą a kursywą. Rodzina może mieć tylko część z nich, a także osie niestandardowe.

Dlatego słowo „Variable” nie oznacza automatycznie regulacji wszystkiego. Obejrzyj informacje o konkretnym pliku i zakres każdej osi. Jeżeli dostępna jest tylko grubość, suwak szerokości niczego nie wyczaruje. W Fontsmate profil pokazuje zapisane osie, a podgląd pozwala regulować grubość w zakresie lokalnego pliku. Nie traktuj tej kontrolki jako edytora wszystkich możliwości OpenType.

Źródło: Microsoft: OpenType Design-Variation Axis Tag Registry ↗

Grubość dobieraj do roli, nie do okrągłej liczby

400, 500 i 700 są wygodnymi punktami orientacyjnymi. Nie muszą być jedynymi dobrymi ustawieniami. Jeśli plik ma odpowiednią oś, sprawdź wartości pośrednie. Nagłówek może wyglądać zbyt lekko przy 500 i zbyt ciężko przy 600, a przy 550 uzyskać potrzebny akcent. Patrz jednak na tekst w docelowym rozmiarze, a nie tylko na wielkie „Aa”.

Zachowaj umiar w gotowym systemie. Wybierz kilka ról i zapisz odpowiadające im wartości. Przypisywanie 537 do jednego przycisku, a 542 do sąsiedniego zwykle tworzy więcej pracy niż pożytku. Pamiętaj też, że ten sam numer w dwóch rodzinach nie daje identycznego wizualnego ciężaru. Para fontów potrzebuje oceny wzrokowej, nie samego porównania liczb.

Rozmiar optyczny nie jest drugim suwakiem rozmiaru

Oś opsz służy do dopasowania projektu liter do wielkości, przy której mają być oglądane. Jej efekt zależy od rodziny: mogą zmieniać się proporcje, szczegóły i odstępy. Nie zastępuje font-size. Możesz nadal mieć tekst o rozmiarze 18 px, ale z innym dopracowaniem kształtów dla tej wielkości.

CSS font-optical-sizing: auto pozwala przeglądarce korzystać z optycznego dopasowania, gdy font je obsługuje. Porównaj efekt na krótkim podpisie i dużym tytule. Jeśli nie widzisz różnicy, sprawdź najpierw dostępność osi. Nie dodawaj ustawienia „bo wszystkie nowoczesne strony tak robią”. Każdy parametr powinien mieć zauważalny sens w Twoim projekcie.

Więcej o rozmiarze optycznym znajdziesz w słowniku. Jego działanie oceniaj w połączeniu z rolami i skalą strony, szczególnie tam, gdzie mały podpis sąsiaduje z dużym tytułem.

Źródło: MDN: font-optical-sizing ↗

Zmienny plik nie daje darmowej wydajności

Jeden plik może zastąpić kilka odmian, ale samo słowo „variable” nie mówi, ile bajtów pobierze przeglądarka. Porównaj rzeczywisty zestaw potrzebny stronie. Jeżeli korzystasz tylko z jednej grubości, statyczny plik może być rozsądnym wyborem. Jeśli używasz wielu grubości z jednej rodziny, plik zmienny może uprościć dostarczanie fontów. Sprawdź oba warianty zamiast zakładać zwycięzcę.

Zapisz rozmiar pobieranych plików i obejrzyj stronę przy wolnym połączeniu. Czy tekst pojawia się szybko? Czy zmienia układ po wczytaniu? Czy pobierasz odmiany, których nigdzie nie ma? Usuń zbędne żądania przed dopieszczaniem drobnych różnic. Najmniejszy zestaw, który dobrze obsługuje projekt, jest często ciekawszy niż największa lista możliwości.

CSS powinien opisywać to, co plik potrafi

Deklarując zmienny font przez @font-face, podaj dostępny zakres grubości, zgodny z plikiem. Do zwykłej regulacji grubości używaj font-weight. Niskopoziomowe font-variation-settings przydaje się przy bardziej szczegółowym sterowaniu, ale nie musi być pierwszą odpowiedzią na każdą zmianę. Nie przepisuj przypadkowej listy osi z cudzego przykładu.

Sprawdź również, czy kursywa jest rzeczywiście dostępna. Samo wpisanie font-style: italic nie dodaje zaprojektowanej odmiany do pliku. Przeglądarka może syntetyzować styl, jeśli na to pozwolisz. W próbce porównuj dostępne odmiany świadomie. Dla fontu statycznego z jedną grubością Fontsmate pokazuje stałą wartość, zamiast udawać, że przesuwanie kontrolki odkrywa nowe rysunki liter.

Źródło: MDN: Variable fonts in CSS ↗ · MDN: font-synthesis ↗

Jedna rodzina, trzy role: przykład bez przypadkowych suwaków

Przyjmijmy plik z osią wght obejmującą zakres 100–900. Do próbki wybierz 400 dla akapitu, 550 dla etykiet i 700 dla nagłówka. Te wartości są przykładem ustawień, nie rankingiem ich jakości. Umieść trzy role na jednej karcie, dodaj długi tytuł i opis z linkiem. Oceń, czy różnica grubości pomaga zauważyć strukturę, zanim zaczniesz dodawać kolejne rozmiary.

Następnie przejdź do mniejszego widoku. Jeśli etykieta jest zbyt ciężka w drobnym rozmiarze, skoryguj przypisaną jej rolę i sprawdź ponownie pozostałe komponenty. Zapisz wybrane ustawienie w systemie styli. Nie zostawiaj decyzji jako pozycji suwaka na jednym ekranie: kolejna osoba powinna wiedzieć, do którego zadania należy ta wartość. Rodziny porównasz w porównywarce, a proporcje w narzędziu skali.

Nie przenoś liczb między rodzinami bez oglądania

Grubość 550 w jednej rodzinie może mieć inny charakter niż 550 w drugiej. Podczas wymiany fontu zachowaj nazwy ról, ale ponownie oceń ich wygląd. Tak samo sprawdź polskie znaki przy ustawieniach, które rzeczywiście trafią do projektu. Ciężki nagłówek i lekki podpis mogą ujawnić inne słabości tego samego akcentu.

Porównaj koszt wariantów na konkretnym ekranie

Najpierw wypisz odmiany, których naprawdę potrzebuje pierwszy widok. Potem porównaj sumę ich plików statycznych z plikiem variable przygotowanym dla tych samych języków i zastosowań. Jeżeli zestaw statyczny obejmuje tylko Regular i Bold, a zmienny zasób zawiera znacznie więcej danych, sam licznik żądań nie rozstrzyga wyniku. Różne formaty i zestawy znaków potrafią zdominować porównanie.

Sprawdź również kolejne wejście na stronę z pamięcią podręczną i pierwszy odczyt z pustą pamięcią. W obu przypadkach obejrzyj moment użycia fontu zastępczego: długość etykiet, pozycję przycisków i liczbę wierszy w tytule. Zamiast deklarować z góry, że jeden format jest szybszy, zachowaj pomiar konkretnych zasobów. Jeżeli przygotowujesz podzbiór, wróć też do zasad modyfikacji OFL.

Lista decyzji przed zapisaniem styli

W specyfikacji zachowaj obsługiwany zakres i wybrane wartości dla każdej roli. Zwykłą grubość opisuj właściwością font-weight; niskopoziomowe ustawienia osi zostaw do świadomie wybranych przypadków. Jeśli plik udostępnia opsz, sprawdź zachowanie font-optical-sizing i nie myl zmiany projektu liter ze zmianą font-size. Pełna deklaracja powinna odpowiadać realnym możliwościom zasobu.

Na koniec obejrzyj akapit, etykietę i tytuł na tym samym ekranie. Każda rola może wyglądać dobrze w izolacji, a zestaw nadal być zbyt ciężki albo monotonny. Wprowadź jedną korektę, zapisz jej powód i ponownie obejrzyj całość. Przy wdrożeniu typografii ważne są użyteczne, powtarzalne ustawienia, a nie maksymalne wykorzystanie wszystkich osi.

1. Zapisz osie i zakresy właściwe dla pliku.
2. Przypisz ustawienia do nazwanych ról.
3. Obejrzyj fallback, polskie znaki i małe rozmiary.
4. Przekaż źródło pliku wraz z dokumentacją styli.

Źródło: MDN: font-weight ↗ · MDN: font-optical-sizing ↗

Ćwiczenie: znajdź trzy użyteczne ustawienia

Wybierz zmienną rodzinę z katalogu i wpisz tytuł oraz dwa zdania własnego projektu. Znajdź ustawienie do spokojnego akapitu, mocniejszego śródtytułu i krótkiego akcentu. Zmieniaj tylko jeden parametr naraz, a potem sprawdź te same wartości przy mniejszym rozmiarze. Jeśli rozwiązanie działa wyłącznie w ogromnej próbce, jeszcze nie jest gotowe do roli tekstu użytkowego.

Zapisz trzy wyniki i zamknij suwak. To ważna część ćwiczenia. Elastyczny font ma pomóc podjąć decyzję, a nie odkładać ją bez końca. W gotowej stronie liczy się powtarzalny rytm, czytelność i charakter. Ułamkowo bardziej elegancka grubość nie pomoże, jeśli każdy fragment interfejsu mówi trochę innym głosem.