Okładka artykułu Jak łączyć fonty? — Typografia w sieci i nie tylko
Poradniki

Jak łączyć fonty?

Typografia w sieci i nie tylko

Zdjęcie autora Aleksandra Tulibacka
0

Dobór krojów, to jedna z kluczowych decyzji podczas rozpoczynania każdego procesu projektowego. Użyta typografia w znaczący sposób decyduje o odbiorze naszej strony, jej stylistyce i przede wszystkim – czytelności. Dobre i złe decyzje w tym zakresie mogą zmienić godziny pracy w sukces, albo sprawić, że będzie to czas stracony. W dzisiejszym artykule postanowiłam pochylić się nad podstawowymi zasadami łączenia krojów, pisać będę w szczególności o sieci, jednak zasady te są uniwersalne na tyle, że spokojnie możecie wykorzystać je także w innego typu projektach.

Kroje o różnej klasyfikacji

Pierwszą rzeczą o której należy pamiętać podczas dobierania do siebie krojów jest to, aby podchodziły one pod różne klasyfikacje. Innymi słowy, aby łączyć te szeryfowe z bezszeryfowymi, bezszeryfowe z ozdobnymi i temu podobnie, a unikać połączeń dwóch pism szeryfowych czy dwóch bezszeryfowych (chociaż to zrobić jest zdecydowanie łatwiej). Dzięki temu możliwe jest zachowanie odpowiedniego kontrastu, nie wprowadzamy także chaosu. Wybór takich połączeń jest bardzo bezpieczny, praktycznie każdy z klasycznych krojów szeryfowych będzie stosunkowo dobrze komponował się z każdym prostym krojem bezszeryfowym (w tym wypadku nie biorę pod uwagę tych geometrycznych, wąskich czy zawierających inne charakterystyczne cechy).

laczenie-krojow-szeryfowych-i-bezszeryfowych

Na przykładzie po lewej zobaczyć możecie jak dwa kroje szeryfowe (Footlight MT Light, Droid Serif) kłócą się ze sobą w ramach jednego bloku tekstu. Pomimo tego, że jest im do siebie bliżej niż tym z prawej strony, połączenie to wygląda nienaturalnie i budzi opory. Z drugiej strony mamy przykład wykorzystania fontu Museo Sans w nagłówku i Droid Serif w treści. Jak widać, wyglądają one o wiele lepiej, nie mamy także problemu z rozróżnieniem dwóch sekcji treści.

Oczywiście od każdej zasady istnieją wyjątki. Podczas pracy z tekstem musimy w pierwszej kolejności myśleć o czytelności, a zasady mieć z tyłu głowy, bardziej aby się kontrolować, niż zabraniać sobie czegoś konkretnego tylko dla sportu. W przypadku łączenia krojów szeryfowych może zajść taka konieczność na przykład wtedy, kiedy wymarzony przez nas krój nagłówkowy słabo wygląda przy małej wielkości znaków, a z jakichś powodów chcemy zachować na stronie jedynie ten rodzaj pisma. W takim wypadku połączyć je oczywiście możemy, warto jednak pamiętać o kilku zasadach, które opiszę w ostatnim punkcie, powyższy przykład zdecydowanie nie jest jednym z tych dobrych.

Tylko jeden wyrazisty font

Wyraziste kroje, podobnie jak wyraziści ludzie, to takie istoty obok których ciężko przejść obojętnie i z drugiej strony – trudno wytrzymać z nimi w dużych ilościach, zbyt często lub kilkoma na raz. Jeśli wiec decydujemy się na wykorzystanie trudnych (szczególnie w sieci) krojów ozdobnych, musimy pamiętać, aby robić to z wyjątkową rozwagą i ostrożnością. Praktycznie nigdy nie powinno się składać dłuższych akapitów pismem bardzo ozdobnym, a zachować je tylko dla wyróżniania wyjątkowych części (na przykład krótkich cytatów, haseł), nieszczególnie nadają się one nawet do powtarzających się nagłówków.

polaczenie-dwoch-krojow-ozdobnych-i-ozdobnego-z-bezszeryfowym

