Zdaję sobie sprawę z tego, że tytułowa typografia to temat rzeka, a dla niektórych osób temat dość oczywisty. W tym artykule chciałem jednak przybliżyć kilka fundamentalnych zasad komponowania kroju, rozmiaru i kolorów czcionek na potrzeby sieci.

Poruszę takie tematy jak:

1. grupa docelowa serwisu internetowego, a rozmiar czcionki,
2. charakterystyka popularnych krojów, mieszanie czcionek i kolorów,
3. kontrast między tekstem, a tłem czyli odpowiedni poziom czytelności.

Na początku jednak krótko o tym dlaczego my czyli agencja zawsze ograniczamy wolę i fantazję naszego Klienta w obszarze typografii podczas budowania systemów CMS (ang. Content Management System).

Tworząc serwisy internetowe jeszcze w fazie wykonywania ich “kręgosłupa” (style guide), gdzie prócz definiowania architektury informacji, systemu nawigowania itp. określa się również typografię dostosowaną do potrzeb najszerszej grupy docelowej indywidualnego projektu.

Zaprezentowane w kompozycji graficznej (faza koncepcyjna) style tekstu wdraża się kolejno w mechanikę mającego działać pod witryną systemu CMS. Dostępne “na start” w rozmaitych edytorach stron www typu WYSIWYG rozległe funkcje formatowania tekstu umożliwiające każdemu użytkownikowi aplikacji m.in. dowolną zmianę rozmiaru, rodzaju czy koloru czcionki w obrębie każdego kawałka kontentu - zostają zablokowane i zmienione na poczet ściśle określonych przez agencje stylów. Dlaczego? Dlatego aby utrzymać spójność informacji w całej dostępnej warstwie tekstowej projektu, w końcu dlatego aby dobrze dopasowana typografia wywoływała pozytywne odczucia w stosunku do firmy Klienta i nie zniechęcała jej użytkowników.

Poniższe wytyczne potwierdzone są wieloletnimi badaniami. Dzięki temu tworzą wiarygodny i podstawowy zbiór zasad typograficznych doskonale sprawdzających się w sieci. Dzięki umiejętnemu zastosowaniu tych reguł umożliwiamy użytkownikowi witryny łatwe, szybkie i przyjemne skanowanie tekstu.

Do rzeczy. Reguły.

TYP ODBIORCÓW, A ZALECANY ROZMIAR CZCIONKI

- ogólny (10-12 punktów),
- osoby starsze i osoby z wadą wzroku (12-14 punktów),
- małe dzieci i inni początkujący użytkownicy Internetu (12-14 punktów),
- nastolatki i młodzież (10-12 punktów).

Jeżeli nasza grupa docelowa stanowi dość rozległy obszar dobrym sposobem jest zastosowanie przycisków do zwiększania rozmiaru tekstu np. w postaci A+ A- przedstawionych w odpowiednim rozmiarze, większe “A+” mniejsze “A-”.

Nie należy polegać na użytkownikach korzystających z dodatkowych opcji przeglądarek lub kombinacji klawiszy ctr +, ctr -. Należy pamiętać, że większość osób boi się zmieniać ustawienia używanej przeglądarki lub nie potrafi wykorzystywać zaawansowanych opcji.

Wartą przytoczenia jest technika antyaliasing‘u czyli czynność polegająca na umyślnym wygładzaniu postrzępionych krawędzi tekstu. Design’erzy często używają tej techniki aby stworzyć przyjemne w odbiorze efekty wypolerowania czcionek tekstu. Należy podkreślić jednak, że technikę tę trzeba stosować ostrożnie i unikać w tekstach pisanych czcionką o rozmiarze mniejszej niż 12 punktów. W takim wypadku efekt ten powoduje odwrotny do zamierzonego - problemy związane z brakiem wyrazistości co może wywołać utrudnienie w skanowaniu tekstu wśród osób starszych lub ze słabym wzrokiem.

Należy pamiętać aby na stronie internetowej ograniczać ilość kolorów dostępnych czcionek. Zalecenie mówi o stosowaniu nie więcej niż czterech różnych oraz maksymalnie trzech różnych krojów tekstu. Ludzie nie ufają serwisom przypominającym przypadkowe notatki.

KOMBINACJA KOLORÓW, A POZIOM CZYTELNOŚCI (grafika - Arial 12 punktów):

ad.1 Wysoki. Najwyższa wartość kontrastu,
ad.2 Wysoki. Wysoka, dostrzegalna różnica dopóki korzysta się z ciemnoniebieskiego,
ad.3 Średni. Średnia lub wysoka dostrzegalna różnica w kombinacji kolorów i ich nasyceniu,
ad4. Niski. Trudność w czytaniu, ciemne tło dominuje nad białym tekstem,
ad.5 Niski. Słaby kontrast. Niedostrzegalna różnica,
ad.6 Niski. Słaby kontrast. Niedostrzegalna różnica,
ad.7 Bardzo niski. Męczy wzrok,
ad.8 Bardzo niski. Męczy wzrok.

Reasumując - ciemne kolory są doskonałe dla tekstu, a chłodne dla tła.

1. Należy korzystać z powszechnych czcionek o rozmiarze nie mniejszym niż 10 punktów,
2. Należy unikać zagmatwanego tła,
3. Należy stosować czarny tekst na białym tle,
4. Należy unikać tekstu ruchomego, pisanego wersalikami lub zawartego w grafice.

Z góry narzucone przez agencje kroje, rozmiary i kolory czcionek nie oznaczają chęci ograniczenia woli Klienta. Stosowanie tego zabiegu wiąże się z chęcią podtrzymania pozytywnego wrażenia użytkownika serwisu i zatrzymania go jak najdłużej na przeglądanej pod-stronie.

Na sam koniec należy podkreślić najistotnijszą rzecz tego artykułu, o której warto pamiętać - użytkownik serwisu internetowego “odwiedza” go zazwyczaj w celu odnalezienia ściśle określonych informacji dostępnych w postaci tekstu. Napotykając tekst nieczytelny - kolorystyka męcząca oczy, rozmiar czcionki niedostosowany do grupy docelowej czy krój stosowany na potrzeby materiałów drukowanych, opuszcza serwis udostępniający niefunkcjonalny sposób prezentowania informacji i przechodzi do konkurencji.

Dlatego też dobra typografia to niezmiernie ważny element stanowiący jeden z fundamentów projektowania funkcjonalnych i dostępnych serwisów internetowych zorientowanych na użytkownika.

Więc? Make the good typo.