Jednym z najważniejszych elementów, które wpływają na wygląd strony internetowej, jest odpowiednia typografia, czyli technika, której celem takie użycie tekstu, aby był on czytelny i atrakcyjny wizualnie. Typografia zakłada dobranie odpowiednich rozmiarów, stylów i rozmieszczenia czcionek/fontów. Jaki krój pisma wybrać, skoro mogą się one między sobą drastycznie różnić?
Szeryf w rodzinie czcionek
Projektanci fontów muszą zwracać uwagę na mnóstwo szczegółów. Główną ideą jest jednak wykonanie zestawu znaków o określonej stylistyce, którą można przypisać do jednego z typów:
- serif, który posiada charakterystyczne ogonki,
- sans-serif, który jest ich pozbawione,
- monospace, który posiada stałą szerokość liter,
- handwriting, który imituje tekst pisany ręcznie,
- display, którego założeniem jest dobrze wyglądać jako duży tytuł.
Nawet w obrębie jednego typu fonty mogą się od siebie bardzo różnić. To właśnie małe detale czynią je wyjątkowymi.
Taki gruby, taki chudy, może czcionką być
Zwykle jest tak, że konkretny krój pisma ma przygotowane przez autora różne grubości. Wybór jest ogromny: od najcieńszych Extra Light, poprzez klasyczne Regular, aż po najgrubsze Extra Black.
To, jakiej grubości użyć zależy nie tylko od miejsca na stronie, ale również od wielkości fontu. Cieńsze warianty bardzo tracą na atrakcyjności, gdy są zbyt małe, wówczas przeglądarki kiepsko radzą sobie z odpowiednim renderowaniem widoku, a linie zlewają się z tłem. Z kolei grube czcionki są niewygodne do czytania poza nagłówkami i tytułami.
Znaki specj@lne
Przy wyborze fontu na stronę koniecznie trzeba wziąć pod uwagę znaki, które chcemy na niej wykorzystać. Nawet popularna “małpa” może nie wystąpić wcale lub wyglądać źle w wybranym przez nas kroju pisma. Warto więc przetestować font przed użyciem go na stronie, tym bardziej że może okazać się, że zabraknie w nim polskich znaków.
Wyszukując zestaw znaków do użycia na stronie, trzeba wziąć pod uwagę obsługiwany przez nie język. Znaki pojawiające się w naszym języku należą do grupy Latin Extended.
Gdzie jest font?
Znalezienie odpowiedniego kroju pisma na stronę WWW nie stanowi obecnie żadnego problemu, o ile tylko jesteśmy w stanie wybrać jeden lub dwa spośród setek darmowych fontów. Najpopularniejszym i gorąco polecanym przez nas zbiorem bezpłatnych czcionek jest Google Fonts.
Strona zawiera nie tylko bardzo popularne fonty takie jak Roboto, Lato, czy Open Sans, ale i wiele różnych, często nietypowych. Za pomocą filtrów można w łatwy i wygodny sposób znaleźć dla siebie i strony odpowiedni krój. Przypuśćmy, że szukamy bezszeryfowego fontu o cienkich i szerokich znakach, który zawiera wszystkie polskie litery.
Bingo! Jura doskonale wpasowuje się w nasze przyjęte wymagania. Jak ją pobrać, aby użyć w programie graficznym? A jak na stronie? To temat na odrębny artykuł.
Od nadmiaru głowa boli
Wiemy już, gdzie i jak szukać fontów, nadszedł czas by poznać najważniejszą zasadę typografii - im mniej rodzajów stylów i wariantów czcionek tym lepiej. Najczęściej używa się dwóch głównych krojów pisma: jeden do tekstu, a drugi do nagłówków. W kwestii grubości i rozmiarów również warto zachować umiar. Najważniejsze jest to, aby tekst był czytelny, a jednocześnie jego wygląd zrozumiały, co jest bardzo istotne dla hierarchii nagłówków.
W doborze odpowiednich par warto zajrzeć na strony, które publikują dobrze wyglądające połączenia, np. na FontPair. Warto też inspirować się nagradzanymi w ramach Awwwards stronami z całego świata.
Font to dopiero początek...
Tych kilka elementów związanych z fontami/czcionkami/krojami pisma to dopiero wstęp do tego, jak przygotować odpowiednią typografię na stronę WWW. Trzeba pamiętać, że typografia jako element UX na pierwszym miejscu stawia zawsze użytkownika, dla którego korzystanie z naszej witryny musi być przyjemnością. Na sam koniec warto zaznaczyć, że strona internetowa to nie dokument tekstowy, a więc kieruje się własnymi zasadami, na przykład tym, że tekst wyjustowany na responsywnych stronach WWW utrudnia czytanie i zwykle jest błędem.