Zamiast alfabetu pokaż dane, które naprawdę trafią na stronę
Projekt z krótkim hasłem może wyglądać poprawnie, dopóki redaktor nie wpisze nazwy „Przedsiębiorstwo Usługowo-Transportowe”. Podobnie próbka złożona z liter bez ogonków nie ujawni problemu z polskimi znakami. Przygotuj więc arkusz treści testowych: nazwę firmy, adres, kwotę z groszami, numer zamówienia, długi tytuł i zdanie z literami ąćęłńóśźż. Sprawdź zwykły tekst, pogrubienie i kursywę. Brak znaku tylko w jednej odmianie potrafi tworzyć wrażenie przypadkowej mieszanki krojów.
W przykładowym katalogu szkoleń warto użyć zarówno „BHP”, jak i „Obsługa urządzeń transportu bliskiego”. Nie skracaj drugiej nazwy wyłącznie po to, by zmieściła się w makiecie. To układ ma pomieścić informację. Osobno oceń rozróżnialność zera i litery O oraz cyfry jeden i małego l. Te drobiazgi mają znaczenie w numerach dokumentów i kodach, gdzie użytkownik musi coś przepisać, a nie tylko rozpoznać ogólny kształt wyrazu.
Zdefiniuj role tekstu, zanim wybierzesz wszystkie rozmiary
Zacznij od kilku ról: treść do spokojnego czytania, nagłówek, etykieta pola, dopisek i dane tabelaryczne. Każda wymaga innego sposobu sprawdzenia. Nagłówek powinien organizować materiał, natomiast opis błędu nie może zniknąć pod formularzem jako drobny szary druk. Zbuduj hierarchię głównie wielkością, odstępem i wagą. Gdy każdy element jest pogrubiony, znika możliwość wskazania tego, co w danym miejscu naprawdę ważne.
Dla długiego poradnika dobierz szerokość kolumny przez czytanie całych akapitów. Nie ma jednej liczby znaków w wierszu odpowiedniej dla każdego kroju i odbiorcy. Porównaj dwa warianty na własnym tekście, sprawdzając przejście wzroku do następnej linii. W panelu z kwotami możesz użyć cyfr o jednakowej szerokości, o ile wybrany font je obsługuje. Nie przenoś jednak gęstości tabeli do opisów usługi: te obszary służą innym zadaniom.
Font zastępczy jest częścią projektu, a nie awarią
Kiedy przeglądarka nie ma jeszcze docelowego fontu, potrzebuje sposobu wyświetlenia tekstu. Ustawienie font-display: swap pozwala pokazać krój zastępczy, a później podmienić go na właściwy. Samo zastosowanie swap nie gwarantuje stabilnego układu: różne szerokości liter mogą zmienić liczbę linii. Dlatego testuj również stan przed pobraniem pliku oraz całkowitą niedostępność fontu, a nie wyłącznie efekt końcowy na szybkim połączeniu.
Praktyczny test polega na zablokowaniu żądania fontu w narzędziach przeglądarki i ponownym przejściu przez nagłówek, menu oraz formularz. Czy przycisk nadal ma pełną etykietę? Czy cena nie nachodzi na jednostkę? Wybierając font zastępczy, porównuj proporcje, a nie podobieństwo nazwy. Ogranicz liczbę odmian i sprawdź, czy dostarczany zestaw znaków obejmuje język publikacji. Zmniejszanie pliku przez usunięcie potrzebnych liter nie jest użyteczną optymalizacją.
Zawijaj treść tam, gdzie ma to sens semantyczny
Nazwy usług i tytuły powinny móc przejść do następnego wiersza. Inaczej traktuje się krótki numer telefonu, a inaczej wieloczłonowy adres lub długi identyfikator. Nie nakładaj globalnego zakazu zawijania na wszystkie przyciski i nagłówki. W układach flex oraz grid sprawdź minimalne rozmiary dzieci: czasami to min-width: auto, a nie wielkość liter, utrzymuje szeroki element poza ekranem. Dla właściwego elementu rozwiązaniem może być min-width: 0.
W długich adresach i identyfikatorach można dopuścić awaryjne łamanie za pomocą overflow-wrap. Nie należy jednak łamać każdego polskiego słowa po dowolnej literze, gdy wystarczy zwykłe zawijanie po spacji. Znak wielokropka stosuj świadomie: ukryta część nazwy musi pozostać dostępna, jeżeli rozróżnia produkty. W przykładowym panelu „Umowa serwisowa - oddział północny” i „Umowa serwisowa - oddział południowy” nie mogą wyglądać identycznie po obcięciu.
Sprawdź powiększenie i treści, których nie zna projektant
W przeglądarce zwiększ rozmiar tekstu i przejdź całą ścieżkę: od menu do potwierdzenia formularza. Kontroluj nie tylko główną kolumnę, lecz także baner zgód, komunikaty błędów i stopkę. To często miejsca, gdzie wysokość ustawiona na sztywno zaczyna ucinać drugą linię. Zrób test bardzo wąskiego ekranu jako próbę odporności, a potem powtórz go przy zwykłych szerokościach telefonu. Poprawka nie powinna polegać na zmniejszeniu wszystkiego do nieczytelnego rozmiaru.
Do danych testowych dodaj wyraz bez spacji, nazwę z łącznikiem i dłuższą etykietę przycisku. Sprawdź też treści pochodzące z CMS, a nie jedynie tekst zapisany w szablonie. Ustal, które ograniczenia długości wynikają z sensu biznesowego. Limit stu znaków w nazwie kategorii może mieć uzasadnienie, ale limit wprowadzony tylko dlatego, że karta ma stałą wysokość, ukrywa problem układu zamiast go naprawiać.
Zapisz kryteria odbioru typografii
Odbiór fontów można sprowadzić do konkretnych dowodów: wszystkie potrzebne znaki występują, tekst pozostaje czytelny bez pliku fontu, powiększenie nie obcina informacji, a długie nazwy nie rozszerzają całego dokumentu. Zachowaj zrzuty reprezentatywnych widoków i zestaw użytych treści. Przy następnej zmianie kroju lub szablonu łatwiej porównasz rezultat. Sam fakt, że strona „wygląda lekko”, nie mówi nic o zachowaniu po podmianie danych.
Warto również ustalić właściciela zestawu stylów. Redaktor nie powinien naprawiać problemów przez wstawianie dodatkowych spacji i ręcznych łamań w tytułach. Takie obejścia działają tylko przy jednym ekranie. Dobrze przygotowana typografia pozwala pisać naturalnie, a techniczne reguły odpowiadają za czytelny podział. Ostatecznym celem nie jest efektowna próbka liter, tylko strona, na której można bez domysłów przeczytać ofertę i wykonać zadanie.