Praktyczny przewodnik po czytelnej typografii we współczesnym internecie

Dlaczego większość stron internetowych jest trudniejsza do czytania, niż powinna

Przeciętna strona internetowa w 2026 roku korzysta z niestandardowej rodziny fontów, starannie dobranych kolorów marki i systemu projektowego, który określa odstępy co do piksela. A jednak tekst główny — rzecz, którą większość odwiedzających faktycznie przyszła przeczytać — często ma 14px, niski kontrast w odcieniu szarości i krój pisma zoptymalizowany pod nagłówki, nie akapity.

To nie jest tyrada przeciwko projektantom. To przypomnienie, że czytelność jest osobną dyscypliną względem projektowania wizualnego, a te dwie rzeczy nie zawsze idą w parze. Krój pisma, który wygląda ostro w sekcji hero, może męczyć przy dłuższych akapitach. Paleta kolorów, która dobrze wygląda na zdjęciach, może nie przejść testów kontrastu. Układ, który działa na 27-calowym monitorze, może zapaść się w wąską kolumnę na urządzeniu mobilnym.

Dobra wiadomość: czytelna typografia nie wymaga dyplomu z typografii. Wymaga uwagi poświęconej kilku zmiennym, które mają nieproporcjonalnie duży wpływ.

Rozmiar fontu: większy, niż myślisz

Najczęstszym błędem czytelności w internecie jest zbyt mały tekst główny. Projektanci często ustawiają tekst na 14px lub 15px, bo „wygląda czysto” w skali desktopowej, a potem zapominają, że znaczna część czytelników korzysta z telefonów, często w nieidealnym oświetleniu.

Praktyczna baza dla tekstu głównego w 2026 roku:

• Desktop: minimum 18px, preferowane 20px
• Mobile: minimum 16px, preferowane 18px

Te wartości wydają się duże, jeśli przywykłeś do mniejszego tekstu, ale odzwierciedlają sposób, w jaki ludzie faktycznie czytają na ekranach. Większy tekst zmniejsza zmęczenie oczu, poprawia zrozumienie i sprawia, że treść jest dostępna dla czytelników z łagodnymi wadami wzroku, którzy nie zmienili ustawień przeglądarki.

Jeśli Twój system projektowy narzuca mniejszy tekst, przetestuj go na telefonie w słońcu. Jeśli mrużysz oczy, jest za mały.

Wysokość wiersza: daj tekstowi przestrzeń do oddychania

Wysokość wiersza (interlinia) to pionowa przestrzeń między wierszami tekstu. Zbyt mała sprawia, że linie zlewają się ze sobą. Zbyt duża powoduje, że oko gubi ciągłość między wierszami.

Dla tekstu głównego wysokość wiersza od 1.5 do 1.7 sprawdza się w przypadku większości krojów pisma. Nagłówki mogą być ciaśniejsze (1.1 do 1.3), ale tekst główny potrzebuje miejsca.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

To jedna z najprostszych wygranych dla czytelności. Jeśli Twój tekst główny ma obecnie line-height: 1.2 albo używa stałej wartości w pikselach, zmień to dziś.

Długość wiersza: krótsza, niż myślisz

Optymalna długość wiersza dla tekstu głównego to 45 do 75 znaków na wiersz, mniej więcej 8 do 12 słów. Wiersze dłuższe niż 90 znaków utrudniają oku powrót do początku następnego wiersza. Wiersze krótsze niż 40 znaków tworzą poszarpane, fragmentaryczne doświadczenie czytania.

Większość stron robi to źle, pozwalając tekstowi rozciągać się na pełną szerokość viewportu, zwłaszcza na desktopie. Monitor o szerokości 1920px może zmieścić ponad 150 znaków w wierszu, co jest męczące w czytaniu.

Rozwiązaniem jest max-width na kontenerze tekstu:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Jednostka ch jest niedostatecznie wykorzystywana, ale idealnie się do tego nadaje: skaluje się wraz z rozmiarem fontu i w przybliżeniu odpowiada szerokości znaku.

Kontrast: to nie takie proste jak czarny na białym

WCAG 2.1 określa minimalny współczynnik kontrastu 4.5:1 dla tekstu głównego (poziom AA) oraz 7:1 dla zwiększonej dostępności (poziom AAA). Większość stron spełnia to na papierze, ale zawodzi w praktyce, ponieważ używa jasnoszarego tekstu na białym tle.

Częste problemy:

• #666666 na #FFFFFF (4.54:1, ledwo przechodzi)
• #777777 na #FFFFFF (4.47:1, nie przechodzi)
• Każdy odcień jaśniejszy niż #767676 na białym (nie przechodzi)

