Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Typography
Webdesign

Poradnik dla początkujących jak łączyć fonty

by
Length:LongLanguages:
This post is part of a series called A-Z of Web Typography.
Getting the Hang of Hanging Punctuation
Start Using Quotation Marks the “Correct” Way

Polish (Polski) translation by Jędrzej Skrzypczak (you can also view the original English article)

Łączenie kroju fontów może być wyzwaniem. Wybór dwóch i większej ilości krojów które do siebie pasują to jedno - wybór dwóch i więcej które pasują oraz jednocześnie współpracują przy realizacji wszystkich celów jakie przed nimi stawiasz potrafi doprowadzić do zawrotu głowy. Dzięki temu poradnikowi dowiesz się podstawowych zasad rządzących światem doboru fontów dla sieci i nie tylko.

Na szczęście typografia ma długą historię. Zasady i konwencje rządzące wyborem fontów miały wystarczająco dużo czasu aby zakorzenić się w świadomości korzystających z nich, a w internecie znajduje się cała masa informacji które mogą ci pomóc. Jedyny problem to to, że przeszukując internet w poszukiwaniu wskazówek znajdziesz ich tak wiele, że aż niektóre zaprzeczają same sobą. Sprawdźmy, czy uda nam się wyjaśnić co nieco w tej kwestii.

Spójrzmy szybko jakie tematy omówmy w tym poradniku:

  • Twój cel
  • Jak dużo fontów powinienem użyć?
  • Kupić czy nie kupić?
  • Jaka jest natura mojej treści?
  • Jak osiągnąć prawidłowe dopasowanie?
  • Sztuka dopasowania 1: Zgoda
  • Sztuka dopasowania 2: Kontrast
  • Sztuka dopasowania 3: Konflikt

Twój cel

Co właściwie musisz zrobić?. Kiedy wybierasz kilka fontów, które mają współpracować ze sobą istotnym jest to aby stanowiły jedność i jednocześnie zapewniały różnorodność.

Ilu fontów powinienem używać?

Ilość fontów jakie umieścisz w swojej pracy zależy tylko od ciebie, tylko pamiętaj o treści jaką ów tekst wystylizowany danym krojem ma reprezentować. Fonty jak ludzie mają swoją osobowość. I jak to z ludźmi bywa, nie wszyscy pasują do siebie. Wyobraź sobie, że siedzisz przy stoliku z nowymi znajomymi w knajpie. Jedna osoba, która podrzuca tematy do rozmów albo często żartuje wystarczy. Gdyby w grupce znajomych takich dusz towarzystwa byłoby więcej atmosfera mogłaby być co najmniej dziwna.

Pamiętaj jednak, żeby zapewnić co minimum jeden motyw przewodni; nawiązując do przykładu z grupką znajomych - osiem osób które mają mało do powiedzenia na pewno wywoła niezręczne milczenie.

Niestety strony "Fusion Ads 2011 bundle" już nie ma, ale powyższa grafika jest świetnym przykładem użycia wielu pasujących do siebie oraz uzupełniających się nawzajem fontów.

Nie ma ogólnej zasady mówiącej ile dokładnie czcionek powinieneś lub nie powinieneś używać na swojej stronie internetowej. Zastosowanie wielu fontów aby osiągnąć swój cel może być trudne - dopasowanie fontów jest wyzwaniem same w sobie, ale jeżeli uda ci się to, osiągniesz efekt który będzie nie tylko wyjątkowo ozdobny ale również efektowny. Zawsze możesz pójść na skróty i wybrać font występujący w różnych wariantach i grubościach. U życie takiego fontu na pewno będzie prostsze, a efekt będzie zbliżony.

Kupić czy nie kupić?

Istnieje wiele usług pozwalających wykorzystać zaletę importowania poprzez @font-face: google fonts, fonts.com, generator zestawów fontów fontsquirrel, ale nie popadaj od razu w niechęć do płacenia za font jeżeli budżet projektu nie zakłada tego. Koszty licencji fontu na domenę mogą być różne, jednak istnieje kilka argumentów zachęcających do zakupu:

Jakość. Zasoby które zostają wykorzystane przy produkcji fontów komercyjnych zazwyczaj oznacza ich wysoką jakość. Oczywiście nie jest to sugestia, że twórcy stojący za ich darmowymi wersjami nie znają się na swojej robocie. Niestety często bywa tak, że darmowy font często posiada denerwujące wady - różnej grubości linie wchodzące w skład danej litery, niepasujące do siebie akcenty liter, czy nawet różny "kerning" - odległość pomiędzy literami.

