teksty-na-stronie-1-wybor-czcionek

Teksty na stronie #1 – Wybór czcionek

Strony internetowe tworzy się po to, by zaprezentować za ich pomocą jakąś konkretną zawartość. Najczęściej jest ona w formie tekstu, we flat designie (wspomnianym przeze mnie tutaj) jest to bez wątpienia najważniejszy element. Dlatego tak ważne jest, by dobrać do strony odpowiedni krój czcionki, rozmiar, czy kolorystykę. Zasady dotyczące budowy czcionek czy ich stosowania nazywa się typografią.

Dlaczego poruszam ten temat? Ponieważ często tworząc strony internetowe przywiązuje się marginalną uwagę temu, jakie czcionki zostaną wykorzystane, w jaki sposób rozmieszczone, i jak to wpłynie na czytelność całości oraz łatwość wykorzystania. W tym artykule skupię się na opisie budowy czcionki i zastosowaniu.

Budowa czcionki

Wykorzystywanych w internecie jest wiele rodzajów czcionek, duże, małe, z szeryfami lub bez, pogrubione, pochylone, dekoracyjne lub klasyczne. Jednak zasady ich budowy są te same. Najważniejsze elementy występujące w czcionkach to:

  • trzon – jest to pionowy element w dużych literach, najbardziej wyróżniony;
  • ramię – najczęściej poziomy element, np. w dużej literze T;
  • wydłużenie górne – w małych literach jest to ta część, która wystaje ponad linię środkową czcionki;
  • wydłużenie dolne – jest to ten element, który znajduje się poniżej linii bazowej czcionki;
  • szeryfy – ozdobne zakończenia litery występujące w czcionkach szeryfowych;
  • kerning – odległość pomiędzy literami;
  • wysokość x (wysokość średnia) – wysokość litery x, alternatywny sposób określania wielkości czcionki.

Znajomość budowy czcionki jest dlatego tak ważna, ponieważ daje wiedzę o możliwościach zastosowania różnych rodzajów. I tak dla przykładu czcionki z niską wartością kerningu dobrze wyglądają dla dużych napisów tytułowych, jednak przy dłuższym zbyt duże zbicie liter utrudnia czytanie. Wysokość x natomiast często wpływa na odbiór wielkości czcionki. Porównując różne czcionki tego samego rozmiaru, te, które mają niższą tę wartość sprawiają wrażenie mniejszych, w związku tym również mniej czytelnych. Kolejnym ważnym rozróżnikiem czcionek są szeryfy.

Budowa czcionki

Szeryfy

Szeryfy w piśmiennictwie były stosowane już w starożytnym Rzymie, spotkać je można chociażby na napisach wyrytych w kamieniu. Są to ozdobniki liter, dodatek do końcówek. Czcionki szeryfowe są powszechnie stosowane do tekstu w książkach, gazetach i magazynach. Uważa się, że są bardziej czytelne, a jako takie wpływają na szybkość czytania i jakoś zapamiętanych informacji.

Wraz z pojawieniem się komputerów okazało się, że w formie cyfrowej do tekstu bardziej nadają się czcionki bezszeryfowe, ponieważ rozdzielczość ekranów nie zawsze pozwalała na poprawne ich odwzorowanie. Stąd też przyjęło się, że do bloków tekstu, np. w internecie, stosuje się głównie właśnie ten wariant. Jest on również wykorzystywany do bardzo dużych napisów, np. na billboardach.

Font szeryfowy vs. bezszeryfowy

Kategorie

