Zaloguj się

Zarejestruj się

Panel Webmastera

Autor: Paweł Krzywina

Hierarchia typograficzna, czyli kolejne poziomy dobrego projektu. Jak działa hierarchia w typografii?

Wiele razy słyszeliście słowo 'hierarchia' i 'typografia', ale czy zastanawialiście się, co te słowa oznaczają, kiedy zestawimy je razem? Jednym z najważniejszych elementów każdego projektu, na które ludzie zwracają uwagę, jest druk (czy czcionka). Niezależnie czy mamy do czynienia z ulotką, plakatem, okładką czy stroną internetową, zawarta w nich forma tekstu musi być przejrzysta i czytelna, a także powinna pokierować ludzi przez projekt, od najważniejszych jego elementów, po te najmniejsze. To w skrócie wyjaśnia istotę hierarchii typograficznej, która równoważy formę i funkcjonalność naszego projektu.

Jeżeli nie jesteście obeznani z tytułowym terminem, to i tak gwarantujemy, że znacie go w praktyce i widujecie zapewne każdego dnia. Najłatwiej będzie, jeżeli weźmiecie do ręki dowolną gazetę czy wejdziecie w artykuł na stronie internetowej. Mamy tam zazwyczaj zachowany określony schemat - tytuł, wstęp i pozostała część tekstu. Jest to klasyczny przykład zachowania zasady trzech poziomów hierarchii typograficznej, która występuje zarówno w druku, jak i projektach online. Aby opanować tę sztukę w dobrym stopniu, należy zrozumieć jej istotę i poznać kolejne elementy.

 

Czym dokładnie jest hierarchia typograficzna?

 

Hierarchia wizualna równoważy formę i funkcjonalność w projekcie, a hierarchia typograficzna jest jedną z najłatwiejszych i najbardziej efektywnych jej form. W największym skrócie, to sposób projektowania treści tekstowych z naciskiem na najwyższy poziom czytelności. Charakteryzuje się ona organizacją tekstu z podziałem na poziomy ważności, co pozwala czytelnikom nie tylko łatwo podążać za treścią, ale też szybko wyszukać interesujące ich kwestie.

 

Trzy poziomy hierarchii typograficznej

 

Hierarchia typograficzna tworzy kontrast między elementami. Bez niej praktycznie każda litera i każde zdanie wyglądałyby tak samo, co uniemożliwiałoby czytanie. Użytkownicy nie wiedzieliby, gdzie jest początek, a gdzie koniec, co jest najważniejsze i na co jeszcze powinni zwrócić uwagę. Hierarchia porządkuje litery i słowa, a także wyróżnia je, dzięki czemu czytelnik może łatwiej odnaleźć to, czego szuka.

Zaleca się, by hierarchia typograficzna zawierała co najmniej trzy poziomy, które z powodzeniem przełożymy na większość naszych projektów:

  • Poziom #1 – najbardziej zauważalny i najczęściej największy krój tekstu. Pierwszy poziom dotyczy najważniejszych treści czy informacji, przez co powinniśmy z niego korzystać stosunkowo rzadko. Zwykle zarezerwowany jest on dla tytułów, haseł czy innych elementów przyciągających użytkowników do naszego projektu.

  • Poziom #2 – jest mniej zauważalny niż poziom pierwszy, ale wyróżnia się na tle głównej treści. W praktyce pomaga zorganizować nasz projekt w sekcje lub w grupy informacji. Obejmuje on pozostałe elementy, które rozszerzają informacje odnośnie głównego tematu.

  • Poziom #3 – poziom ten jest podstawowym tekstem, za pomocą którego wyjaśniamy całą istotę naszego projektu. Umieszczamy tu cały artykuł, notkę czy opis, które mają za zadanie zaangażować użytkownika w cały nasz tekst. Często jest to najmniejszy z naszych krojów, jednak nadal musi być on wystarczająco wyraźny i czytelny dla ludzi.

  • Inne #4 - Niższe poziomy hierarchii mogą być tworzone przez sporadyczne stosowanie wyróżnień dotyczących podstawowego tekstu. Efekty tj. kursywa, kolor, pogrubienie, podkreślenie działają najlepiej, gdy mają ten sam krój i rozmiar czcionki, co tekst podstawowy. Zabiegi te są używane oszczędnie i obejmują maksymalnie kilka słów po kolei.

