Typografia Internetowa – co to jest, najczęściej popełniane błędy

Tekst najpierw oglądamy. Dopiero potem go czytamy (albo nie). Typografia, czyli wygląd tekstu, jest po prostu ważna – trzeba ją brać pod uwagę, projektując stronę Internetową, landing, materiały promocyjne czy po prostu pisząc bloga. Niestety, niewielu robi to dobrze, a znaczna większość twierdzi, że ważna jest wyłącznie treść. Otóż nie do końca.

Zła typografia zabije każdy content

Zła typografia to taka, która męczy oczy, wygląda nieestetycznie i kpi sobie z technologii stron responsywnych. To może “odbić się” na stronie Internetowej, a w niektórych przypadkach nawet na całej działalności.

Wyobraź sobie, że podczas poszukiwania informacji na jakiś temat, trafiasz w Google na świetny artykuł. Autor odpowiada na wszystkie Twoje pytania, zgłębia temat, cytuje badania. Bardzo chcesz pochłonąć tę treść do końca i na raz. Ale nie możesz. Oczy Cię bolą, bo jakoś “źle się czyta”. Nie potrafisz określić, dlaczego tak się dzieje, ale uciekający z ekranu wzrok mówi sam za siebie. W efekcie czytasz ten artykuł “na raty” lub nie kończysz lektury wcale.

Nawet najbardziej wartościowa treść przestanie robić na Tobie wrażenie, kiedy się nią fizycznie zmęczysz.

Efekt? Sklepy Internetowe tracą na wiarygodności. Eksperci z różnych dziedzin nie docierają do zainteresowanych odbiorców. Serwisy contentowe nie zarabiają, bo nikt nie chce ich czytać. A wszystko przez błędy w typografii internetowej.

Złe praktyki i błędy w typografii internetowej

Zanim przejdziemy do konkretnych błędów i problemów w typografii, należy podkreślić jedną rzecz. Każda strona Internetowa działa nieco inaczej. To, co w jednej się nie sprawdza, sprawdzi się w drugiej. Jeśli więc szukasz uniwersalnej bazy wiedzy o typografii internetowej, to niestety taka nie istnieje (w przeciwieństwie do typografii druku).

Istnieją jednak błędy, które pojawiają się nagminnie i w prawie zawsze szkodzą stronie:

1. Krój bez ładu i składu

Krój pisma to po prostu obraz kompletu znaków pisma. Nie jest to więc czcionka (rozumiana jako pojedynczy znak), a pełny zbiór znaków graficznych, z których składa się dany tekst.

Krój ma swoje liczne odmiany i mówimy wówczas o rodzinie danego kroju. Problem pojawia się wtedy, kiedy na stronie użyto kilku rodzin krojów. Powstaje wówczas nieprzyjemny dla oka chaos. Tymczasem w większości przypadków wystarczy jeden krój i jego dwie najbardziej podstawowe odmiany: pogrubiona oraz pochyła.

Zwróć uwagę na:

• ilość krojów – łączenie kilku krojów pisma wymaga precyzji i wyczucia, najlepiej jest używać jednej rodziny krojów lub dwóch krojów, które nie odbiegają wyraźnie od siebie,
• krój szeryfowy – nie łącz kilku krojów szeryfowych razem lub kroju szeryfowego z ozdobnym,
• dekoracyjność – zbyt dużo dekoracji pisma męczy oczy,
• wysokość znaku – połączenie dwóch krojów o różnej wysokości (choć o tym samym rozmiarze/stopniu pisma) uwydatnia jedną część tekstu, a drugą zmniejsza.

Jeśli nie masz pewności, czy dobrze połączyłeś fonty, możesz skorzystać z gotowych zestawów krojów, np. na Google Fonts.

2. Za szeroki lub za wąski blok tekstu

Blok tekstu nie powinien być ani za szeroki, ani za wąski. Idealna szerokość jest wtedy, gdy czytelnik nie musi przesadnie ruszać oczami lub głową, w ten sposób męcząc się. Niestety, o ile w typografii druku łatwo o to zadbać, to w sieci sprawa się nieco komplikuje. Różne proporcje ekranów sprawiają, że blok tekstu ma inną wielkość na każdym z nich.

Jednym ze sposobów na dopasowanie liczby wyrazów w wersie jest wyjustowanie tekstu. Należy się upewnić, że po wykonaniu tej akcji nie pojawiają się nienaturalne i utrudniające czytelność prześwity. Nieestetyczny efekt justowania oznacza natomiast, że wiersze są za szerokie. Należy też zwrócić uwagę na to, czy przeczytanie tekstu wymaga poruszania oczami.