Pomijając już kwestie wizualne (bo z nimi można się kłócić, szczególnie jeśli omawia się to z klientem), w tym wypadku istotniejsza jest  czytelność, a właściwie jej brak. Jak widać na przykładzie powyżej – wykorzystanie kolejnego kroju ozdobnego w treści akapitu sprawiło, że jest on praktycznie nieczytelny, każdy z elementów przykuwa sporo uwagi, nie wiadomo więc na czym się skupić (niewiele pomogłoby także zastosowanie tego samego fontu ozdobnego). W sytuacji przeciwnej wykorzystałam tekst ozdobny jako krótki nagłówek dla akapitu złożonego krojem bezszeryfowym. Takie połączenie z jednej strony przyciąga uwagę, z drugiej znacząco poprawia czytelność całości.

Maksymalnie trzy kroje

Kolejna zasada została mi przedstawiona w dość młodym wieku, przez niezawodny spinacz z programu Power Point. Każdorazowo, podczas próby wykorzystania większej niż 3 ilości fontów informował on, że nie jest to za dobra decyzja. Co prawda nie argumentował specjalnie swojej wypowiedzi, jednak zawsze zakładałam, że jeśli ktoś umie doradzić w tworzeniu wykresów, na pewno zna się też na typografii.

Zasada ta świetnie sprawdza się w projektowaniu, szczególnie stron internetowych. Podczas tworzenia kolejnych realizacji staram się wykorzystywać maksymalnie dwie różne rodziny, dobrane według powyższych punktów, jednak czasem to zbyt mało. Teksty nagłówkowe powinny wyróżniać się, nie mogą być jednak zbyt ozdobne, aby zachowały swoją czytelność. Treści akapitowe powinny być złożone w taki sposób, aby ich odbiór nie był niczym zaburzony. Czego potrzeba nam więcej? Czasem po prostu “tego czegoś”, co może dać nam nieco bardziej bajerancki font.

polaczenie-trzech-krojow

Powyżej zobaczyć możecie dwa przykłady. Z pierwszego z nich, całkiem poprawnego połączenia fontów Roboto Slab i Roboto, nieco wieje nudą. W drugim do tych samych dodałam krój Coneria Script i nieco pobawiłam się typografią. Treść ta nabrała zupełnie innego klimatu – zawsze musimy więc pamiętać co dokładnie chcemy osiągnąć i na jakim odbiorze nam zależy.

Co jednak, jeśli dodany jeszcze jeden?

polaczenie-czterech-fontow-w-typografii

Połączenie z poprzedniego przykładu wygląda spokojnie i jest w moim odczuciu eleganckie. W momencie, kiedy do całości dodamy kolejny krój, zaczynamy tworzyć chaos, wszystkiego jest po prostu za wiele i ciężko skupić się na jednej rzeczy, bo nie wiemy co jest najistotniejsze.

Zasada ta jest bardzo ogólna i jeśli sytuacja naprawdę tego wymaga i jest to Wasza świadoma decyzja, nie powinniście bać się śmiało łączyć fontów. Sieć jest pełna niezwykle inspirujących stron internetowych i projektów graficznych bazujących głównie na bardzo zróżnicowanej typografii. Projekty te jednak łączy jedna, bardzo istotna zasada – wykorzystywane fonty w większości znacząco się od siebie różnią, a my jako odbiorcy możemy być pewni, że efekt jaki oglądamy był zamierzony.

Połączenia wewnątrz jednej rodziny

Jednym z prostych sposobów na zapewnienie sobie dobrze dobranej typografii bez konieczności długiego porównywania krojów jest korzystanie z takich, które stworzone zostały w ramach jednej rodziny. Przykładów tego typu rozwiązań jest sporo, nawet pośród tych darmowych. Mamy Roboto w wersji normalnej i slab, Source Sans Pro i jego odpowiednik – Source Serif Pro, wcześniej wspomnianą rodzinę Droid i wiele innych. Korzystanie z nich co prawda nie zawsze jest najbardziej efektowne, jeśli jednak nie czujecie się na siłach, aby dobierać je samodzielnie, to na pewno dobre rozwiązanie. Kroje te dopasowane są do siebie stylistycznie, ale także pod względem budowy, co jest bardzo istotne szczególnie w momencie, kiedy chcemy używać ich obok siebie w jednej linijce. Oprócz rozwiązań z różnych kategorii, można sięgnąć także po takie, które różnią się od siebie grubością – możemy mieć ich maksymalnie 9.

