Czytelność tekstu na stronie – wielkość czcionki, kontrast i długość linii

Tekst na stronie może być świetnie napisany i mimo to pozostać nieprzeczytany. Wystarczy, że jest za mały, za blady albo rozlany na całą szerokość szerokiego monitora. Czytelnik nie pomyśli wtedy, że tekst jest zły – po prostu przestanie czytać i zamknie kartę.

Czytelność to nie kwestia gustu. Istnieją konkretne wytyczne, przede wszystkim międzynarodowy standard dostępności WCAG (obecnie w wersji 2.2), i kilka zasad typograficznych sprawdzonych na długo przed powstaniem internetu. Poniżej zebraliśmy te, które najbardziej wpływają na wygodę czytania na stronie małej firmy.

Wielkość liter: zacznij od 16 pikseli

Przeglądarki internetowe domyślnie wyświetlają tekst w wielkości 16 pikseli. To rozsądne minimum dla treści głównej strony – akapitów, list, opisów usług. Mniejszy tekst, np. 13–14 pikseli, wymusza mrużenie oczu albo powiększanie ekranu palcami.

Jeśli Twoimi klientami są w dużej części osoby starsze – pacjenci ortopedy, okulisty, kardiologa – warto pójść o krok dalej i ustawić tekst na 17–18 pikseli. Nagłówki powinny być wyraźnie większe od tekstu, tak żeby hierarchia była widoczna na pierwszy rzut oka.

Liczba w ustawieniach to jedno, ale użytkownik musi też móc tekst powiększyć. WCAG na poziomie AA wymaga, żeby treść dało się powiększyć do 200% bez utraty treści i funkcji. W praktyce oznacza to, że po powiększeniu nic nie może nachodzić na siebie ani znikać za krawędzią ekranu.

Kontrast: liczby, które warto znać

Kontrast to różnica jasności między tekstem a tłem, wyrażana jako stosunek – od 1:1 (brak różnicy) do 21:1 (czarny tekst na białym tle). WCAG 2.2 na poziomie AA, który jest powszechnie przyjmowanym punktem odniesienia, wymaga:

• co najmniej 4,5:1 dla zwykłego tekstu,
• co najmniej 3:1 dla dużego tekstu, czyli takiego, który ma co najmniej 18 punktów (około 24 pikseli) albo 14 punktów pogrubionych (około 18,7 piksela),
• co najmniej 3:1 dla elementów interfejsu i grafik potrzebnych do zrozumienia treści, np. obramowania pola formularza czy ikony.

Wyższy poziom, AAA, wymaga 7:1 dla zwykłego tekstu i 4,5:1 dla dużego.

Kilka przykładów na białym tle:

• czarny (#000000) – 21:1, bez zastrzeżeń,
• ciemnoszary #333333 – około 12,6:1, bardzo dobrze,
• szary #767676 – około 4,5:1, tuż powyżej progu AA,
• jasnoszary #999999 – około 2,9:1, za mało dla zwykłego tekstu.

Modny jasnoszary tekst na białym tle to częsty problem na stronach firmowych. Na monitorze projektanta może wyglądać elegancko, ale na telefonie w słońcu staje się nieczytelny. Kontrast łatwo sprawdzić w darmowych kalkulatorach kontrastu: wpisujesz kod koloru tekstu i tła, a narzędzie podaje wynik. O tym, jak pogodzić kolory firmowe z kontrastem, piszemy we wpisie o kolorach i fontach na stronie.

Tekst na zdjęciach

Napis na zdjęciu to szczególny przypadek, bo tło jest niejednolite: część liter wypada na jasnym niebie, część na ciemnym drzewie. Rozwiązaniem jest półprzezroczysta ciemna warstwa pod tekstem albo jednolite tło pod samym napisem. Kontrast trzeba sprawdzić w najjaśniejszym miejscu zdjęcia, nie w średnim.

Długość wiersza: nie za szeroko

Gdy wiersz jest bardzo długi, oko po dojściu do końca linii ma trudność z trafieniem na początek następnej. Gdy jest bardzo krótki, czytanie się rwie. Typografowie od dawna przyjmują, że wygodny wiersz tekstu ciągłego ma mniej więcej 45–75 znaków. WCAG na najwyższym poziomie AAA zaleca, by blok tekstu nie był szerszy niż 80 znaków.

Na telefonie ten problem zwykle nie występuje, bo ekran jest wąski. Pojawia się na komputerach z szerokimi monitorami, gdy tekst rozciąga się na całą szerokość okna. Dlatego kolumna z tekstem powinna mieć ograniczoną maksymalną szerokość, nawet jeśli tło sekcji rozciąga się od krawędzi do krawędzi.

Interlinia i odstępy

Interlinia, czyli odstęp między wierszami, wpływa na czytelność bardziej, niż się wydaje. W tekście ciągłym dobrze sprawdza się interlinia około 1,5 wielkości czcionki – tyle zaleca też WCAG na poziomie AAA dla akapitów. Nagłówki mogą mieć mniejszą, bo są krótkie.

Odstępy między akapitami powinny być wyraźnie większe niż odstęp między wierszami. Wtedy tekst dzieli się na czytelne porcje. WCAG na poziomie AA wymaga ponadto, żeby strona nie „rozsypywała się”, gdy użytkownik za pomocą własnych ustawień zwiększy odstępy: interlinię do 1,5 wielkości czcionki, odstęp po akapicie do dwukrotności, odstępy między literami do 0,12, a między słowami do 0,16 wielkości czcionki.

Drobne decyzje, które robią różnicę

• Wyrównanie do lewej. Tekst justowany, czyli wyrównany do obu krawędzi, na stronach internetowych często tworzy nierówne odstępy między słowami, szczególnie na wąskich ekranach.
• Bez długich fragmentów wielkimi literami. Pojedynczy krótki napis tak, akapit – nie. Tekst pisany wersalikami czyta się trudniej.
• Kursywa i pogrubienia oszczędnie. Pogrubione kilka słów pomaga przejrzeć tekst. Pogrubione pół akapitu przestaje cokolwiek wyróżniać.
• Podkreślenie tylko dla linków. Czytelnicy kojarzą podkreślony tekst z odnośnikiem i będą próbowali w niego kliknąć.
• Krótkie akapity i śródtytuły. Trzy–pięć zdań na akapit i nagłówek co kilka akapitów ułatwiają przeglądanie, szczególnie na telefonie.

Czytelność a obowiązki prawne

Wymagania WCAG są podstawą przepisów o dostępności cyfrowej, które obejmują m.in. podmioty publiczne i część usług świadczonych przez firmy. To, czy i w jakim zakresie dotyczą one Twojej firmy, zależy od rodzaju działalności – omawiamy to w tekście o dostępności cyfrowej strony. Niezależnie od obowiązków czytelny tekst jest po prostu wygodniejszy dla wszystkich klientów.

Test czytelności w dziesięć minut

1. Otwórz stronę na telefonie i przeczytaj jeden opis usługi na zewnątrz, w świetle dziennym.
2. Sprawdź kontrast kolorów tekstu i przycisków w kalkulatorze kontrastu.
3. Na komputerze otwórz stronę na pełnym ekranie i zobacz, czy wiersze tekstu nie są zbyt długie.
4. Powiększ stronę w przeglądarce do 200% i sprawdź, czy nic się nie nakłada.
5. Poproś osobę starszą lub noszącą okulary do czytania o przeczytanie fragmentu strony z telefonu.

Jeśli w którymś punkcie pojawia się zawahanie, poprawka zwykle sprowadza się do kilku ustawień w stylach strony – wielkości tekstu, koloru albo szerokości kolumny.