Kolejnym błędem jest za mała szerokość bloku. Tutaj problem widać od razu – w wersie mieści się niewiele wyrazów, czytelność jest znacznie utrudniona, pojawiają się duże prześwity. Prawda, czasami blok po prostu musi mieć już taką szerokość (np. w sidebarach), ale to nie znaczy, że tekst ma być nieczytelny. Należy po prostu zmniejszyć stopień pisma i zastosować układ chorągiewkowy.

3. Justowanie

Skoro już raz pojawił się ten termin, należy go nieco rozwinąć. Justowanie to po prostu wyrównanie tekstu do obu krawędzi – obowiązkowy układ typograficzny w druku. W sieci powoduje on jednak komplikacje.

Justowanie to dobry sposób na sprawdzenie szerokości bloku, ale lepiej nie używać go w finalnej wersji tekstu. Typografia internetowa ma to do siebie, że lepiej sprawdza się w niej wyrównanie do lewej strony (wspomniany układ chorągiewkowy). Justowanie może tekstowi zaszkodzić, tworząc nieestetyczne “światło” i utrudniając czytelność.

4. Źle dobrany font

Źle dobrany font rzutuje na odbiór całej strony. Najlepiej odda to znienawidzony przez wielu Comic Sans. Wyobraź sobie, że trafiasz na stronę kancelarii prawnej. Spodziewasz się tam fontu rodem z komiksów?

To oczywiście nieco wyolbrzymiony przykład, ale należy sobie uświadomić, że font naprawdę rzutuje na odbiór całej strony. Powinien być dostosowany do jej zawartości i zgadzać się z wizerunkiem marki.

5. Brak znaków diakrytycznych

Tak, tak… To przykre, ale ciągle trzeba przypominać o tym, że krój powinien mieć wszystkie ogonki i kropki, czyli polskie znaki. Użycie zestawu bez znaków diakrytycznych powoduje, że rodzaj kroju automatycznie zmienia się. A to widać. W efekcie odbiorca patrzy tylko na wszystkie diakrytyki, irytując się, że coś w nich nie gra.

6. Unikanie krojów szeryfowych

Jeszcze do niedawna istniało niepisane prawo w typografii internetowej : nie stosuj kroju szeryfowego. Wynikało to z niskiej rozdzielczości ekranów, które źle wyświetlały wszystkie szeryfy. Dziś nie ma powodu, aby szeryfów unikać. I choć niektórzy sądzą, że szeryfy dalej utrudniają czytelność, to coraz rzadziej słychać takie głosy.

Faktem jest natomiast, że krój szeryfowy ma się świetnie w typografii internetowej. Nie wierzysz? Zajrzyj na medium.com, gdzie rządzą szeryfy, i przeczytaj kilka artykułów. 

7. Podejście jak do druku

Możliwe, że czytając o typografii internetowej, natkniesz się gdzieś na informację o błędach typu sieroty, bękarty, wdowy.

Jeśli założysz, że musisz ich unikać bezwzględnie, to Twoje starania pójdą na marne. Wszystko z powodu responsywności stron, która sprawia, że kolumny tekstu zmieniają swoją szerokość. Dlatego nigdy nie traktuj typografii internetowej na równi z typografią druku. Tutaj działają po prostu inne zasady.

Ponadto należy też pamiętać o właściwym wyróżnieniu nagłówków i śródtytułów, czyli o zachowaniu czytelnej hierarchii tekstu.

8. Nietestowanie webfontów

I ostatni błąd, ale wcale nie najmniej istotny – font w Photoshopie i font w przeglądarce to dwie różne rzeczy. Zdarza się, że najlepszy krój wypada słabo na stronie, chociaż w projekcie wygląda świetnie. Trzeba więc wyrobić sobie nawyk sprawdzania webfontów, aby potem się nie rozczarować.

Jeśli nie wiesz, jak to zrobić, bo font nie pochodzi np. z Google Fonts, możesz skorzystać z internetowych generatorów. Jednym z nich jest choćby Font Squirrel, w którym pobierzesz prawie każdy webfont.

Podsumowując, typografia internetowa rządzi się swoimi prawami i ma niewiele wspólnego z typografią druku. Istnieją jednak błędy, o których warto pamiętać, zwłaszcza że mogą wynikać po prostu z nieuwagi lub zapominalstwa.