Mini samouczek — przewodnik po kombinacjach czcionek

„Typografia to dwuwymiarowa architektura, oparta na doświadczeniu i wyobraźni oraz kierująca się zasadami i czytelnością”. — Herman Zapf

Jeszcze kilka lat temu projektanci byli poważnie ograniczeni w wyborze czcionek internetowych. Opcje były na ogół ograniczone do czcionek systemowych i miały nadzieję, że odwiedzający witrynę zainstalowali te czcionki.

Chociaż czcionki internetowe były technicznie możliwe pod koniec lat 90., nie stały się powszechnie używane aż do 2009 r., kiedy format WOFF stał się dostępny i stał się częścią otwartych standardów W3C. To otworzyło przed projektantami zupełnie nowy świat możliwości typograficznych.

I na tym polega dylemat: teraz, gdy istnieją dosłownie tysiące krojów pisma dostępnych dla projektantów stron internetowych, jak stworzyć kombinacje czcionek, które dobrze ze sobą współpracują i wspierają prezentowaną treść?

Dobra typografia i korzystanie z najlepszych kombinacji czcionek wyróżniają projekt spośród jego rówieśników i zapewniają przyjemniejsze wrażenia użytkownika. Skuteczne kombinacje typów zwiększają wizualną atrakcyjność projektu, dzięki czemu użytkownik może dłużej pozostać na stronie.

Natomiast zły typ może sprawić, że treść będzie trudniejsza do przeczytania i mniej przyjemna dla osoby czytającej.

Nauka efektywnego łączenia czcionek to ważny krok w edukacji projektanta, który należy stale udoskonalać i ulepszać. Projektanci, którzy opanowali typografię, potrafią ulepszyć nawet najprostszy projekt. Najlepszym miejscem do rozpoczęcia jest przestrzeganie podstawowych wskazówek typograficznych dotyczących łączenia czcionek. Po opanowaniu tych „zasad” projektanci mogą rozwijać się i eksperymentować, aby tworzyć kombinacje typograficzne, które naginają lub łamią te zasady.

Charakterystyka typu

Przy setkach tysięcy dostępnych krojów, próba ustalenia, od czego zacząć, może być przytłaczająca, nawet dla zaawansowanych projektantów. Zrozumienie cech różnych krojów pisma jest pierwszym krokiem do nauczenia się, jak skutecznie je łączyć.

Poznanie, jak te cechy są ze sobą powiązane, pozwala projektantom na łączenie czcionek z pewnością i eksperymentowanie z nieoczekiwanymi kombinacjami. Eksperymenty i praktyka to miejsce, w którym projektanci mogą naprawdę doskonalić swoje umiejętności łączenia czcionek i tworzyć projekty, które odróżniają ich od innych ekspertów. Czasami słuchanie ich intuicji jest najlepszym sposobem na stworzenie pary krojów, która naprawdę błyszczy.

Klasyfikacja

Klasyfikacja krojów pisma jest jednym z najbardziej podstawowych pojęć, które należy zrozumieć. Istnieją cztery podstawowe klasyfikacje, których należy się nauczyć: szeryfowa, bezszeryfowa, pismo i dekoracyjne.

Kroje pisma szeryfowego i bezszeryfowego nadają się zarówno do nagłówków, jak i tekstu podstawowego. Skrypty (czasami nazywane również czcionkami pisma ręcznego) i ozdobne kroje pisma są jednak ogólnie akceptowane tylko w nagłówkach i tytułach lub innych małych fragmentach tekstu.

Czcionki szeryfowe są uważane za bardziej czytelne w przypadku długich fragmentów tekstu (takich jak tekst podstawowy), szczególnie w projektach drukowanych, w których funkcja szeryfowa może pomóc poprowadzić wzrok czytelnika wzdłuż każdej linii. Ale kroje pisma bezszeryfowego mogą być również bardzo czytelne i wyróżniać się w mniejszych rozmiarach (takich jak te używane do podpisów lub metainformacji).

Bezszeryfowe są również bardziej popularne w Internecie i powszechnie uważa się, że są bardziej czytelne niż kroje szeryfowe. Częściowo wynika to z początków komputerów, kiedy ekrany o niższej rozdzielczości powodowały, że czcionki szeryfowe były nieco rozmyte, w zależności od rozmiaru. W przypadku nowoczesnych ekranów HD i Retina jest to mniejszy problem, a czcionki szeryfowe i bezszeryfowe mogą być skutecznie używane.

