Zacznij od tekstu, który czytelnik ma przeczytać
Wybór kroju pisma bywa najbardziej widoczną częścią projektu, ale o wygodzie czytania często decydują prostsze ustawienia: wielkość liter, odstępy między wierszami i szerokość kolumny. Najpierw dopracuj zwykły akapit. To w nim znajdą się opisy usług, wpisy blogowe albo objaśnienia w katalogu. Jeśli tekst główny jest wygodny do czytania, łatwiej zbudować wokół niego nagłówki, podpisy i przyciski.
Przygotuj do prób prawdziwy fragment swojej strony, a nie samo krótkie zdanie. Dodaj nagłówek, kilka akapitów, listę oraz link. Zobaczysz wtedy, czy czytelnik może szybko odnaleźć potrzebną informację i czy układ pozostaje czytelny po przewinięciu ekranu. Ten sam zestaw sprawdź na telefonie i komputerze: ustawienie dobre w szerokiej kolumnie nie musi sprawdzić się w wąskiej.
Wielkość tekstu: czytelność przed liczbą pikseli
Dla tekstu głównego rozsądnym punktem startowym bywa wielkość około 16–18 pikseli, ale nie jest to uniwersalna recepta. Dwa kroje pisma ustawione na tę samą wartość mogą wyglądać inaczej: jeden ma drobne litery, drugi zajmuje więcej miejsca. Oceń efekt na rzeczywistej treści, szczególnie na telefonie. Jeśli do przeczytania opisu trzeba przybliżać ekran lub mocno się skupiać, tekst prawdopodobnie jest zbyt mały.
Ustal prostą hierarchię: tekst główny jako baza, nagłówki wyraźnie większe, a podpisy pomocnicze nieco mniejsze, lecz nadal czytelne. Nie zmniejszaj ważnych informacji tylko po to, by zmieściły się w jednym rzędzie. Unikaj też zastępowania hierarchii samą wielkością lub kolorem. Nagłówki powinny być rozpoznawalne dzięki spójnemu wyglądowi i odpowiedniej strukturze strony, co pomaga również osobom korzystającym z technologii wspomagających.
Interlinia daje tekstowi miejsce
Interlinia to odległość między kolejnymi wierszami tekstu. Gdy jest zbyt mała, akapit sprawia wrażenie zbitego i łatwo przeskoczyć wzrokiem do niewłaściwego wiersza. Gdy jest przesadnie duża, wiersze przestają wyglądać jak część jednego akapitu. Dla zwykłego tekstu można zacząć od wysokości wiersza wynoszącej około 1,4–1,6 wielkości pisma, a następnie dopasować ją do kroju i długości wiersza.
Nagłówki zwykle potrzebują ciaśniejszej interlinii niż długie akapity, szczególnie gdy zajmują dwa lub trzy wiersze. Osobno zadbaj o odstęp między akapitami: powinien pomagać rozpoznać nową myśl, ale nie rozrywać tekstu na przypadkowe fragmenty. W blogu większa przestrzeń może ułatwić skanowanie artykułu; w krótkim opisie produktu lub usługi ważniejsza może być zwarta, spokojna całość.
Długość wiersza zależy od szerokości kolumny
Nawet duży tekst z wygodną interlinią męczy, jeśli wiersz biegnie przez całą szerokość dużego monitora. Po dojściu do jego końca trudno wtedy znaleźć początek następnego. Z kolei bardzo wąska kolumna powoduje częste przenoszenie słów i poszarpany rytm czytania. Jako punkt wyjścia dla dłuższych akapitów możesz przyjąć około 50–80 znaków w wierszu na szerokim ekranie. To orientacyjny zakres, nie cel, który trzeba osiągnąć za wszelką cenę.
Szerokość ograniczaj przede wszystkim dla obszaru z tekstem, niekoniecznie dla całej strony. Na blogu artykuł może mieć węższą kolumnę niż menu czy ilustracje. Na stronie firmowej krótki opis obok zdjęcia może wymagać innego układu niż podstrona z obszernymi odpowiedziami na pytania. Na telefonie pozostaw miejsce przy krawędziach ekranu i sprawdź, czy tekst nie tworzy kolumny liczącej zaledwie kilka słów w każdym wierszu.
Sprawdź ustawienia w codziennych sytuacjach
Po ustawieniu trzech podstawowych parametrów przetestuj stronę przy dłuższym czytaniu, nie tylko na pierwszym ekranie. Otwórz ją na telefonie, powiększ tekst w przeglądarce i sprawdź, czy akapity nadal mieszczą się w widoku bez przewijania na boki. Zwróć uwagę na przyciski, etykiety formularzy, podpisy zdjęć oraz komunikaty o błędach. Czytelność ważnych informacji nie powinna zależeć od tego, czy ktoś zauważy drobny druk.
Na koniec oceń typografię razem z kolorem i tłem. Nawet dobrze dobrana wielkość liter nie pomoże, jeśli kontrast jest słaby albo tekst leży na ruchliwym zdjęciu. Poproś kogoś, kto nie zna strony, o odnalezienie konkretnej informacji i przeczytanie dłuższego fragmentu. Jeśli gubi miejsce, mruży oczy lub musi stale przybliżać widok, popraw jeden parametr naraz. Taka prosta próba mówi więcej o użyteczności ustawień niż oglądanie projektu wyłącznie w edytorze.
