Efektowny nagłówek na dużym monitorze może wypełnić cały ekran telefonu. Delikatny szary podpis, subtelny w pliku projektowym, w słońcu może niemal zniknąć. Typografia mobilna zaczyna się od zrozumienia warunków czytania: małych ekranów, krótkich sesji, zmiennej jakości połączenia i potrzeby szybkiego przejścia do działania. Jej celem nie jest zmniejszenie układu desktopowego, lecz zachowanie znaczenia i uwagi w innym otoczeniu.
Zbuduj jasną hierarchię
Czytelnicy powinni od razu odróżniać tytuł strony, nagłówki sekcji, tekst główny i instrukcje pól. Nie wymaga to dziesiątek rozmiarów i grubości. Mały, spójny system działa lepiej, gdy odstępy wzmacniają relacje między elementami. Nagłówek powinien znajdować się bliżej wprowadzanego akapitu niż poprzedniej sekcji. Identyczne komponenty powinny wyglądać spójnie w całej witrynie, również w artykułach dziennika i na stronach kontaktowych.
Testuj rzeczywisty tekst
Krótki pokazowy nagłówek nie ujawni zachowania długiej ukraińskiej nazwy usługi. Wstaw prawdziwą treść już podczas projektowania. Sprawdź apostrofy, cudzysłowy, myślniki, liczby, adresy i długie słowa. Nie dodawaj wymuszonych podziałów wiersza tylko po to, by dopracować jeden zrzut ekranu: przy innej szerokości mogą zakłócić rytm. Jeśli tytuł się nie mieści, uprość sformułowanie, zanim zmniejszysz litery do niewygodnego rozmiaru.
Traktuj akapit jak element interfejsu
Zwartą ścianę tekstu trudno przeglądać na telefonie. Dziel treść według znaczenia, nadawaj sekcjom konkretne nazwy i używaj listy dla sekwencji działań, gdy naprawdę pomaga. Jednocześnie nie każde zdanie powinno stawać się osobnym blokiem dekoracyjnym. Dąż do rytmu wspierającego zarówno szybkie przeglądanie, jak i uważne czytanie. Ważnych warunków nie należy ukrywać w mało widocznej formie tylko po to, by zachować czysty wygląd układu.
Pamiętaj o interakcji
Typografia wpływa też na przyciski i formularze. Ludzie powinni rozumieć, co stanie się po kliknięciu. „Porozmawiaj o projekcie” opisuje działanie dokładniej niż niejasne „Zacznij”, gdy następnym krokiem jest zapytanie. Pola powinny zachowywać zrozumiałe etykiety po wpisaniu wartości, a komunikaty błędów wyjaśniać sposób naprawy. Ważne informacje nie powinny być przekazywane wyłącznie kolorem: krótkie wyjaśnienie tekstowe eliminuje zgadywanie.
Testuj więcej niż wymiary ekranu
Sprawdź stronę przy zwiększonym powiększeniu, nawigacji klawiaturą i niewczytanych obrazach. Upewnij się, że główna treść nie jest obcięta ani zasłonięta przez stały panel. W3C udostępnia wstępne kontrole dostępności, w tym sprawdzanie nagłówków i innych elementów strony. Nie zastępują pełnego audytu, ale pomagają wykryć oczywiste problemy przed publikacją. Testy automatyczne również nie ocenią jasności każdego sformułowania.
Końcowa kontrola jest prosta: otwórz witrynę na zwykłym telefonie i przeczytaj ją jak nowy odwiedzający. Jeśli trzeba wytężać wzrok, powiększać pojedynczy fragment lub zgadywać następne działanie, przemyśl projekt ponownie, nawet gdy pierwotna makieta wygląda bezbłędnie.