Łączenie krojów pisma z różnych klasyfikacji jest często prostsze niż łączenie w ramach klasyfikacji, ponieważ istnieje poziom kontrastu między już wbudowanymi czcionkami. To powiedziawszy, możliwe jest również efektywne łączenie krojów pisma w tej samej klasie, o ile brane są pod uwagę inne cechy.

Waga

Waga odnosi się do grubości czcionki w kroju pisma. Cienkie, regularne, półgrube, pogrubione i czarne to przykłady wag.

Kontrast między gramaturami jest niezbędny przy łączeniu krojów pisma. Łączenie bardzo grubej czcionki z bardzo jasną często wydaje się niezrównoważone. Ale łączenie krojów pisma o tej samej gramaturze może być również wyzwaniem.

Zamiast tego, zwłaszcza gdy zaczynasz od kombinacji czcionek, najłatwiej jest znaleźć kroje, które mają zauważalne, ale nie skrajne różnice w wadze. Projektanci mogą stamtąd rozgałęziać się na bardziej widoczne wyróżnienia.

Styl

Chociaż styl jest czasami używany zamiennie z klasyfikacją, w tym przypadku odnosi się do czcionki normalnej , kursywy lub ukośnej .

Łącząc czcionki, w których używane są różne style, ważne jest, aby upewnić się, że style kursywy lub ukośnego współgrają ze sobą tak samo dobrze, jak styl normalny. Czasami style kursywy znacznie różnią się od normalnego stylu tej samej czcionki, co może spowodować, że czcionki, które w innym przypadku dobrze by ze sobą współpracowały, nagle się ze sobą zderzą.

Kontrast

Kontrast w łączeniu krojów pisma może być trudny. Zbyt mały kontrast może powodować konflikty czcionek, a zbyt duży kontrast może spowodować to samo.

Kontrast podczas łączenia czcionek odnosi się do dowolnego sposobu, w jaki czcionki się różnią, w tym klasyfikacji, grubości, stylu i struktury.

Na początku najlepiej skupić się na kontraście między tylko jedną lub dwiema z tych rzeczy, jednocześnie upewniając się, że inne są bardzo podobne. Waga to jeden z najłatwiejszych sposobów na uzyskanie kontrastu między czcionkami. Jak już wspomniano, zbyt duży kontrast w wadze może być równie niepokojący, jak zbyt mały.

Innym łatwym sposobem na stworzenie kontrastu jest połączenie różnych klasyfikacji czcionek, takich jak bezszeryfowe i szeryfowe lub pismo i szeryfowe itp. W takich przypadkach niezbędne jest upewnienie się, że nastrój obu czcionek jest taki sam.

Na przykład połączenie zwykłej czcionki, takiej jak Amatic SC, z bardzo formalną czcionką, taką jak Baskerville, będzie raczej kolidować niż kontrastować. Ale połączenie czegoś takiego jak Amatic SC z inną zwykłą czcionką, taką jak Josefin Slab, działa pięknie.

X-wysokość

X-height odnosi się do wysokości poszczególnych znaków w kroju pisma, w szczególności małej litery x . Kroje pisma o podobnych wysokościach x będą ze sobą współpracować lepiej niż te o różnych wysokościach x.

Struktura

Podstawowa struktura kroju pisma obejmuje wszystkie jego cechy, a także takie rzeczy, jak podstawowy kształt znaków i ich odstępy. Tworzenie kontrastu ze strukturą czcionek to uznana metoda łączenia czcionek. Jednak dobrym pomysłem jest wybranie czcionek, które mają przynajmniej kilka wspólnych elementów strukturalnych (takich jak wysokość x lub waga „normalnego” stylu), a nie te, które są szalenie różne.

Nastrój

Nastrój to jeden z bardziej subiektywnych obszarów typografii. Odnosi się do tego, jak formalny lub nieformalny jest krój pisma, a także czy jest zabawny, kobiecy, męski, swobodny, poważny itp.

Na przykład Comic Sans to niezwykle nieformalna czcionka, której nie można używać w większości sytuacji. Z drugiej strony Bickham Script jest bardzo formalny, ale sprawia złe wrażenie w przypadku korespondencji biznesowej.

Podczas łączenia czcionek ważne jest, aby znaleźć kroje pisma o podobnych nastrojach. Połączenie zabawnej czcionki z bardzo poważną będzie szokować.

Dekoracja, kolor i tekstura