Porównaj do siebie te dwa fonty:

Quicksand i Museo Sans Rounded

Kerning wykorzystany w Museo jest lepszy. Ten w QuickSand nie jest idealny (zwróć uwagę na litery 'o' oraz 'i' dla przykładu). Można by to oczywiście poprawić ale majsterkowanie z kerneringiem na stronach internetowych jest wysoce nieintuicyjne. Oczywiście narzędzia jak na przykład kern.js, skrypt który pozwala na operowanie kerneringiem na poziomie danej litery ale dla dużych tekstów jest to niepraktyczne.

"Wielka mi rzecz, przecież tego prawie nie widać!" - mógłbyś powiedzieć. Niestety diabeł tkwi w szczegółach.

Oryginalność. Kolejną zaletą jest szansa na wyróżnienie swojej pracy odrobiną oryginalności. Płacąc za font jest szansa, że zyskasz element unikalności.

Społeczność. Płacąc za font wspomagasz cały przemysł związany z projektowaniem ich. Oznacza to także lepsze fonty w przyszłości. Bardzo często szukamy sposobu na cięcie kosztów projektu. Niestety najczęściej pada na wybór darmowego kroju liter.

Jaka jest natura mojej treści?

Kiedy wybieramy font, bardzo ważne jest to by mieć na uwadze układ strony z jaką pracujemy. Może chodzi o prostą w swoim układzie stronę? Czy może strona zwiera wiele nagłówków i podtytułów? A może przypomina swoim układem gazetę zeskrótami artykułów lub cytatami? Jeżeli chcesz użyć wielu fontów postaraj się jasno określić ich rolę. Krótko mówiąc jeżeli użyjesz jednego stylu liter aby wyeksponować nagłówek, powinieneś konsekwentnie używać tego samego we wszystkich swoich nagłówkach.

Aby uprościć trochę zadanie wybierzemy teraz kilka współgrających ze sobą par fontów i wspólnie odpowiemy sobie na pytanie "dlaczego do siebie pasują?"

Jak mam prawidłowo łączyć fonty?

Mogłeś już to gdzieś usłyszeć lub przeczytać: sukces w łączeniu czcionek polega na zgodzie albo na kontraście ale na pewno nie na konflikcie. Oznacza to, że wybrany fonty mogą ze sobą współpracować na podstawie podobieństw w niektórych akcentach lub odwrotnie na zdecydowanej różnicy w stylu liter. Konflikt pomiędzy wybraną parą można osiągnąć na kilka sposobów. Jednym z nich jest zbytnie podobieństwo do siebie.

Prześledźmy te rodzaje dopasowania.

Sztuka dopasowania 1: Zgoda

Aby osiągnąć zgodność pomiędzy dwoma krojami, możemy zasugerować się cechą, które obydwie posiadają. Może ich kerning jest ten sam? Proporcje liter są zbliżone? Wysokość nasadki litery jest ta sama? Spójrz na przykład dostarczony przez Kerry'ego Scott Jenkins'a. Wyraźnie widać na co mamy zwracać uwagę przy szukaniu par.

Jednym ze sposobów łączenia fontów w pary jest używanie tych wywodzących się z jednej rodziny. W przypadku rodziny Droid, zaprojektowanej przez Steve'a Matteson'a dla użytku na urządzeniach z systemem Googla - Androidzie. Zawiera wiele rodzajów pogrubień i styli łącznie ze stylem szeryfowym i bez szeryfowym Może trochę trudno sobie to wyobrazić ale te dwa ostatnie style całkiem nieźle się uzupełniają: Jeden jako nagłówek a drugi jako treść.

Droid Serif i Droid Sans

W drugą stronę też jest nieźle.

Droid Sans i Droid Serif

Krój jest czysty i nowoczesny. Świetnie spisuje się jako font dla stron internetowych czy też urządzeń z małym wyświetlaczem zważywszy na "x-height".

X-height opisuje wysokość od podstawy litery aż do górnego zakończenia malej litery b”ez ogonków”. Najlepszym przykładem jest właśnie małe x, które nie zawiera zjazdu jak 'p' czy też wzlotu jak 'b'. Najbardziej czytelne są wysokie w x-height fonty tak jak np. Droid.