Ze względu na budowę można wyróżnić wiele kategorii czcionek. Ja posługują się taką, która rozróżnia następujące rodzaje:

  • Old style – czcionki bazujące na literach odręcznych wykonanych w czasach gdy nie było jeszcze drukarek. Zawsze posiadają szeryfy, często z zaokrągleniami (efekt odrywania pióra od kartki). Posiadają również umiarkowanie zmienną grubość, najczęściej części u góry z lewej strony i na dole z prawej są węższe. Wszystkie czcionki tego typu są do siebie bardzo podobne. Najczęściej są wykorzystywane do bloków tekstów drukowanych. W cyfrowym świecie natomiast wykorzystywane są raczej przy pisaniu tytułu czy śródtytułów.
  • Modern (nowoczesne) – wraz z rozwojem cywilizacji zmieniły się trendy również w typografii. Wraz z rozwojem bardziej wyrafinowanych metod druku w wieku XVIII, niewykorzystującym pióra, mogła zmienić się również czcionka. Tak powstała kategoria „modern”. Często posiada również szeryfy (choć nie jest to regułą), nie są one wtedy już zaokrąglone, a poziome lub pionowe, proste i bardzo cienkie. Ta czcionka również posiada zmienną grubość, jednak o większym natężeniu niż w przypadku czcionek „old style”. Stosuje się je do tekstu o dużych rozmiarach, by zwrócić na nie uwagę czytelnika, np. tytuły.
  • Slab serif (inaczej szeryf belkowy, egipcjanka) – gdy pojawiła się potrzeba tworzenia reklam, pojawiła się ta czcionka. Aby była czytelna z daleka niemal zrezygnowano w niej ze zmiennej grubości – całość zyskała teraz jednolity wygląd. Czcionki tego rodzaju są wykorzystywane w reklamach zewnętrznych, a także w książkach dla dzieci, ze względu na swój prosty wygląd.
  • Sans serif (bezszeryfowe) – Czcionki bezszeryfowe, jak sama nazwa wskazuje pozbawione są szeryfów. Są one również w większości jednej grubości, nie posiadają zmienności znanej z czcionek typu „old style” czy „modern”. Wykorzystuje się je często w formie cyfrowej, np. do stron internetowych, ponieważ brak dekoracji zwiększa ich czytelność na monitorach.
  • Script (odręczne) – są to wszelkie czcionki, które wyglądem przypominają pismo odręczne. Powinny być wykorzystywane okazjonalne, i na pewno nie do bloków tekstu – w dużych ilościach nie są czytelne, natomiast dobrze wyglądają jako element dekoracyjny.
  • Decorative (dekoracyjne) – w tej grupie znajdą się kroje czcionek z wieloma dekoracjami. Jest to bardzo różnorodna grupa, ale poszczególne elementy są łatwe w identyfikacji. Znajdują się tu czcionki od bardzo wesołych, w stylu fiesty, po takie przynoszące na myśl stare horrory. Wykorzystuje się je podobnie jak pismo odręczne, sporadycznie, do urozmaicenia tekstu.

Kategorie fontów

Rozmiar

Poza wyborem typu czcionki warto również rozważyć jej rozmiar. Warto istotnie różnicować elementy takie jak tytuł i tekst, by od razu rzucało się w oczy jaka część tekstu się gdzie zaczyna. Warto też pamiętać, że tekst który jest na stronie będzie czytany przez różne osoby, dlatego powinien powinien być odpowiednio duży, dobrze sprawdza się tu 16 punktów i więcej. Najlepiej jest tak dopasować jego wielkość, by w jednej linijce nie znalazło się więcej niż 50-60 znaków. Dłuższe linijki trudniej się czyta, dlatego powinno się ich unikać.

Rozmiar fontu

Kolor

Jak widać na rysunku powyżej, poza różnicowanie tekstów rozmiarem można to robić także kolorem. Tym bardziej że ostatnio często odchodzi się od tak silnego kontrastu jak czarny tekst na białym tle. Coraz częściej spotyka się stosowanie czcionek w różnych kolorach szarości, co moim zdaniem łatwiej się odbiera.

Ważne jest także by unikać koloru niebieskiego, zarezerwowanego w internecie dla linków.

Dobrze jest również unikać czerwieni oraz zieleni, zwłaszcza ze względu na osoby z daltonizmem (ok. 8% mężczyzn, mniejszy odsetek wśród kobiet). Jest to duża grupa osób, która nie rozróżnia tych kolorów, w związku z tym elementy tekstu je zawierające nie będą dla nich wystarczająco różne od reszty. Ewentualnie warto poza rozróżnieniem kolorystycznym warto dodać jeszcze inny rodzaj wskazówki, że dana część jest innego rodzaju.

Podsumowanie

Odpowiedni dobór czcionek to istotny element procesu projektowania. Wybór ich odpowiedniej kategorii, czy nawet typu, a także zestawienie kilku ich rodzajów ma duże znaczenie dla odbioru strony. Poprawnie zastosowane zwiększają czytelność, kierują uwagę na istotne elementy oraz pozostawiają dobre wrażenie. Z tego powodu warto pamiętać jakie różnice występują miedzy nimi, czym się charakteryzują i do jakich elementów najlepiej się nadają.