Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Czytelność tekstu na stronie. Jaki kolor, font i rozmiar czcionki wybrać?

Czytanie tekstu na ekranie komputera jest o około 20% wolniejsze niż czytanie go na papierze. Dodatkowo na stronach internetowych jest tak dużo rozpraszaczy jak odnośniki bądź reklamy, że dobrnięcie do końca jest nie lada wyczynem, a zrozumienie tekstu przychodzi z dużo większym trudem. Podpowiadamy, jakich technik użyć, aby proces czytania tekstu na stronie internetowej był przyjemniejszy.

inskrypcja
John Hill. Licensed under CC BY-SA 3.0 via Wikimedia Commons

Techniki druku doskonalone są od stuleci. Sposoby prezentacji treści na stronach internetowych są badane i ulepszane zaledwie od paru dekad. Wielu webmasterów, grafików bądź projektantów nawet się nimi nie zainteresowało, pozostawiając wybór koloru czcionki badź fontu swojej własnej intuicji. Jednakże taki wybór ma bardzo duże znaczenie i może zadecydować o czytelności naszej strony bądź jej braku.

Po pierwsze: font-family

Najważniejszą zasadą przy wyborze czcionek jest ich mała ilość. Niezalecene jest używanie więcej niż trzech typów czcionek. Może to sprawić wrażenie, że strona jest chaotyczna i mało profesjonalna.

Ponadto najlepiej jest korzystać z najbardziej popularnych i domyślnych czcionek, do których przyzwyczajeni są użytkownicy (Arial, Verdana, Helvetica itp.). Jeżeli już chcemy korzystać z innych czcionek, to wybierzmy te nieszeryfowe. Czcionki szeryfowe dobrze sprawdzają się w druku, natomiast gorzej się je czyta na ekranie. Często szeryfowe są też stosowane w nagłówkach (im większy rozmiar czcionki, tym są czytelniejsze).

Po drugie: color

Strony internetowe można spotkać w przeróżnych barwach, z różnymi kolorami czcionek oraz tła. Jednakże wskazane byłoby tutaj ograniczenie zapędów grafików do proponowania nietypowych kolorów, gdyż największą czytelność zapewni czarny tekst na białym tle. Nieźle sprawdzi się też czarny tekst na szarym bądź żółtym tle oraz niebieski (niezalecany, gdyż jest przeznaczony dla linków) na białym bądź szarym, jednakże najlepiej trzymać się konwencji umieszczania czarnego tekstu na białym tle, szczególnie w przypadku długich tekstów.

Więcej kombinacji tutaj >>

Po trzecie: font-size

Wielkość, w przypadku tekstu na stronie internetowej, ma znaczenie. Zapomnijmy o podejściu “użytkownik powiększy stronę/rozmiar czcionki”, bo z tej opcji korzysta niewielki odsetek użytkowników. Pozostali skazani są na nasz wybór.

Zalecana wielkość to minimum 16px, co jest często domyślną wielkością czcionki w wielu przeglądarkach internetowych. Zapomnijmy o mniejszych rozmiarach, gdyż dla wielu użytkowników taki tekst będzie nieczytelny.

Po czwarte: line-height

Również istotna jest interlinia (line-height), którą najlepiej wyliczyć poprzez pomnożenie rozmiaru czcionki przez 1,48 (line-height = font-size * 1,48), co dla wspomnianych 16px da line-height o wartości 24px.

Na tej podstawie można też obliczyć długość wiersza, która powinna być 27,8 razy większa od wysokości linii (długość wiersza = line-height * 27,8). Dla czcionki o rozmiarze 16px zalecana długość wiersza wyniesie 667px. Sugeruje się też umieszczanie od 55 do 85 znaków w jednym wierszu.

Wyliczenia znaleźliśmy tutaj >>

Po piąte: struktura tekstu

Większość internautów nie ma czasu na dokładne czytanie całego tekstu. Potrzebują odnaleźć interesującą ich informację, a długi i mało przejrzysty tekst może ich do tego zniechęcić. Dlatego zadbaj o podział tekstu na akapity (niezbyt długie), dodaj śródtytuły, które pomogą w skanowaniu tekstu, wybolduj najistotniejsze informacje oraz użyj wypunktowania, o ile tylko możliwe.

Ponadto ogranicz ilość rozpraszaczy takich jak reklamy (w praktyce mało realne). Za to można dodać zdjęcia, ilustracje i inne elementy związane z tekstem, które wzbogacają przekaz. Zapomnij też o justowaniu, które w internecie się nie sprawdza.

Podsumowanie

Czytelność strony jest niezwykle ważna i może w dużym stopniu wpłynąć na czas spędzony na stronie. Zastosowanie się do powyższych wskazówek powinno w dużym stopniu wpłynąć na przyswajalność tekstu. Pamiętaj jednak, że czasami ładny design może okazać się ważniejszy od doskonałej czytelności, szczególnie gdy strona ma mało tekstu, a np. więcej obrazków. Wtedy można pozwolić sobie na odrobinę więcej kreatywności.