Jak Cię piszą, tak Cię widzą - wstęp do typografii

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.

Fonty mogą się różnić

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.

Różne grubości czcionki

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.

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.

Filtrowanie czcionek Google Fonts

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.

keyboard_arrow_up

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

keyboard_arrow_up