Twój e-mail
Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

hierarchia typograficzna na stronie www - dobry wygląd tekstu na stronie internetowej na wyciągnięcie ręki

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 www. 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.

Dołącz do 100 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania

W WebWave zrobisz pięknie wyglądającą stronę, z doskonałą hierarchią typograficzną i dopasowanymi fontami. Zacznij od pustej karty lub wybierz jeden z darmowych szablonów.
STWÓRZ SWOJĄ STRONĘ ZA DARMO 

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

 

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 swoją stronę z doskonałą hierarchią typograficzną w WebWave! To nic nie kosztuje :)

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

Autor: Paweł Krzywina

11 stycznia 2018

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Hierarchia typograficzna, czyli kolejne poziomy dobrego projektu.

 

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie

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.

Panel webmastera

KONTAKT

contact@webwavecms.com
+48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO