Typografia w projektowaniu stron to dobór czcionek oraz ustawienie ich rozmiaru, grubości, interlinii i szerokości kolumny tak, aby tekst był czytelny, hierarchiczny i spójny z charakterem marki. Dobra typografia jest jednym z najważniejszych elementów komfortu czytania.
Jakie parametry decydują o czytelności?
- rozmiar: tekst główny zwykle co najmniej 16 px (1 rem),
- interlinia: około 1,4–1,6 wysokości czcionki dla akapitów,
- długość wiersza: zwykle 45–75 znaków, w typografii klasycznej za optimum uważa się około 66,
- kontrast tekstu z tłem, zgodny z wytycznymi WCAG.
Jak budować hierarchię?
Zastosuj skalę rozmiarów, na przykład w proporcji 1,25 między kolejnymi poziomami, i ogranicz się do jednej–dwóch rodzin czcionek. Nagłówki, tekst, podpisy i przyciski powinny różnić się rozmiarem i grubością w sposób przewidywalny, aby użytkownik od razu rozumiał, co jest ważne.
Dobór czcionek
Sprawdź, czy font obsługuje polskie znaki diakrytyczne, dostępne grubości i licencję do użycia w sieci. Czcionki bezszeryfowe są popularne na ekranach, ale to dobrze dobrana para (nagłówek i tekst) wpływa na odbiór bardziej niż sama krój. Pamiętaj, że każda dodatkowa grubość to kolejny plik do pobrania.
Typografia a wydajność i dostępność
Używaj jednostek rem, aby tekst skalował się wraz z ustawieniami przeglądarki, i ładuj fonty w formacie WOFF2 z font-display: swap. Unikaj tekstu w obrazach, bo nie da się go powiększyć ani odczytać czytnikiem ekranu.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP) 
Jak ładować czcionki na stronie bez efektu znikania tekstu i migania ekranu?