Jeśli Twój system projektowy określa „text-secondary” jako jasną szarość, przetestuj ją. WebAIM contrast checker to najszybszy sposób weryfikacji.

Tryb ciemny dodatkowo to komplikuje. Czysto biały tekst na czystej czerni powoduje halację (efekt poświaty), która jest trudniejsza do czytania niż lekko złamana biel na ciemnej szarości. Lepsze podejście:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Wybór kroju pisma: domyślne fonty są lepsze, niż myślisz

Niestandardowe fonty webowe są wszechobecne, ale wiążą się z kompromisami. Dodają opóźnienie, zwiększają wagę strony i mogą blokować renderowanie, jeśli nie są ładowane ostrożnie. W przypadku tekstu głównego fonty systemowe często są lepszym wyborem.

Solidny zestaw fontów systemowych w 2026 roku:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Daje to San Francisco na macOS/iOS, Segoe UI na Windows i Roboto na Androidzie — wszystkie to wysoce czytelne, profesjonalnie zaprojektowane kroje pisma, które ładują się natychmiast.

Jeśli używasz niestandardowego fontu do tekstu głównego, wybierz taki, który zaprojektowano do długiej lektury, a nie do zastosowań displayowych. Unikaj:

• Bardzo cienkich lub bardzo grubych odmian w tekście głównym
• Wariantów skondensowanych lub rozszerzonych
• Fontów o niskiej wysokości x (wysokości małych liter)

Przetestuj wybrany krój pisma na długości akapitu, zanim się na niego zdecydujesz.

Typografia responsywna: płynne skale tekstu

Stałe rozmiary fontów nie skalują się dobrze między urządzeniami. Font główny 20px, wygodny na desktopie, może wydawać się za duży na urządzeniu mobilnym.

Płynna typografia używa clamp(), aby płynnie skalować rozmiar fontu między minimum a maksimum:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Skaluje to tekst od 16px na małych ekranach do 20px na dużych, z płynną interpolacją pomiędzy. To bardziej wyrafinowane niż breakpointy w media queries i dostosowuje się do dowolnej szerokości viewportu.

Dla pełnej skali typograficznej (nagłówki, tekst główny, mały tekst) narzędzia takie jak Utopia generują płynne skale na podstawie Twoich ograniczeń.

Odstępy między akapitami i wyrównanie tekstu

Dwa drobne szczegóły, które mają znaczenie:

1. Odstępy między akapitami: Dodaj przestrzeń między akapitami (margin-block-end: 1em) albo użyj wcięcia pierwszego wiersza (text-indent: 1.5em), ale nie obu naraz. Większość treści webowych używa odstępów.

1. Wyrównanie tekstu: Wyrównanie do lewej (lub do prawej w językach RTL) jest niemal zawsze czytelniejsze niż justowanie, które tworzy nierówne odstępy między słowami, chyba że włączone jest dzielenie wyrazów. Wyśrodkowany tekst główny jest trudny do czytania i powinien być zarezerwowany dla krótkich fragmentów.

Testowanie czytelności w praktyce

Czytelność nie jest całkowicie obiektywna, ale można ją testować:

• Przeczytaj własną treść na telefonie w różnych warunkach oświetleniowych
• Uruchom audyt dostępności Lighthouse, aby wychwycić problemy z kontrastem i rozmiarem fontu (wskazówki znajdziesz w artykule jak czytać raport Lighthouse bez paniki)
• Poproś osobę po 50. roku życia o przeczytanie strony bez zmieniania ustawień
• Sprawdź w analityce współczynnik odrzuceń na stronach bogatych w tekst — jeśli ludzie szybko wychodzą, czytelność może być jednym z powodów

Jeśli Twoja treść jest trudna do czytania, ludzie jej nie przeczytają. To takie proste.

Jak to wygląda w praktyce

Czytelny styl tekstu głównego w 2026 roku może wyglądać tak:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Obejmuje to rozmiar fontu, wysokość wiersza, długość wiersza, kontrast i responsywne skalowanie w około tuzinie linii CSS. Nie jest to ekscytujące, ale działa.

Kiedy łamać zasady

Te wytyczne dotyczą tekstu głównego — akapitów, które ludzie czytają dla informacji. Nagłówki, podpisy, etykiety UI i teksty marketingowe mają inne ograniczenia i mogą naginać te zasady.

Ale jeśli ktoś przyszedł na Twoją stronę, żeby przeczytać artykuł, stronę dokumentacji albo opis produktu, czytelna typografia nie jest opcjonalna. To podstawowe oczekiwanie.