To jak łączyć kroje?

Powyżej przedstawiłam Wam kilka podstawowych zasad, które pomogą Wam ustrzec się od rażących błędów. Piękno dobrej typografii polega jednak na jej szczegółowości i dbałości o każdy detal i to właśnie o tym detalom poświęcę ostatnią część tego tekstu. Zasady te są istotniejsze, jeśli fonty będziemy wykorzystywać obok siebie (jako dopełnienia), niż wtedy, kiedy chcemy łączyć nagłówki z tekstm głównym, warto jednak pamiętać o nich zawsze, aby podejmować świadome decyzje.

Wysokość litery “x”

Wysokość litery “x” to jednak z podstawowych wartości opisująca fonty, jest ona istotna przede wszystkim dlatego, że to od niej zależy czytelność danego kroju w stosunku do jego wielkości w pikselach. Dobierając fonty na stronę internetową warto wziąć ten wskaźnik pod uwagę i dopasowywać takie, które mają podobną wysokość – tak aby różnice w wielkości fontów nie były niepotrzebnie duże.

porownanie-wysokosci-litery-x

Jak widać powyżej – kroje Roboto i Playfair Display mają podobną wysokość, więc jeśli ustalimy wielkość najmniejszego nagłówka na wartość 120% tekstu głównego, będzie on odpowiednio większy. Jeśli podobną zasadę zastosujemy dla drugiego przykładu, może zdarzyć się tak, że tekst nagłówka będzie wielkości tekstu głównego (wizualnie), chociaż wysokości będą oczywiście różne. Wartość wysokości litery “x” ma także duże znaczenie podczas doboru interlinii – fonty o wyższej wartości tego współczynnika potrzebują większej interlinii niż te o mniejszej.

Kontrast, nachylenie “pióra”, szeryfy, kształt liter

Te pozycje istotne są szczególnie w wypadku, kiedy chcemy połączyć ze sobą dwa kroje szeryfowe (które z zasady są modulowane i tworzone w przeróżnych stylistykach). W tym wypadku warto wziąć pod uwagę różnicę grubości pomiędzy najgrubszymi i najcieńszymi częściami litery, pochylenie części cienkich (pokazane na pierwszym przykładzie) oraz kształt liter (na przykład litery “a”) oraz szeryfów (pomimo tego, że wszystkie nazywane są szeryfowymi, mogą mieć one znacząco różny kształt, widoczny szczególnie przy powiększeniu.

ksztalt-szeryfow-i-pochylenie-piora

W moim odczuciu kroje szeryfowe powinno się łączyć w dwóch przypadkach – gdy są one zdecydowanie różne i chcemy to pokazać, albo wtedy, gdy próbujemy zasymulować, że są jednym krojem (jeśli w którymś z fontów wielkie lub małe litery nie wyglądają za dobrze).

Grubość linii

Kolejnym istotnym czynnikiem na który warto zwrócić uwagę jest grubość linii jakimi pisane są kroje. W tym wypadku istotne jest jedynie, aby były one identyczne, albo zdecydowanie różne. Złym wyborem są tylko dwa fonty w których delikatnie widoczna jest rozbieżność grubości.

Jeśli interesujecie się typografią, warto pobrać sobie mini słownik typograficzny ze strony krakowskiej ASP.

Dla leniwych

Tu już wszystko, co chciałam przekazać w dzisiejszym artykule, postanowiłam jednak zebrać także coś dla tych, którzy niekoniecznie mają chęci, czas, albo umiejętności, aby dobierać kroje samodzielnie. Są to gotowe pary fontów, do Waszych projektów. Minusem tych zestawień jest niestety to, że spora ich część nie posiada polskich znaków, warto więc stawiać na własne możliwości.

To może Cię zainteresować