Dobór fontów spod ręki tego samego projektanta również może być dobrym podejściem w celu osiągnięcia harmonii. Zwróć uwagę na poniższy przykład. Szczególnie literę 'o'.

Cowboyslang i Supria Sans Condensed - Hannes von Döhren

Zwróć uwagę na jakość linii tych dwóch krojów. Na pierwszy rzut oka nie mają nic wspólnego, jednak dwa tak różne fonty całkiem nieźle współpracują ze sobą.

Bevan i Arapey Italic

Miękkie linie razem tez całkiem nieźle się prezentują:

Anodyne i Poulaire

Sztuka dopasowania 2: Kontrast

Kontrast fontów często pozwala uzyskać niezłe efekty. Ale czym właściwie mają się różnić?

  • Stylem: Rzuć okiem na dowolną stronę z krojami fontów a zobaczysz, że są podzielone na kategorie: Blackletter, Monospace, Script, Slab Serif i tak dalej. Fonty o różnych stylach będą na pewno kontrastować..
  • Rozmiarem: Duży rozmiar, mały rozmiar... co tu więcej powiedzieć?
  • Grubością: Różnorodność w grubości liter jest częstym sposobem na ustalenie wizualnej hierarchii pomiędzy tekstem. Hierarchii ustalonej dzięki kontrastowi
  • Formą: Rozważ zmianę proporcji liter czy ich stylu. Proporcje kroju. Różnicę wysokości wzlotów czy zjazdów a nawet kierunku ułożenia liter.
  • Kolorem: Nie będziemy się rozwodzić nad kolorem czcionek bo to kwestia indywidualnych upodobań, jednakże to tez dobry sposób na osiągnięcie kontrastu pomiędzy fontami.

Chyba najbardziej oczywistym przykładem kontrastu jest różnica między fontem szeryfowym a bez szeryfowym.

To chyba najbardziej klasyczne podejście: Wybrać czcionkę szeryfową dla nagłówka oraz bez szeryfową dla głównego tekstu. Albo na odwrót.

Georgia i Arial

Widzisz je w akcji? Rzuć okiem na boilerplate skeleton. Po pozbyciu się wszystkich wodotrysków duet Georgia i Arial całkiem nieźle się prezentują.

Trochę bardziej wyrafinowane połączenie:

PT Serif i PT Sans

Pamiętaj też, że dobór wielkości czcionki to świetne narzędzie do eksponowania znaczenia treści. Oczywistym jest że nagłówek będący tytułem tekstu powinien być większy ( choć nie jest to reguła) W ten sposób można ukazać dodatkowy przekaz wiadomości. Świetnym przykładem jest tytuł do serialu telewizyjnego who's the boss. Takie umiejętne operowanie wielkością liter potrafi zmienić nawet znaczenie zdania!

Lora Bold i Istok Web

Rozważmy teraz sytuację w której nie musimy się martwić duża ilością tekstu. Może mamy tylko dwa nagłówki które musimy wystylizować? (np. zwrot "Under Construction") Jako że tekstu jest mało możemy pokusić się o powiększenie fontu do całej szerokości ekranu jakim dysponujemy. Podejście te wydaje się dobre, jednak według miarki może to wywołać odwrotny skutek do oczekiwanego. To samo dotyczy też bogatych tekstów.

Czcionki "Condensed" czyli skondensowane potrafią całkiem dobrze przyciągnąć uwagę. Wynika to z faktu, że nie zajmują dużo miejsca poziomego, za to całkiem efektywnie wykorzystują tą poziomą.

Bebas Neue i Alex Brush

I kolejny przykład całkiem nieźle spełniający swoje zadnie:

Charakterystyczny styl Gerren'a Lamson'a i Simon'a Walker'a

A dla zainteresowanych nazwy użytych fontów:

I ponownie, kompletnie kontrastujące akcenty. Dzięki jasno określonej hierarchii za sprawą kolorów jasno ustalono rolę każdego kroju.

A jak wygląda połączenie dwóch prostych, bez szeryfowych fontów? Następny nagłówek (font Conqueror) jest krojem inline stworzonym głównie do tytułowania treści. Ponieważ jest to czcionka składająca się tylko z dużych liter warto trochę zwiększyć przestrzeń pomiędzy każdą literą tak jak w przykładzie poniżej.

Inline opisuje krój czcionek zawierających białą ( przezroczystą w tym przypadku) linie wewnątrz linii tworzących daną literę. - fonts.com

