Jak dobierać kroje pisma? Poradnik graficzny #1

Dobór krojów pisma (czyt. dobór do projektu i do siebie wzajemnie) to coś, co bardzo często decyduje o tym czy dany projekt jest dobry, czytelny i cieszący oko, i czy nie robi temu oku estetycznego „ałć”. Jest to także coś, co spędza sen z powiek osobom, które przymierzają się np. do stworzenia identyfikacji wizualnej dla swojej marki na własną rękę. „Na pomoc! Jak łączyć fonty???” to jedno z pytań, które często przewija się na forach czy facebookowych grupach.

Nie dziwi mnie to nic a nic. Zestawianie ze sobą krojów pisma nie jest wcale takie łatwe, za to z łatwością można źle dobranymi krojami zepsuć identyfikację graficzną czy jakikolwiek inny projekt tak, że nadaje się on tylko do kosza. Znasz takie projekty z 15 różnymi krojami, każdym z innej bajki, na które nie da się patrzeć dłużej niż 5 sekund, nie mówiąc już o czytaniu? To o nich mowa :)

Co zatem zrobić, żeby niczego nie zepsuć, tylko przeciwnie – upiększyć tekst tak, żeby aż chciało się go czytać?

Jest kilka zasad, które warto sobie wykuć na pamięć i kierować się nimi zawsze i wszędzie (no chyba, że jest się już świetnie obeznanym w typograficznej sztuce – wtedy świadome łamanie zasad jest jak najbardziej ok i często przynosi zaskakująco dobre efekty :) ).

No to jak łączyć fonty? :)

1) Zestawiaj kroje szeryfowe z bezszeryfowymi (czyli Serif z Sans Serif)

Brzmi groźnie, ale to bardzo proste. Kroje szeryfowe to te, które na końcach liter mają – jak lubię je nazywać – małe „dzyndzle”, a kroje bezszeryfowe to te „bezdzyndzlowe” :) Jeśli nie wiesz, co mam na myśli, zerknij na poniższą grafikę. Jeśli wiesz, to też możesz zerknąć :D

Jak łączyć fonty?

 

Zestaw Sans Serif + Serif jest o wiele bezpieczniejszy niż Serif + Serif lub Sans Serif + Sans Serif. A żeby było już super bezpiecznie, kroju bezszeryfowego użyj do nagłówków, a szeryfowego do pozostałej treści. Takie zestawienie powinno wyglądać co najmniej dobrze. Albo i jeszcze lepiej :)

2) Ostrożnie z krojami podobnymi do siebie

Mogłoby się wydawać, że jeśli kroje pisma są do siebie podobne, to w zestawieniu będą wyglądać dobrze. A tu psikus! Dobierając do siebie dwa podobne kroje (lub co gorsza więcej) łatwo o typograficzną katastrofę. Każdy krój ma bowiem swoje niuanse i niuansiki, i jeśli nie masz w tej kwestii super wyczucia, to możesz dobrać do siebie kroje pozornie podobne, jednak te ich niuansiki tak się ze sobą „pogryzą”, że z projektu nie wyjdzie nic dobrego. Nie ma co kusić losu :)

3) Jak to zwykle bywa w projektowaniu – w prostocie siła

Może i jest tak, że „w kupie raźniej”, jednak w typograficznym świecie to powiedzenie się nie sprawdza. Kroje pisma nie są zbyt towarzyskie i najlepiej czują się w duecie, ewentuaaaaaalnie w trio. Jeśli jednak masz jeszcze małe wyczucie w ich dobieraniu, nie kombinuj i postaw na dwa kroje – tyle wystarczy w 100%, żeby zaprojektować coś fajnego.

Ba! Nie mniej fajny (a czasem i fajniejszy) projekt można stworzyć, używając tylko i wyłącznie jednego kroju, za to w różnych wariantach: pogrubionym, normalnym czy cienkim. Są kroje, które mają naprawdę sporo wariantów i warto to wykorzystać, bo… to po prostu trudno zepsuć :)

4) Kroje pisma mają swoje nastroje (a nawet fochy i inne humorki :) )

Bywają smutne albo radosne, poważne albo wesołe, spokojne albo szalone. Jak to z nastrojami bywa – także w tym przypadku trzeba być bardzo ostrożnym i nie zestawiać ze sobą krojów pełnych powagi z wesołymi jak szczygieł na wiosnę czy tych zdystansowanych, a nawet sztywniackich z „luzakami”. Nigdy nie wiadomo czy nie wyjdzie z tego jakaś zadyma, której konsekwencją będzie typograficzny foch (czyt. kiepski projekt) ;)