Te rzeczy nie są nieodłącznymi cechami krojów pisma, ale są przydatne przy łączeniu czcionek. Ujednolicenie (lub stworzenie większego kontrastu) poprzez kolor, dekorację (np. podkreślenie) i teksturę może być bardzo skuteczną techniką.

Efektywne kombinacje czcionek

Istnieje pozornie nieskończona liczba witryn z piękną typografią, wraz z równie nieskończoną liczbą witryn o złym lub po prostu słabym typie. Studiowanie witryn, które robią to dobrze, to świetny sposób na nauczenie się, jak łączyć czcionki, gdy projektanci zaczynają lub próbują przenieść swoje umiejętności na wyższy poziom.

Work Notes łączy krój pisma szeryfowego Adobe Caslon Pro z bezszeryfową Interstate, aby stworzyć kombinację czcionek, która jest ukłonem w stronę tradycji bez poczucia nieaktualności lub staromodności. Łączenie różnych wag i stylów zwiększa atrakcyjność wizualną i sprawia, że ​​typografia wydaje się bardziej złożona, niż jest w rzeczywistości.

Adjuvant Capital używa nowoczesnego, nieco kapryśnego kroju szeryfowego Orpheus Pro w połączeniu z nowoczesnym krojem pisma GT America bezszeryfowego. Dla firmy świadczącej usługi finansowe jest to bardzo nowoczesny wybór, ale dobrze pasuje do ich misji społecznie odpowiedzialnego globalnego inwestowania.

Bloomscape wykorzystuje swobodny krój pisma Morion wraz z bezszeryfowym Raisonne, aby stworzyć uderzający, nowoczesny projekt typograficzny. Morion niekoniecznie byłby oczywistym wyborem dla typu ciała ze względu na bardziej dekoracyjne formy liter, ale gdy jest używany w odpowiednim rozmiarze (tak jak tutaj), świetnie nadaje się do krótszych fragmentów tekstu. Raisonne ma podobnie ozdobne formy literowe, dzięki czemu te dwie czcionki internetowe pięknie ze sobą współpracują.

Vogue używa nowoczesnego, eleganckiego kroju pisma Savoy szeryfowego w połączeniu z groteskowym bezszeryfowym Franklin Gothic, który został pierwotnie zaprojektowany w 1902 roku. Połączenie tych dwóch tworzy ekskluzywny projekt kroju, który przemawia do kulturalnych odbiorców, do których adresowany jest magazyn.

Południowy magazyn lifestylowy Garden & Gun ma na swojej stronie bardziej złożoną typografię niż inne zawarte tutaj, co naprawdę ją wyróżnia. Witryna używa czterech głównych krojów pisma: Główne tytuły artykułów to serif Domaine Display; treść i niektóre nagłówki na stronie głównej to czcionka szeryfowa Domaine Text; metainformacje, nawigacja i nagłówki sekcji używają bezszeryfowego Avenir Next; a dodatkowe nagłówki sekcji na stronie głównej znajdują się w Domaine Sans Display.

Korzystanie z wielu czcionek z większej rodziny czcionek to wypróbowany i skuteczny sposób tworzenia złożonego projektu typograficznego, który doskonale współgra. Dodanie Avenir Next rozbija rzeczy i dodaje dodatkowe zainteresowanie wizualne.

Twój wybór kroju pisma jest równie ważny, jak to, co z nim zrobisz.

— Bonnie Siegler

Wniosek

Efektowne kombinacje czcionek to znak rozpoznawczy dobrego projektu. Projektanci muszą opanować tę umiejętność, jeśli chcą tworzyć wyjątkowe projekty, które odróżniają ich od współczesnych.

Potraktuj zawarte tutaj wskazówki jako punkty wyjścia do zbadania, jak skutecznie łączyć tekst. Solidna podstawa pozwala na bardziej efektywne eksperymentowanie, bez spędzania godzin na kompletnie nieodpowiednich kombinacjach. Stąd projektanci mogą ćwiczyć tworzenie własnego stylu i metod efektywnego łączenia czcionek, odbiegając w razie potrzeby od wytycznych z większą pewnością, że ich finalny produkt zachwyci użytkowników.

Dalsza lektura na blogu Toptal Design:

• Projektowanie pod kątem czytelności — przewodnik po typografii internetowej (z infografiką)
• Zrozumienie niuansów klasyfikacji krojów pisma
• Analiza zawiłości anatomii typografii (z infografiką)
• Jak zbudować skuteczną hierarchię typograficzną?
• Style krojów pisma do projektowania stron internetowych i druku