Niestety, czcionka nie jest dostępna (jeszcze) jako web font. A szkoda bo jest to moja ulubiona czcionka. Żeby osiągnąć taki efekt niestety na chwilę obecną trzeba by samemu zaprojektować.

AW Conqueror Inline i Gudea

Przyjrzyj się temu szeryfowcowi; minimum wysiłku, a zwraca na siebie uwagę.

Alpha Slab One i Mako

Szerokie „szeryfy” bardzo dobrze przyciągają uwagę, ale mogą być nieco przytłaczające jeżeli nie obchodzi się z nimi delikatnie. Coś jak słoń w składzie porcelany. Przykład powyżej pokazuje jak robić to dobrze wraz ze swoim trochę delikatniejszym kompanem. Na pierwszy rzut oka fonty te różnią się i to w stopniu znaczącym, ale po przyjrzeniu się można znaleźć kilka cech wspólnych.

Kilka czcionek jest tak genialnych, że nie można się na nich przejechać. Weźmy Buttermilk jako przykład; wyszukana, przyjazna i ciekawa. Pasuje z większością krojów:

Buttermilk i Georgia

W tym przykładzie towarzyszy jej Aller, subtelny sans-serif:

Buttermilk i Aller

Ten przykład jest moją osobistą preferencją. Czasami trzeba zagryźć zęby i wykonać coś pomimo reguł. I wiecie co? Moim zdaniem całkiem nieźle to się prezentuje.

Buttermilk i Eccentric

Sztuka dopasowania 3: Konflikt

Skoro mamy takie dobre efekty, odłóżmy na bok reguły. Zaniedbajmy szczegóły kroju czcionki i połączmy dwie które... może nie są pierwszymi lepszymi ale podobają się nam. Mają te same cechy więc mimo chodem powinny zgodne. W tym przykładzie wyglądają nawet podobnie..

Almendra i Stoke

Hmm... dlaczego nie współgrają ze sobą. Przecież biorąc pod uwagę kontrast powinny pasować idealnie.

Generalnie są różnego kroju: jedna to Blackletter a druga Roman serif.

Mają inne proporcje, jedna jest skondensowana z relatywnie dużym x-height druga wyższa z wyższymi wzlotami...

Są takie same jeżeli chodzi o szerokość liter i mają dziwne ostrogi na końcu liter.

Na tym polega problem. Przez posiadanie podobnych detali (szerokości, rozmiaru i ostróg) stają się za bardzo podobne. Posiadają podobne cechy co jest bardzo dobre ale również zawierają kilka podobnych detali które sprawiają wrażenie, że kłócą się ze sobą.

Krzywizny ostróg na przykład są zupełnie inne:

Ichosie już zupełnie:

Nawet forma liter w kroju Blackletter nadaje inny kierunek czcionki w przeciwieństwie do pionowej natury fontu Roman:

Te różnice może nie są przykładem przy innym dopasowaniu, ale w tym przypadku wygląda to zabawnie. Zupełnie jak by postawić celebrytę obok jej woskowego modelu Madame Toussauds. To nigdy nie jest miły widok.

Trudno znaleźć złoty środek. Najczęściej po dopasowaniu patrzysz na swoje dzieło i po prostu wiesz, że coś dobrze wygląda albo po prostu nie wygląda. Dobrym ruchem w tej drugiej sytuacji jest chwila zastanowienia. Dlaczego te dwa fonty nie pasują do siebie? To pomoże w wyborze następnego kandydata. Takie doświadczenie na pewno wyrobi w tobie wyczucie i pozwoli na szybsze dopasowanie w przyszłości. Trening czyni mistrza.

Ostatnia dobra rada

Istnieją filtry dopasowujące fonty na przykład poprzez usługę Google Web Font które wykonują całą robotę za ciebie. Fajnie.

Podsumowanie

Mam nadzieję, że sztuka dopasowania do siebie fontów dla ciebie nie będzie stanowiła już problemu. Krótko mówiąc: jeżeli istnieje jedyna słuszna reguła którą należy się kierować to brzmi ona tak: "Nigdy się nie dowiesz, dopóki sam nie spróbujesz!".

Bądź odkrywcą. Jako web deweloperzy mamy do dyspozycji rosnący zasób fontów do wykorzystania. Najlepiej poznać podstawy, później zostaje tylko eksperymentowanie. Jestem pewien, że nie raz zaskoczy cię co stworzysz.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.