typografia na stronie www

Źródło: BBC

 

Zacznij teraz 

Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste

W jaki sposób połączyć czcionkę z hierarchią?

Z hierarchii i typografii korzystacie niemal we wszystkich swoich dziełach, często nawet nie zdając sobie z tego sprawy. Istnieje wiele sposobów na wizualne uporządkowanie i określenie treści, a do najpopularniejszych z nich należą:

  • rodzaj czcionki - niektóre kroje czcionek mogą wydawać się większe i szybciej przyciągać uwagę od innych. Użycie innych typów czcionek, przy kolejnych poziomach hierarchii, może ponadto uatrakcyjnić je wizualnie;

  • rozmiar - ludzkie oko w pierwszej kolejności skupia się na największym elemencie, a potem przechodzi do kolejnych, mniejszych. Dzięki trzem poziomom hierarchii typograficznej, największa czcionka pojawia się najczęściej na górze projektu. Kierowanie użytkowników od góry do dołu jest najpopularniejszą metodą nawigacji;

  • pogrubienie i pochylenie - obie te techniki pomagają wyróżnić czy odizolować dany fragment od reszty tekstu;

  • kolor - korzystanie z różnych kolorów może pomóc przyciągnąć lub odwrócić uwagę czytelnika od danej frazy. Dodanie koloru do liter, które zazwyczaj są standardowe, powoduje szczególne zainteresowanie. Z drugiej strony przesadna różnorodność kolorów może wywołać wizualne zamieszanie, które podważy autentyczność naszego projektu;

  • orientacja – jesteśmy przyzwyczajeni do czytania od lewej strony do prawej, w kolejności od góry do dołu. Zmiana orientacji liter na pionową czy obracanie słów na boki może zwiększyć ich atrakcyjność. Prawidłowe wdrożenie orientacji bywa trudne, ale z pewnością przyciąga wzrok czytelnika;

  • małe i wielkie litery - przyjęło się, że korzystanie z Caps Locka utożsamiane jest z krzykiem. Przy używaniu wielkich liter należy uważać, bo choć będą większe i łatwiej widoczne, mogą okazać się przytłaczające i nachalne;

  • położenie - pozycja tekstu i rozmieszczenie sekcji również określają hierarchię;

  • inne - np. wykorzystanie pustej przestrzeni, wyrównanie, rozstawienie.

typografia na stornie www

Źródło: Showmax.com

Podsumowanie

Jeżeli chcemy, by nasz projekt spełniał wszystkie funkcje, na których nam zależy, musi być przejrzysty. Oczywiście wykorzystanie wszystkich powyższych punktów nie poprawi jego funkcjonalności, a wręcz przeciwnie. Tak jak we wszystkich elementach projektu, musimy znaleźć złoty środek, który odpowiednio je uszereguje. Efektywny projekt musi zawierać optyczne wskazówki, które poprowadzą czytelnika przez kolejne jego poziomy. Udana hierarchia typograficzna ma więc ogromne znaczenie dla przekazania zamierzonego przesłania i zrozumienia treści. Skutecznie zastosowanie tej techniki nie tylko uatrakcyjni nasz koncept, ale też uczyni go bardziej przyjaznym dla użytkownika. A kiedy nasz projekt połączy formę i funkcjonalność, będziemy zadowoleni z niego i my, i nasi czytelnicy.

Zrób własną stronę internetową za darmo z doskonałą hierarchią typograficzną w WebWave! 

  

Zależy Ci na dobrym wyglądzie tekstu na stronie? Koniecznie przeczytaj też te teksty:

Zacznij teraz 

Zacznij teraz 

11 stycznia 2018

Zacznij teraz 

Popularne artykuły. 

Jak zrobić sklep internetowy?

Jak zrobić landing page?

Jak zrobić stronę internetową?

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.

contact@webwavecms.com
+48 731 395 898

Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00

          

Ta strona została stworzona w kreatorze WebWave.

Znajdziesz nas na: