Jak zbudować skuteczną hierarchię typograficzną?

Skuteczne organizowanie treści w projekcie tak, aby była łatwa do zrozumienia i konsumpcji, to jedno z najważniejszych zadań projektanta. A ponieważ większość projektantów treści pracuje w oparciu o tekst, stworzenie skutecznej hierarchii typograficznej jest jedną z najważniejszych rzeczy, których projektant może się nauczyć.

Chociaż ćwiczenie i eksperymentowanie z tworzeniem skutecznej hierarchii jest najlepszym sposobem na rzeczywiste opanowanie umiejętności, istnieje szereg wskazówek, które projektanci powinni najpierw poznać, zanim wyruszą na własną rękę. W końcu nie da się skutecznie łamać zasad bez uprzedniego poznania ich.

Co to jest hierarchia typograficzna?

Początkujący projektanci czasami nie doceniają konieczności stosowania hierarchii typografii. Spójrz jednak na ten przykład:

Po obu stronach przekazywane są te same informacje, ale po lewej stronie nie można stwierdzić, czy istnieje nagłówek, podnagłówek i treść. Po prawej stronie od razu widać, że istnieje hierarchia dostarczanych informacji.

Hierarchia typograficzna pokazuje czytelnikowi, na jakich informacjach powinien się skoncentrować – co jest najważniejsze, a które po prostu wspierają główne punkty.

Istnieje wiele rzeczy, które składają się na hierarchię typograficzną w sieci. Obejmują one:

Rozmiar. Rozmiar jest na ogół pierwszą rzeczą, do której zwracają się nowi projektanci, próbując stworzyć hierarchię typograficzną. I nie bez powodu: jest to natychmiastowe, łatwe do zidentyfikowania przez czytelników. Większy = ważniejszy, mniejszy = mniej ważny. Ale rozmiar może stać się podporą, gdy istnieje tak wiele innych opcji tworzenia hierarchii.

Waga. Pogrubienie lub cieńsze kroje pisma to kolejny łatwo rozpoznawalny sposób tworzenia hierarchii, która jest łatwa do zidentyfikowania nawet przez osoby, które nie są projektantami.

Kolor. Kolor jest często pomijany jako sposób tworzenia hierarchii, ale to fantastyczna opcja. Nawet użycie jaśniejszych i ciemniejszych odcieni danego koloru może stworzyć wyraźniejszą hierarchię. Stworzenie większego kontrastu między czcionką a jej tłem może również zwiększyć hierarchię typograficzną.

Kontrast. Oprócz kontrastujących kolorów, kontrast między różnymi rozmiarami, wagami i stylami jest również kluczem do tworzenia hierarchii typograficznej. Różnica wielkości czcionki o jeden lub dwa punkty nie zapewni wystarczającego kontrastu, aby hierarchia była widoczna dla większości użytkowników. Zamiast tego projektanci powinni używać łatwo rozróżnialnych rozmiarów, wag i stylów, aby łatwo tworzyć kontrast między takimi rzeczami, jak nagłówki lub tekst podstawowy.

Sprawa. Chociaż pisanie tekstu głównego wielkimi literami nie jest ogólnie dobrym pomysłem z punktu widzenia czytelności, używanie wielkich liter w nagłówkach lub podtytułach może pomóc w rozróżnieniu różnych nagłówków lub innego typu.

Pozycja i wyrównanie. Pozycjonowanie nagłówków i podtytułów, wraz z innymi typami, które projektant chce wyróżnić, może mieć duży wpływ na to, gdzie typ mieści się w hierarchii. Na przykład typ centrujący ma tendencję do wyróżniania się. Ustawienie tekstu poza zwykłymi marginesami strony może również sprawić, że ten typ będzie wyróżniał się w hierarchii strony.

Jak stworzyć hierarchię typograficzną (i wizualnie zorganizować projekt)

