Vizuální hierarchie v typografii — co funguje
Pět technik, kterými udělíte webu strukturu. Bez těchto principů si uživatelé nevědí, kudy jít. A to není dobré.
Proč na hierarchii záleží
Když uživatel dorazí na váš web, má tři sekundy. Maximálně. V těchto třech sekundách musí pochopit, co tady je a kam má jít. Není to magie. Je to matematika. Je to typografie.
Vizuální hierarchie není věc, kterou si vymysleli designéři proto, aby se nudit. Je to věc, kterou si lidské oči vymyslely samo. Podíváte se na stránku a automaticky vidíte nejdůležitější věc první. Potom druhou. Potom třetí. Pořadí není náhoda — je to design.
Pět technik, které fungují
Tady není věda. Jsou to pravidla, která si lidé nemusí pamatovat, protože je vidí přirozeně.
Velikost písma
Nejjednodušší technika. Velké je důležité. Malé je detailní. Nikdo vám to nemusí říkat — víte to. Problém je, že někdy zapomenete. Na webu jsme viděli titulky stejné velikosti jako normální text. Nedělejte to. Rozdíl mezi h1 a odstavcem by měl být minimálně 50 %. Ideálně víc.
Návod je snadný: každá úroveň bude větší než ta, která jí předchází. H1 větší než h2. H2 větší než h3. Není to umění. Je to matematika.
Váha písma (font-weight)
Nemusíte měnit velikost. Stačí udělat text tučnější. Tučný text se čte jinak — je výraznější, dominantní. Normální text je… normální. Light písmo je skoro neviditelné. To je hierarchie bez změny velikosti.
Používejte bold (700) pro nadpisy a důležité věty. Regular (400) pro normální text. Italic pro citáty. A prosím, nepoužívejte light (300) pro čitelnost. Light je jen pro dekoraci. Light je pro design na papíře. Na webu byste měli vidět.
Barva a kontrast
Důležitý text je tmavý. Matte text je šedý. Neviditelný text je bílý na bílém. To je zákon. Váš h1 by měl mít nejvyšší kontrast na pozadí. Odstavce o trochu nižší. Meta informace? Ještě nižší. Kontrastní poměr by měl být minimálně 4.5:1 pro normální text, 3:1 pro velký text. Je to přístupnost. Je to i design.
Pokud máte bílé pozadí, používejte tmavé písmo pro obsah, šedé pro sekundární informace. Pokud máte tmavé pozadí, udělejte to opačně. Není to složité. Je to logické.
Řádkování a prostor
Prostor je součást designu. Ne jen vynechaný prostor — je to aktivní součást. Mezi odstavci byste měli mít aspoň 1.5x až 2x tolik prostoru jako je výška řádku. Tím vytváříte vzdušnost. Tím se text čte lépe. Tím je jasné, co spolu patří a co ne.
Řádkování (line-height) by mělo být mezi 1.4 a 1.8 pro normální text. Nadpisy můžete mít užší — 1.2 je OK. Prostor mezi nadpisem a textem by měl být větší než prostor mezi řádky v textu. Pořád nejde o cit. Jde o matematiku.
Pozice a seskupení
Věci, které spolu patří, by měly být blízko sebe. Věci, které spolu nepatří, by měly být daleko. To je gestaltský zákon proximity. Je to přirozené. Váš mozek to vidí bez přemýšlení. Když máte nadpis a odstavec, měly by být těsně vedle sebe — ne daleko. Když máte dva oddíly, měly by být odděleny mezerou.
Pozice také říká, co je důležité. Věci nahoře jsou důležitější. Věci vlevo jsou důležitější (v západních jazycích). Věci uprostřed привлекают pozornost. To není náhoda. To je psychologie. Využijte ji.
Jak to zkombinovat v praxi
Tady je konkrétní příklad, jak se to všechno používá dohromady na skutečném webu.
Příklad: Blog post stránka
H1 (Nadpis článku): 32-48px, tučné (700), tmavá barva, kontrast 7:1, margin-bottom 2rem
Meta informace: 12-14px, šedá barva (méně kontrast), spaced 0.5rem od nadpisu
Úvodní odstavec: 18-20px, regular (400), tmavá barva, kontrast 6:1, line-height 1.6
H2 (Sekce): 24-32px, semibold (600), tmavá barva, margin-top 2.5rem, margin-bottom 1rem
Normální text: 16-18px, regular (400), tmavá šedá barva, line-height 1.7, margin-bottom 1.5rem
Na závěr: Hierarchie je služba
Vizuální hierarchie v typografii není o tom, aby web vypadal hezky. Je to o tom, aby si lidé věděli, kudy jít. Aby věděli, co je důležité. Aby se neztratili. To je celé. Je to služba uživatelům.
Když kombinujete velikost, váhu, barvu, kontrast, řádkování a prostor, vytváříte cestu. Cestu skrz váš obsah. Uživatelé ji vidí bez přemýšlení. A to je úspěch. Už nebudete dělat weby, kde si lidi nevědí, kudy jít. Budete dělat weby, které je vedou správným směrem. A to se bude líbit.
Upozornění
Tento článek je vzdělávacím materiálem. Principy vizuální hierarchie jsou založeny na psychologii vnímání a se čtením vědeckých prác. Výsledky se liší v závislosti na konkrétním obsahu, cílové skupině a cílích webu. Vždy testujte svůj design s reálnými uživateli a měřte skutečné chování. Pokyny WCAG jsou právní povinností v mnoha zemích — respektujte je.
Související články