5) Bądź konsekwentny

Dobrą praktyką jest dobranie jednego kroju pisma do nagłówków, a drugiego do pozostałej treści i konsekwentne trzymanie się tego.

Jeżeli używasz jednego kroju pisma, możesz użyć np. wariantu pogrubionego do nagłówków, a normalnego lub cienkiego do pozostałej treści. Po przeczytaniu punktu 1 z krojami szeryfowymi i bezszeryfowymi też już potrafisz sobie poradzić :)

6) Nie używaj kroju o nazwie Comic Sans

Po prostu :) Błagam i doradzam ze szczerego serca :)

Nie chce Ci się wkuwać na pamięć zasad, jak łączyć fonty? Na ratunek przychodzą strony z gotowcami :)

Ok, podstawowe zasady już znasz. Może być jednak i tak, że pomimo ich znajomości nadal dobranie krojów pisma na własną rękę przyprawia Cię o szybsze bicie serca, że coś pójdzie nie tak i nikt nie będzie chciał czytać Twoich tekstów. Jest i na to rada! Jaka? GOTOWCE :) Gotowe zestawy krojów pisma (zazwyczaj dwóch), w dodatku najczęściej przedstawione jako nagłówek + pozostała treść, nie trzeba więc bić się z myślami, co do czego użyć, tylko po prostu wybrać jakiś piękny zestaw i nie przejmować się niczym. Prawda, że fajnie? :)

Jak łączyć fonty?

 

Żeby jeszcze bardziej umilić Ci życie, przygotowałam dla Ciebie listę kilku najnajnajlepszych (moim zdaniem :) ) stron z takimi zestawieniami:

Możesz też próbować szczęścia na Pintereście:

A Ty masz jakieś problemy z dobieraniem krojów pisma do projektów? Robisz to według zasad czy „na czuja”? :) I czy chcesz się w tym temacie dowiedzieć czegoś jeszcze? Jeśli tak, to czego? :)

Uściski!

Natalia Bednarczyk

Podoba Ci się ten wpis? Rzuć okiem na podobne :)

