Dlaczego font wpływa na odbiór strony
Font internetowy jest zasobem, który przeglądarka musi pobrać, zanim wyświetli tekst w wybranym kroju. Jeśli strona używa kilku rodzin, grubości i odmian kursywy, liczba potrzebnych plików może szybko wzrosnąć. Ma to znaczenie zwłaszcza na podstronach, na których treść jest najważniejsza: w artykule, opisie produktu czy instrukcji. Odwiedzający powinien móc zacząć czytać, nawet gdy ozdobny krój jeszcze się ładuje.
Szybkość nie jest jednak jedynym kryterium. Gdy po pobraniu fontu tekst zmienia szerokość, nagłówek może przejść do kolejnej linii, a akapit przesunąć elementy poniżej. Z kolei zbyt cienki krój lub mały rozmiar utrudni czytanie mimo sprawnego wczytywania. Dlatego warto oceniać fonty razem z układem strony i komfortem korzystania z niej, a nie tylko przez rozmiar plików. Wyszukiwarki mogą uwzględniać różne sygnały dotyczące jakości strony, ale sama zmiana fontu nie gwarantuje poprawy widoczności.
Zacznij od ograniczenia liczby odmian
Najpierw zrób prosty spis krojów używanych na stronie. Zapisz osobno tekst główny, nagłówki, nawigację i przyciski, a przy każdym elemencie wskaż potrzebną grubość oraz kursywę. Często okazuje się, że kilka odmian zostało dodanych dla pojedynczych elementów. Jeśli projekt na to pozwala, jedna rodzina dla większości tekstu oraz dwie lub trzy rzeczywiście używane grubości będą łatwiejsze do utrzymania niż zestaw wielu podobnych plików.
Dla witryny z poradnikami zwykły tekst może korzystać z regularnej odmiany, a nagłówki z pogrubionej. Nie ma potrzeby pobierać kursywy, jeśli nigdzie nie występuje. Font zmienny bywa wygodnym rozwiązaniem, gdy projekt używa wielu grubości, lecz nie zakładaj, że zawsze będzie lżejszy od dwóch starannie dobranych plików. Porównaj rozmiary plików i sposób ich wykorzystania w konkretnej witrynie.
Wybieraj formaty obsługiwane przez przeglądarki Twoich użytkowników; w wielu typowych wdrożeniach praktycznym wyborem jest WOFF2. Jeśli używasz podziału na zestawy znaków, upewnij się, że polskie litery są dostępne w odpowiednich plikach. Brak ą, ć czy ł może powodować niejednolity wygląd wyrazów albo niepotrzebne pobieranie dodatkowego zasobu. Podział ma sens wtedy, gdy odpowiada faktycznej zawartości strony, nie tylko dlatego, że jest możliwy technicznie.
Pozwól czytać, zanim font się pobierze
W regule @font-face warto świadomie ustawić font-display. Wartość swap pozwala szybko pokazać tekst fontem zastępczym, a następnie podmienić go na docelowy krój. Zapobiega to czekaniu na niewidoczny tekst, ale podmiana może zmienić układ. Wartość optional ogranicza ryzyko późnej podmiany, lecz oznacza, że przy niektórych wizytach użytkownik zobaczy tylko font zastępczy. Wybór zależy od tego, czy ważniejsza jest pewność użycia kroju marki, czy stabilność tekstu podczas ładowania.
Dobierz font zastępczy o podobnych proporcjach i sprawdź go w rzeczywistych elementach strony. Zwróć uwagę na szerokość tytułów, wysokość akapitów, etykiety przycisków i menu mobilne. Gdy font docelowy ma inne metryki, można rozważyć właściwości CSS służące do dopasowania kroju zastępczego, takie jak size-adjust. Takie ustawienia wymagają jednak testów: źle dobrane wartości mogą pogorszyć czytelność zamiast poprawić stabilność.
Jeżeli ważny font jest potrzebny natychmiast na większości odsłon, można rozważyć jego wcześniejsze ładowanie. Nie dodawaj jednak preload do każdej odmiany. W ten sposób zasoby, które miały pomóc, mogą zacząć konkurować o pobieranie z obrazem lub arkuszem stylów. Przy fontach pobieranych z innego źródła dopilnuj też poprawnej konfiguracji udostępniania zasobów, aby przeglądarka mogła wykorzystać pobrany plik.
Sprawdź efekt na prawdziwych podstronach
Otwórz przykładowy artykuł, stronę kategorii i kartę produktu, jeśli występują w serwisie. Sprawdź je na wąskim ekranie oraz przy wolniejszym połączeniu ustawionym w narzędziach przeglądarki. Obserwuj, czy tekst pojawia się szybko, czy po chwili zmienia położenie oraz czy nagłówki i przyciski pozostają czytelne. W panelu sieciowym zobacz, ile plików fontów zostało pobranych i czy któraś odmiana nie jest używana tylko w jednym mało istotnym miejscu.
Przydatna kontrola po zmianach obejmuje kilka pytań: czy wszystkie polskie znaki wyglądają spójnie, czy po podmianie fontu elementy nie przesuwają się zauważalnie, czy tekst ma odpowiedni kontrast i odstępy oraz czy nie pobierasz nieużywanych odmian? Warto też porównać zachowanie strony przed zmianą i po niej, zamiast oceniać ją wyłącznie na podstawie pojedynczego wyniku testu. Metryki związane z wczytywaniem i stabilnością układu mogą pomóc wskazać problem, ale ostatecznym sprawdzianem pozostaje możliwość wygodnego przeczytania treści.
