Projektowanie czytelnego tekstu

, Bartłomiej Dymecki

Projektowanie czytelnego tekstu na stronę internetową

Zacznijmy od nieśmiertelnego pytania: font czy czcionka? :) No dobra, żartuję – tym razem nie będzie o wojnie między zwolennikami określeń font i czcionka (ja akurat przyzwyczaiłem się do tego drugiego). Niezależnie od tego, którą nazwę preferujesz, dobrze aby tekst na Twojej stronie był czytelny dla odbiorcy, prawda? A jakie cechy powinien mieć tekst, który jest przyjazny dla użytkownika?

Odpowiednia wielkość czcionki

Ze zdumieniem natrafiam na strony na których zastosowano czcionki o rozmiarze 11 lub 12 px. Bez powiększenia strony w przeglądarce taki tekst jest właściwie niezdatny do wygodnej lektury. Używanie tak małego rozmiaru czcionki nie ma w większości przypadków żadnego uzasadnienia.

Jaka powinna być wielkość czcionki na stronie internetowej? Pomińmy przy tym rozważania na temat sposobu definiowania czcionek (do dyspozycji mamy piksele, punkty, wartości względne). Na moim 13-calowym laptopie rozmiar 13 px uważam za minimum dla krótszych tekstów. A czytanie dłuższego tekstu oddanego czcionką mniejszą niż 14 pikseli jest mało komfortowe. Według niektórych opinii tekst powinien mieć wielkość minimum 16px.

Dobry kontrast tekstu

Zbyt mały kontrast między tłem, a kolorem czcionki to jawny zamach na nasze oczy. Najczęściej spotykam się z psuciem kontrastu przez zbyt jasny kolor tekstu. Dodaj do tego zbyt mały rozmiar czcionki, a otrzymasz materiał, którego przeczytanie jest praktycznie nierealne.

Kontrast tekstu możesz sprawdzić np. narzędziem Color Contrast Checker (a po chwili google’ania znajdziesz sporo alternatywnych narzędzi). Color Contrast Checker oblicza kontrast między tekstem i tłem wg wzoru ze specyfikacji WCAG 2.0.

Interlinia

Interlinia to odległość między dwoma wierszami tekstu. Bardziej fachowo – światło międzywierszowe. Dla stron internetowych definiować interlinii nie możemy. Pozostaje odpowiednie ustawienie wysokości linii. Odpowiada za niego CSS-owa właściwość line-height.

Poniżej przykład tekstu o wielkości 14 px z różną wysokością linii. Ustawiona na 100%:

Przykład wysokości linii ustawionej na 100%

Tekst jest jak widać daleki od bycia czytelnym. A oto wysokość 150%:

Przykład wysokości linii ustawionej na 150%

Czytelność tekstu znacznie wzrosła. Zwiększmy ją jeszcze do 200%?

Przykład wysokości linii ustawionej na 200%

Nie jest tragicznie, ale czytanie dłuższej porcji takiego tekstu mogłoby już nie być zbyt komfortowe.

Dobór czytelnego kroju czcionki

Przyznasz chyba, że tekst pisany czcionką Comic Sans nie jest zbyt przyjazny?. Dlatego duże znaczenie ma dobór czcionki zapewniającej wysoką jakość odbioru z ekranu komputera (a coraz częściej będziemy musieli myśleć także o innych urządzeniach). Najbezpieczniejsze dla internetu są fonty bezszeryfowe, np. popularne: Arial, Verdana, Helvetica. Czym są szeryfy (ang. serif)? To małe ozdobne kreski dodawane do liter. Takie czcionki czyta się wolniej z uwagi na mniejsze zagęszczenie punktów na ekranie komputera niż w druku. Więcej na ten temat przeczytasz w tekstach:

Różnica między fontami szeryfowymi i bezszeryfowymi ma mniejsze znaczenie w przypadku nowoczesnych ekranów, jak Retina. Przynajmniej według Jakoba Nielsena, który pisze: „there’s no strong usability guideline in favor of using one or the other”.

W ostatnim czasie popularne stają się czcionki niestandardowe. Częściowo dzięki usługom w rodzaju Google Fonts. Użycie niestandardowej czcionki nie jest problemem, jeśli tylko jest ona czytelna i nie opóźnia ładowania tekstu. Dosyć irytujące są sytuacje, gdy czcionka jest podmieniana przez JavaScript i tekst nie wyświetla się wcale dopóki nie załaduje się skrypt.

Za przykład dobrego użycia niestandardowej czcionki może posłużyć nowa wersja portalu BizTok.pl, gdzie użyto czcionki Oxygen:

Czcionka Oxygen w portalu BizTok.pl

I efekt tego zabiegu jest OK.

Wyrównanie do lewej vs justowanie

