Czego nie robić w typografii internetowej?

Tekst najpierw oglądamy. Dopiero potem go czytamy (lub też nie). Typografia jest więc po prostu ważna – trzeba ją brać pod uwagę, projektując stronę czy pisząc bloga. Niestety, niewielu robi to dobrze, a znaczna większość twierdzi, że najważniejsza jest treść. Otóż nie.

Zła typografia zabije każdy content

Zła typografia to ta, która męczy oczy, wygląda nieestetycznie i kpi sobie ze stron responsywnych. Wszystkie te rzeczy odbijają się na stronie, a w niektórych przypadkach nawet na całej działalności. Pewnie łapiesz się teraz za głowę. Bo jak to możliwe, żeby typografia miała aż takie znaczenie? Niestety ma. Albo stety.

Wyobraź sobie, że trafiasz na świetny artykuł. Autor odpowiada na wszystkie Twoje pytania, zagłębia temat, prowadzi 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ł w częściach lub nie kończysz go wcale. Brzmi znajomo?

Jakie są szanse, że wrócisz na tę stronę i będziesz to robić regularnie? Niewielkie. Nikt nie lubi się męczyć, czytając. Ba, w dobie krótkich komunikatów już samo czytanie jest problematyczne.

Jeśli więc czytanie dodatkowo Cię wykańcza, odpuścisz sobie. Serio, po prostu to zostawisz. Nawet najbardziej wartościowa treść przestanie robić na Tobie wrażenie, kiedy się nią zmęczysz.

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

Złe praktyki w typografii internetowej

Ale! Zanim o błędach w typografii, należy podkreślić jedną rzecz. Każda strona 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 muszę Cię rozczarować. 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 tego, z czego składa się dany tekst.

Krój ma swoje liczne odmiany i mówimy wówczas o rodzinie danego kroju. Jak już się pewnie domyślasz, 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 ma inną wielkość na każdym.

Jednym ze sposobów na dopasowanie liczby wyrazów w wersie jest wyjustowanie tekstu. Dobra szerokość bloku jest wtedy, gdy 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 męczącego poruszania oczami.

za szeroki blok tekstuza szeroki blok tekstu

Kolejnym błędem jest za wąska szerokość bloku. Tutaj problem widać od razu – w wersie mieści się niewiele wyrazów, czytelność jest znacznie utrudniona, pojawiają się duże światła. 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.

za wąski blok tekstuza wąski blok tekstu

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 bowiem 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? Ja też nie.

To oczywiście nieco wyolbrzymiony przykład, ale należy sobie uświadomić, że font 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 przerażające, ale w 2019 roku 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. Szybko zrozumiesz, że szeryfy nie są już żadnym wrogiem.

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.

bękarty i sierotybękarty i sieroty

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. Popełniłeś któreś?

Czego nie robić w typografii internetowej?