Podstawy projektowania: Typografia

Podstawy projektowania: Typografia

Była kompozycja, była barwa, hierarchia, więc wiecie… typografia! Na kanale pojawiły się już materiały dotyczące wyboru kroju pisma na stronę internetową, a także klasyfikacja krojów pism, którą polecam Wam później obejrzeć. Jak nudno ta „klasyfikacja” by nie brzmiała, jest szalenie ważna żebyście poznali podstawowe sposoby na kategoryzowanie krojów pism. To pomoże Wam nie tylko szukać fontów, do użytku w projektach, ale także ułatwi łączenie ich ze sobą.

Typografia będzie Wam towarzyszyła jeśli będziecie zajmować się grafiką reklamową, identyfikacją wizualną, projektowaniem stron i aplikacji. Wszędzie tam, gdzie pojawią się teksty w Waszych projektach, zahaczycie o zagadnienia z typografią związane.

Dzisiaj zacznijmy od kilku podstaw, które pomogą Wam pracować z tekstami. Oczywiście, możecie też obejrzeć materiał na ten temat na YouTube:

Krój pisma

Po pierwsze – myśląc o typografii musicie pomyśleć o kilku rzeczach. Pewnie pierwsze co przychodzi Wam na myśl, to wybór kroju pisma. Kroje mają różne style i charaktery i będziemy wybierać je względem celu, w jakim będziemy ich używać. Inny krój wybierzemy żeby złożyć długi, wydrukowany tekst w książce. Innego użyjemy do zapisania imion młodej pary na zaproszeniu ślubnym. Tu jeszcze raz polecę Wam materiał o klasyfikacji krojów, bo właśnie taka klasyfikacja, może pomóc Wam w zrozumieniu różnic między krojami.

Jeżeli dopiero zaczynacie, starajcie się ograniczać kroje pisma, z których korzystacie w jednym projekcie, np. do dwóch. To nie jest jakaś złota zasada i spokojnie możecie użyć ich więcej. Jednak im więcej krojów użyjecie, tym trudniej będzie Wam nad projektem zapanować, trudniej będzie uzyskać hierarchię wizualną i harmonię. Na początek możecie w ogóle używać tylko jednego kroju i próbować uzyskać nim planowane efekty.

Ale typografia nie ogranicza się jedynie do doboru odpowiedniego kroju pisma. Na co w takim razie jeszcze zwrócić uwagę, jeśli pracujemy z tekstem?

Kompozycja, skala, barwa

Litery, są takimi samymi znakami graficznymi jak każde inne. Dlatego nie traktujmy ich jako „jakiegoś tekstu, który się wrzuci na koniec jak skończymy projekt”. Teksty są pełnoprawnym elementem kompozycji i od samego początku musicie brać je pod uwagę.

Typografia w projekcie

A skoro są elementem kompozycji to rządzą się nimi takie same zasady jak innych elementów. Używamy skali aby wyróżnić jeden tekst od drugiego, nadajemy barwy i kontrasty, umieszczając obok siebie kroje w różnych stylach albo rożnej grubości. Jeżeli więc mieliśmy projekt, jakąś kompozycję składającą się z ilustracji i różnych elementów graficznych i nagle wrzucimy tekst, to w zasadzie od początku musimy sprawdzić, czy nie zaburzyliśmy hierarchii wizualnej. Być może coś trzeba będzie powiększyć, pomniejszyć, jednak przesunąć albo przyciemnić – żeby cała praca nabrała równowagi. Dotyczy to zarówno pojedynczych napisów, jak i całych bloków tekstu. Przy długich tekstach po prostu traktujemy akapity jako kształty, które znajdują się w naszym projekcie.

Siatki, gridy, układanie

Żeby ułatwić sobie pracę z tekstem, koniecznie zaprzyjaźnijcie się z gridami. O nich też już trochę opowiadałam na kanale (link). Siatki pozwalają Wam zachować porządek w projekcie. To ważne nie tylko od strony estetycznej, ale również samej użyteczności i płynności czytania.

Stosowanie siatek w projekcie

Pamiętajcie, że możecie korzystać z gotowych siatek, jak i tworzyć swoje, dopasowane do potrzeb projektu. Zadbajcie również o odpowiedniej wielkości marginesy między tekstem, a innymi elementami, tak by nie uzyskać wrazenia ściśnięcia i natłoku w kompozycji.

Skład tekstu

Długie teksty układamy w projekcie tak, by łatwiej się je czytało. Pamiętajcie też o wprowadzeniu odpowiedniej hierarchii wewnątrz tekstu. Jeżeli macie długie teksty i chcecie jakość wyróżnić poszczególne fragmenty to podzielcie ten tekst na krótsze akapity. Możecie też wydzielić nagłówki, a najważniejsze elementy w jakiś sposób wyeksponować np. pogrubiając tekst albo zaznaczając go innym kolorem.

Inspiracje typograficzne w magazynach

Świetnym sposobem na naukę takiej hierarchii wizualnej są drukowane magazyny. Wcale nie muszą to być tylko te dla projektantów. Następnym razem jak będziecie w księgarni albo kiosku, sięgnijcie po kilka gazet, magazynów i zwróćcie uwagę w jaki sposób są zbudowane.

Jaki jest cel?

Typografia służy do komunikacji – to z reguły nadrzędny cel tekstu – przekazać jakąś informację. Oczywiście elementy typograficzne mogą również spełniać funkcje dekoracyjne – warto jednak ustalić na początku po co używamy tekstu i w następnej kolejności dopasować efekty i kroje do tego celu. Dlatego zanim wybierzecie bardzo ozdobny krój pisma, który może okazać się nieczytelny dla naszego użytkownika, to zastanówcie się czy naprawdę chcecie mu to robić?

Zwłaszcza w przypadku stron internetowych i blogów, kiedy użytkownicy mają naprawdę bardzo duży wybór w tym, gdzie przeczytają artykuł. Warto zwrócić uwagę na takie najdrobniejsze szczegóły i zadbać o to, żeby nasze artykuły były dobrze wyeksponowane i dało się je czytać.

Dodatkowe materiały

Jak już wspomniałam, do tej pory powstało na kanale i blogu kilka materiałów dotyczących typografii. Być może któryś z nich wyda Wam się interesujący.

Lista linków poniżej:
➳ Nauka typografii: http://zebza.net/nauka-typografii
➳ Alfabet typograficzny: http://zebza.net/alfabet-typograficzny
➳ Rola typografii: http://zebza.net/typografia-dlaczego-jest-wazna
➳ Typografia na stronie: http://zebza.net/typografia-stronie-internetowej

PS. Pamiętajcie o konkursie, w którym do wygrania jest wejściówka na konferencję GrafConf 2018!

kanal na youtube