16 komentarzy

  1. Ewa Majchrzyk-Hes

    15 czerwca 2016 o 17:33

    Ja mam problemy zwykle z ładnym ustawieniem liter. Zawsze coś mi nie siedzi i muszę trochę się na głowić, by było estetycznie i czytelnie. Bardzo lubię miękkie szeryfy, które nie wszędzie i nie zawsze pasują. Za to niemożebnie lubię wzornicze zabawy z literami i zdarzało mi się coś robić już nie raz z samych literek.
    Co do powyższego tekstu to może następnym razem coś o światłach? Ja sama raczej nie mam problemów z ich ustawianiem, ale czasem są takie fajne pomysły typograficzne, a tu źle ustawione światło razie jak wybity ząb z przodu.

    Odpowiedz
    • Natalia Bednarczyk

      17 czerwca 2016 o 22:04

      “źle ustawione światło razie jak wybity ząb z przodu” hahaha, świetne porównanie :D

      Pomysł zanotowany! :)

      Odpowiedz
  2. Aina liquiddreams.pl

    16 czerwca 2016 o 13:59

    Bardzo przydatny wpis! Dzięki!

    Odpowiedz
  3. Sygin

    16 czerwca 2016 o 14:46

    Bardzo przydatne. Muszę jeszcze raz przyjrzeć się fontom na moim blogu;) Do żelaznych zasad dodałabym także uwzględnienie, czy dany font posiada polskie znaki. Często zdarza mi się widzieć fajny nagłówek np. na blogu, zepsuty przez “ą” czy “ę”, które totalnie nie pasuje ;)

    Odpowiedz
  4. Ewa

    21 czerwca 2016 o 22:10

    Bardzo dziękuję za wpis Muszę się jeszcze wiele nauczyć Długa droga przede mną A jaki wpływ ma kolor pisma ? Pozdrawiam

    Odpowiedz
  5. bentomat

    13 lipca 2016 o 11:30

    Genialny wpis! Jestem totalnym amatorem w temacie projektowania stron ale mój biznes jeszcze raczkuje więc póki co nie mam funduszy na zatrudnienie profesjonalisty(tki :P) i sama dłubię tą swoją stronę. Ostatnio miałam problem z doborem fontów a tu taka miła niespodzianka na Twoim blogu :) Niestety font który wybrałam (Raleway), chociaż pięknie wygląda w Chromie, po otwarciu strony w Firefox lub IE wygląda jak kupa jeża :/ coś na kształt Times New Roman… może w jakimś kolejnym wpisie pojawi się taki wątek, a może podpowiesz coś tutaj – gdzie w ogóle szukać przyczyny…? (stronę projektuję na podstawie WP template “e-pix” / Slider Revolution)

    Odpowiedz
    • Natalia Bednarczyk

      17 lipca 2016 o 22:42

      Cieszę się, że wpis jest dla Ciebie przydatny :)))
      Co do Raleway – podasz mi adres swojej strony? Zajrzę i zobaczę, co może być nie tak :)

      Odpowiedz
      • bentomat

        18 lipca 2016 o 23:08

        wow!!! dziękuję :D
        https://katarzynalasota.com/
        Nie mam pojęcia na czym polega problem – na niektórych urządzeniach fonty wyświetlane są poprawnie, także w Firefox i IE, a na innych te przeglądarki pokazują jakiś dziwny font lub pogrubiają polskie znaki…

        Odpowiedz
  6. Dorota

    11 października 2016 o 12:31

    Ja mam inne pytanie – skąd mam wiedzieć do czego mogę danego fontu użyć? Czytam zawsze opisy licencji i często jest tam dopisek “do użytku prywatnego”. Ale czy użycie danego kroju na stronie www to nadal użytek niekomercyjny? Albo wizytówki. Niby prywatny projekt, ale ich celem jest hmm większa rozpoznawalność naszej marki (czyli potencjalnie większy zysk).
    Przyszło mi do głowy tylko każdorazowe kontaktowanie się z autorem kroju w sprawie użycia. Ale chyba są jakieś “wytyczne”. Czy mogłabyś przybliżyć ten temat?

    Odpowiedz
    • Natalia Bednarczyk

      11 października 2016 o 14:11

      Hej Dorota :) Najbezpieczniejszym podejściem jest według mnie takie, że jeśli dany projekt przyczynia się do jakichkolwiek korzyści finansowych (wlicza się w to także barter), to jest to już projekt komercyjny. Promocja marki, czyli np. strona www, to użytek komercyjny, chyba że dana marka nie zarabia ani grosza. Ja wychodzę nawet z założenia, że jeśli w danym momencie np. blog nic nie zarabia, ale bloger ma te zarobki w planach (albo w marzeniach :) ), to warto żeby już teraz używał tylko krojów do użytku komercyjnego. Może bowiem zdarzyć się np. taka sytuacja, że bloger przez wiele miesięcy nie zarabiał na blogu totalnie nic, a później napisał 1 wpis sponsorowany, za który dostał jakiś kosmetyk i to już jest komercyjność bloga, więc pojawia się problem z licencjami. Ja wychodzę z założenia, że użytek osobisty to takie typowo prywatne projekty, typu kartka świąteczna wysyłana rodzinie czy znajomym, scrapbooking (chyba że scrapbookingowe dzieła się sprzedaje), blog będący typowym pamiętnikiem itp. W projektach jakkolwiek związanych z marką polecałabym używanie krojów do użytku komercyjnego :)

      Odpowiedz
      • Dorota

        11 października 2016 o 18:51

        Prosto i na temat. Ogromne dzięki!

        Odpowiedz
  7. Matylda Jasmin

    23 listopada 2016 o 11:08

    Pani Blog to kopalnia wiedzy! Mam pytanie, czy poza generatorem fontów na canvie (chodzi mi o kombinacje) znajdę gdzieś narzędzie, które pozwoli mi sprawdzić jak wybrane fonty ze soobą współgrają?
    Cofam pytanie. Poniekąd;-) Znalazłam parę generatorów, choć nie w każdym są fony, które wybrałam to przy pomocy paru różnych powinnam zyskać jakieś rozeznanie.
    Pozdrawiam Matylda

    Odpowiedz
    • Natalia Bednarczyk

      24 listopada 2016 o 23:23

      Świetnie, mam nadzieję, że tych kilka generatorów wystarczy :) Pod koniec tego wpisu wrzuciłam linki do moich ulubionych stron z zestawami fontów, warto też do nich zerknąć, bo można tam znaleźć wiele pięknych kombinacji :)
      Pozdrawiam ciepło!

      Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Jeśli masz do mnie jakieś pytania na temat tego wpisu, napisz na natalia@pixelsfactory.pl :)