Justowanie tekstu polega na wyrównaniu go do lewej i prawej strony jednocześnie. Często spotykamy się z tym drukowanych publikacjach. Niestety w przypadku stron internetowych justowanie tekstu jest ryzykownym pomysłem. Przeglądarki internetowe nie potrafią przenosić wyrazów do nowej linii w inteligentny sposób lub dostosowywać odstępów między literami wewnątrz wyrazu. Efektem justowania na stronie jest więc duży rozjazd odstępów między wyrazami, co czasami nie przeszkadza, ale w wielu przypadkach potrafi znacznie utrudnić odbiór tekstu. W przyszłości rozwiązaniem tego problemu może być np. właściwość text-justify obecna w CSS3.

Tekst projektowany dla skanowania wzrokiem

Użytkownicy nie czytają. Oni skanują stronę. Czytają tylko fragmenty. Według badań Jakoba Nielsen przeciętny czytelnik przeczyta około 20% tekstu na Twojej stronie.

Jeśli użytkownik szybko nie odnajdzie poszukiwanych informacji to… zapewne opuści stronę i poszuka innej w Google. Ja tak robię. Ty tak robisz. Wszyscy tak robią :)

Jak dostosować tekst do szybkiego odnajdywania informacji?

  • Ilość tekstu. To właściwie temat na osobny artykuł. Pamiętaj, że większość użytkowników wcale nie chce przebijać się przez elaboraty. Liczy się „mięcho”. Konkretne informacje rozwiązujące problemy użytkowników i pomagające w realizacji ich celów.
  • Długość akapitów. Dzięki akapitom tekst staje się logicznie uporządkowany. Zbyt długi akapit przestaje spełniać swoją rolę i utrudnia odnalezienie informacji. Ogranicz pojedynczy akapit do maksymalnie kilku zdań.
  • Nagłówki. Podziel tekst na główne części. Unikaj wielokrotnej struktury nagłówków. Dzięki mądrze dobranym nagłówkom czytelnik może skanować stronę wzrokiem i szybko odnaleźć interesujące go miejsce w tekście.
  • Pogrubienia. Kluczowe myśli i najważniejsze punkty możesz pogrubić. Wyróżnij te informacje na które szczególnie chcesz zwrócić uwagę odbiorcy. Jeśli użyjesz znacznika <strong> to dodatkowo zwiększysz dostępność strony, ponieważ czytniki używane przez osoby z wadami wzroku odczytają go jako ważniejszy.
  • Wypunktowania. Jeżeli masz jakąś listę – wypunktuj ją. Użyj zwykłej listy <ul> lub listy numerycznej <ol> w zależności od kontekstu informacji. Dostępne formy wypunktowań znajdziesz przy opisie właściwości list-style-type
  • Ilustracje. Dobry obraz jest warty 1000 słów. To truizm. Ale naprawdę – lepsza jest dobra ilustracja obrazująca Twoje przesłanie, niż długi tekst, którego i tak nikt nie przeczyta.

Responsywność tekstu

Coraz częściej projektujemy responsywne strony dostosowujące się do różnych rozmiarów ekranu – dużego monitora komputera, laptopa, tabletu, smartfonu. Zadbać trzeba więc także o resposywność czcionek. W tekście Responsive Typography: The Basics Oliver Reichenstein z blogu Information Architects zachęca do zwrócenia uwag na odległość danego ekranu od oczu użytkownika. Zaprojektowanie strony responsywnej z dobrą typografią wymaga solidnych testów na różnych urządzeniach.

Podsumowując

Czytelna typografia dla strony internetowej może się wydawać kwestią banalną, ale uwzględnić trzeba wiele czynników. Pamiętaj o rozmiarze, dobrym kontraście, interlinii, czytelnym kroju, a sam tekst pisz tak, aby był łatwy do szybkiego skanowania wzrokiem.

Podoba Ci się ten wpis?

Więcej na ten temat: ,

  • Bartłomiej Kaliński

    Polecam dla osób, które dopiero rozpoczynają naukę. W którymś z pktów pada informacja o tym, że przy dzisiejszych ekranach nie ma różnicy pomiędzy użyciem czcionki szeryfowej a bezszeryfowej

    http://practicaltypography.com/typography-in-ten-minutes.html

  • Remigiusz Dymecki

    Dla mnie ostatnio bardzo ważne stało się aby korzystać z wyświetlaczy Retina lub podobnych. Na zwykłych czcionki wydają mi się teraz takie nieczytelne:P

  • Karol

    Imo na tej strnie zdecydowanie za mały kontrast – krój pisma jest za cienki. Text jest mało czytelny.

    • http://uxfocus.pl Bartek Dymecki

      Karol, dzięki za opinie. Zastosowana Helvetica jest dosyć standardowa.

  • skyPAPA

    Absolutne zero wiedzy na temat typografii. Nie pisz o rzeczach, o których nie masz pojęcia.