Projektanci mają wiele możliwości tworzenia hierarchii typograficznej. Ale sama wiedza o tym, co składa się na tworzenie hierarchii, niekoniecznie pomoże projektantom w stworzeniu skutecznej hierarchii.

Jedną z pierwszych rzeczy do rozważenia jest to, ile poziomów hierarchii powinien mieć projekt. Zasadniczo każdy projekt powinien zawierać trzy poziomy hierarchii: nagłówek, podtytuł i treść. Od tego momentu projektant powinien rozważyć dodatkowe poziomy, które mogą być konieczne. Mogą to być podpisy, dodatkowe podtytuły, cytaty i metainformacje (dla takich rzeczy jak autorzy lub daty w artykule).

Stamtąd kluczowe jest, aby dowiedzieć się, jak rozróżnić różne części hierarchii. Powinno to być oczywiste, ale nagłówki powinny być bardziej widoczne niż podtytuły, które powinny być bardziej widoczne niż treść. Podpisy powinny generalnie być mniej widoczne niż treść, a cytaty powinny znajdować się gdzieś pomiędzy treścią a podtytułami.

Typ Rozmiar

Istnieją tradycyjne skale typograficzne, które pomagają projektantom rozpocząć pracę. Ale to tylko punkt wyjścia, a projektanci powinni swobodnie eksperymentować z różnymi wagami i stylami, jednocześnie odchodząc od tych tradycyjnych skal. Większość opiera swoją skalę na rozmiarze tekstu podstawowego i rozwija się od tego miejsca.

Klasyczna skala typograficzna z Elementów stylu typograficznego jest znana większości projektantów, ponieważ zwykle jest to wartość domyślna, którą oferuje większość programów do przetwarzania tekstu podczas wybierania rozmiarów czcionek. Skala to:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 i 72.

Istnieją dodatkowe przykłady skal typograficznych, które są zgodne z różnymi równaniami matematycznymi do obliczania rosnących rozmiarów.

Projektanci mają tendencję do domyślnego stosowania 12-punktowego rozmiaru tekstu podstawowego, ale zwiększenie tego do 14 lub 16 (lub nawet do 24) może prowadzić do zwiększenia czytelności w zależności od używanego kroju pisma. Na przykład osobista strona internetowa Jeffreya Zeldmana używa czcionki o rozmiarze 24 pikseli w treści tekstu, podczas gdy Vogue.com używa tekstu o rozmiarze 19 pikseli.

Jednak przed sfinalizowaniem rzeczywistej skali projektanci powinni upewnić się, że kroje pisma użyte w projekcie zostały sfinalizowane. Różne kroje pisma mogą wydawać się znacznie większe lub mniejsze, nawet jeśli technicznie mają „ten sam” rozmiar.

Wybór koordynujących krojów pisma

Tym, co często odróżnia „profesjonalny” projekt od bardziej amatorskich zabiegów, jest połączenie krojów pisma. Skuteczne łączenie krojów pisma jest po części instynktem, a po części nauką, ale istnieją pewne wytyczne, które projektanci mogą przestrzegać, aby łączyć kroje z różnych rodzin.

Po pierwsze, mieszanie szeryfów z bezszeryfowymi jest znacznie łatwiejsze niż łączenie dwóch szeryfów lub dwóch bezszeryfowych. Ale to nie jest tak proste, jak po prostu złapanie dowolnej szeryfowej i bezszeryfowej i złożenie ich razem w projekt.

Rozważ kontekst, w jakim będą używane kroje pisma. Na przykład, jeśli projekt ma być lekki i zabawny, upewnij się, że kroje pisma pasują do tego nastroju. Jeśli projekt jest poważniejszy, kroje pisma powinny to odzwierciedlać. Innymi słowy, nastrój niezależnie od łączonych krojów pisma powinien pasować.

Projektanci powinni również wykorzystywać kontrast na swoją korzyść. Łączenie cienkich i grubych krojów pisma często działa lepiej niż łączenie dwóch o bardzo podobnej wadze.

