Hierarchia w typografii

Chociaż obrazki często wypierają słowa, teksty otaczają nas niemal z każdej strony. Jedne są przyjazne i zachęcają do lektury, inne z kolei tworzą wrażenie chaosu. To od typografii zależy, czy tekst będzie odstraszał, czy skutecznie komunikował najważniejszy przekaz marki.

Typografia to podstawa każdego dobrego projektu. Jeśli będziesz wiedział, jak używać różnych krojów pisma, operować kontrastem i kolorem, zarządzać wolną przestrzenią, zapewnisz właściwą „wagę” treści i łatwo skoncentrujesz na niej uwagę czytelnika.
Jak to zrobić?

Ogranicz ilość fontów

Dla początkujących grafików i typografów to często pokusa trudna do przezwyciężenia. Ogranicz fonty – przyjmij po prostu, że typograficzna hierarchia wymaga jasności i przejrzystości, a ten efekt osiągniesz z dwoma krojami fontu. Ponad trzy kroje pisma w jednym projekcie zagwarantują co najwyżej wizualny nieporządek i niepotrzebne rozpraszanie czytelnika.

Dobre pary tworzą neutralny font do korpusu tekstu i jeden bardziej wyszukany do nagłówków i innych elementów, które mają przyciągać uwagę czytelnika. Dodanie do tej mieszanki trzeciego kroju będzie rozpraszać i tworzyć wrażenie wizualnego bałaganu.

Kiedy wybierasz font, który ma być twoim „krojem chlebowym”, zdecyduj się na ten, który oferuje różne jego typy: nie tylko kursywę i pogrubienie, ale również semi-bold czy kursywę pogrubioną. Taki zestaw nie jest standardem dla wszystkich projektantów krojów, ale warto poświęcić więcej czasu na poszukiwania, niż dopuszczać się takich typograficznych „wpadek”, jak sztuczne pochylanie, rozciąganie czy dodawanie obrysu do fontu.

Uzupełnienie i kontrast

Krój szeryfowy i bezszeryfowy – to zestawienie jest prawdziwym typograficznym kanonem. Nieco bardziej złożony, interesujący i elegancki krój szeryfowy dobrze komponuje się z prostymi, przejrzystymi i nieco surowymi krojami bezszeryfowymi, a to z kolei tworzy czytelną i zrozumiałą hierarchię typografii na stronie.

Jeśli zdecydujesz, który krój z tej pary będzie twoim fontem do składu tekstu, a który do nagłówków, trzymaj się tego konsekwentnie. Uporządkowana hierarchia daje wrażenie stabilności, pewności i profesjonalizmu.

Aby dobrze zestawić ze sobą dwa fonty, potrzebujesz jednocześnie kontrastu i uzupełnienia. Dwa fonty bezszeryfowe zestawione ze sobą to ryzykowne posunięcie. Mogą się okazać zbyt podobne, więc zamiast czytelnej hierarchii wywołasz wrażenie, że coś z tym pismem jest nie tak. Z kolei „banalny” font szeryfowy i oryginalny krój bezszeryfowy nie będą się uzupełniały: jeden będzie dominował nad drugim, zbyt mocno przykuwając uwagę, zamiast zachęcać do lektury.

Tone of voice

Radosna bezszeryfowa pisanka i elegancki, poważny krój szeryfowy? Ozdobny dekoracyjny font i bezszeryfowy monospace? Można powiedzieć, że spełniają warunek zestawienia dwóch skontrastowanych krojów, ale w takich projektach brakuje czego innego: wyczucia tone of voice.

Krój pisma może również komunikować pewne wartości lub wywoływać określone wrażenia. Przyjrzyj się „osobowościom” krojów, które wybrałeś i zastanów, czy pasują do kontekstu twojej pracy, do zawartości strony, do przekazu, który chcesz stworzyć.

Strategia wielkości

Najbardziej oczywiste rozwiązanie, to większy i cięższy nagłówek z mniejszym i lżejszym tekstem głównym. A jeśli na stronie potrzebny ci tekst tej samej wielkości, a nagłówek będą otaczały inne elementy? Czytelnicy prawdopodobnie zupełnie go zignorują. W takim wypadku postaw na różnicę między nagłówkiem a jego otoczeniem: sprawdzi się wyróżnienie go wolną przestrzenią lub optycznie cięższym fontem.

Tu dochodzimy do typograficznej „pułapki”: wysokości pisma. Nie każdy font w małym stopniu będzie równie czytelny, a dwa różne fonty w tej samej wielkości 10 punktów mogą mieć zupełnie różną wysokość. Co więcej, jeśli zmniejszysz bardzo dekoracyjny font, stanie się on nieczytelny, a na stronie będzie wyglądał nieprofesjonalnie.

Z pomocą przychodzą rozbudowane rodziny danego kroju. Jeśli masz do dyspozycji standardowy krój oraz jego warianty (extra light, extra bold, display), masz też większe możliwości zestawienia zharmonizowanych ze sobą krojów o różnicach na tyle wyraźnych, aby uzyskać widoczny kontrast.

Kolory

Kolor to twój sprzymierzeniec – i kiedy chodzi ci o wyróżnienie informacji, i nadanie pismu własnego charakteru. Nie zapominaj jednak, że kolory nie tylko prowadzą czytelnika i wskazują mu najważniejsze partie tekstu, ale również mają wpływ na emocjonalny odbiór treści.

Możesz użyć kolorów do wzmocnienia i podkreślenia wrażenia oraz komunikatu, jaki niesie twój tekst. Czy wyobrażasz sobie nagłówki dzienników w wesołym, różowym kolorze? A logo portalu społecznościowego w ciężkich, ciemnych kolorach?

Przy projektowaniu weź także pod uwagę kolory tła i kolory innych elementów strony.

Jak wybrać font do strony internetowej

Pusta przestrzeń

Czyli najbardziej zwodniczy element – niedoceniany, lekceważony i kluczowy dla eleganckich, starannie wykonanych projektów.
Pusta przestrzeń to subtelne narzędzie do podkreślania tych komunikatów, które mają mówić do czytelnika. Projekt z przestrzenią „zapchaną” tekstem nie pozwala zauważyć typograficznej hierarchii, a większość odbiorców nawet nie spróbuje przeczytać bloku tekstu, choćbyś nawet bardzo uważnie przestrzegał pozostałych wskazówek.

Daj elementom wolną przestrzeń tak, aby łatwo było je od siebie odróżnić. Jeśli rozplanujesz ją mądrze, wolna przestrzeń będzie „prowadziła” wzrok czytelnika od nagłówku do tekstu, dodając projektowi potrzebnej harmonii.

3 podpowiedzi, jak stworzyć oryginalne infografiki

Zapisz

Zapisz