Szukaj krojów pisma o podobnych wysokościach x (odległość między linią bazową a średnią linią małych liter w kroju pisma). Pomaga to zapobiegać konfliktom między krojami pisma. Inne rzeczy, które pomagają zapobiegać konfliktom, to podobny kerning i kształty znaków. Nie należy łączyć krojów pisma o bardzo okrągłych kształtach z bardziej kwadratowymi krojami.

Chociaż wskazówki mogą być pomocne w tworzeniu kombinacji krojów pisma, nic nie zastąpi eksperymentowania i praktyki. Projektanci powinni spędzać czas na eksperymentowaniu z krojami pisma i ćwiczyć łączenie ich tak często, jak to możliwe. Znalezienie kilku zastępczych kombinacji krojów pisma, które mogą działać w różnych kontekstach, jest również pomocne w przypadku projektów, w których dostępny budżet i zasoby nie pozwalają na mnóstwo prób i błędów.

Mając te wytyczne pod ręką, projektanci mogą postępować zgodnie z czteroetapowym procesem, który określa źródło typografii internetowej Better Web Type w celu tworzenia skutecznych kombinacji:

1. Znajdź czcionkę kotwicy dla głównego tekstu body
2. Znajdź kilka dodatkowych czcionek dla możliwych kombinacji
3. Oceń kombinacje
4. Wyeliminuj/wybierz kombinacje czcionek

Dodatkowe uwagi

Eksperymentowanie z różnymi stylami i wagami po wybraniu ostatecznych krojów pisma może stworzyć dodatkowe poziomy hierarchii bez konieczności tworzenia głównych nagłówków o dużych rozmiarach. Utrzymanie krojów pisma w przybliżeniu tego samego rozmiaru, ale pogrubienie ważniejszego nagłówka, a mniej ważnego kursywą tworzy określoną hierarchię wizualną.

To samo można zrobić z kolorem. Podtytuł w kolorze akcentującym będzie wyróżniał się bardziej niż podtytuł w tym samym kolorze co tekst główny. Projektanci powinni bawić się kolorem w swoich podtytułach, aby wyróżnić ważniejszy tekst bez polegania wyłącznie na rozmiarze czcionki.

Odstępy można również wykorzystać do oddzielenia ważnych nagłówków i podtytułów. Utworzenie większej ilości miejsca wokół nagłówków, aby wyróżniały się na tle towarzyszącego tekstu podstawowego, czyni je jeszcze bardziej widocznymi. Natomiast podtytuły, które są rozmieszczone tak samo jak tekst główny, są mniej ważne.

Do tworzenia hierarchii można wykorzystać nawet odstępy między znakami. Odstępy między znakami mogą sprawić, że dany wiersz będzie bardziej widoczny. Jest to szczególnie skuteczne w połączeniu z wielkimi literami. Projektanci powinni jednak uważać, aby nie przesadzić, ponieważ może to również wyglądać amatorsko, jeśli jest nadużywane.

Wniosek

Eksperymentowanie i praktyka to najlepsze sposoby na opanowanie hierarchii typograficznej, ale zapoznanie się z tymi wskazówkami pomoże projektantom rozpocząć właściwe działania. Pierwszym krokiem jest poznanie wpływu rozmiaru, koloru, odstępów, wagi i innych czynników na efektywną hierarchię.

Gdy te podstawy zostaną ustalone w umyśle projektanta (i praktyce), mogą oni bardziej intuicyjnie tworzyć hierarchie wizualne, które w razie potrzeby przestrzegają lub łamią „zasady”, aby tworzyć unikalne projekty, które są inspirujące i zachwycające 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
• Podstawy projektowania — przewodnik po hierarchii wizualnej (z infografiką)
• Style krojów pisma do projektowania stron internetowych i druku
• Popraw swój UX dzięki przejrzystej hierarchii wizualnej