10 pravidel webové typografie, které by měl každý znát

Typografie je jeden z nejdůležitějších, a zároveň nejzanedbávanějších prvků na webu. Často stačí drobné úpravy a návštěvnost webu razantně vzroste. Obecně platí, že typografie by měla být co nejčitelnější. Co to všechno obnáší, rozebereme více v tomto článku z pohledu webdesignera. 

• Velikost písma (#1)
• Maximálně dva druhy písma (#2)
• Hierarchie obsahu (#3)
• Výška řádku (#4)
• Šířka textového pole (#5)
• Zarovnání písma (#6)
• Kontrast (#7)
• Pozor na Caps lock (#8)
• Nebojte se vizuálních prvků (#9)
• Experimenty nechte profesionálům (#10)

1. Velikost písma

Nebojte se větší velikosti písma. Drobný text najdeme možná v tiskovinách, ale ne na webu. Pro obsah na desktopu se klasicky doporučuje velikost okolo 15-22px a pro mobil 14-16px, dejte ovšem pozor na druh písma.

Srovnání stejné velikosti písma u různých fontů; zdroj: ilincev.com

2. Maximálně dva druhy písma

Méně je často více. V grafickém designu obecně používejte maximálně dva druhy písma, většinou stačí i jeden. Pokud se rozhodnete pro využití dvou fontů, vyberte doplňující fonty, které působí kontrastním dojmem. Když na Google Fonts zvolíte konkrétní písmo, zobrazí se kombinace fontů, ze kterých můžete vybírat. Je vhodné používat jeden z fontů jako primární (pro obsah) a druhý jako sekundární, tedy pro nadpisy, menu apod. 

Ukázka párových fontů s vysokým kontrastem; zdroj: uxplanet.org

A jaký font vybrat? Doporučuje se jednoduché bezpatkové písmo, které se dobře čte. Nejoblíbenější nástroj pro volbu písma na webu je již zmíněný Google Fonts. Pozor, u volby písma nezapomeňte zaškrtnout možnost latin extended, aby písmo podporovalo českou diakritiku. Tipy na nejlepší Google fonty najdete zde.

 
Nejoblíbenější webové fonty; zdroj: uxdesign.cc

3. Hierarchie obsahu

Jasný, ale přitom často opomíjený bod. Nezapomínejte vizuálně odlišovat nadpisy, podnadpisy, perex, běžný text a popisky.  Jak zmiňuje ve svém článku UX specialista Ilinčev, tyto prvky by měly být vizuálně odlišené natolik, abyste je uživatel od sebe rozpoznal, i když stojí samostatně. 

Ukázka povedeného typografického řešení obsahu; zdroj: ilincev.com

4. Výška řádku

Řádkováním lze udělat divy. Většina typografických chyb na webech je způsobena právě jeho špatným nastavením. Řádkování (v CSS uvedeno jako line-height) by mělo být o zhruba 30% větší než velikost textu. Ilinčev dodává, že čím je písmo menší, tím větší by mělo být řádkování. Pokud si nejste výškou řádku jistí, svěřte web do rukou profesionálovi. Na webu se nevyplatí šetřit. 

Jak může podcenění významu vizuálu dopadnout se můžete dočíst v tomto článku.

Příklad špatného a správného řádkování; zdroj: uxplanet.org

Mohlo by vás také zajímat: 

• Uniformita: Nový trend webdesignu?
• Časté chyby při tvorbě webu, které určitě nedělejte
• Udělejte z chyby přednost aneb Proč řešit stránku 404
• Pod pokličkou grafického designu: Kde hledat inspiraci ke tvorbě? 

5. Šířka textového pole

Kromě výšky řádku záleží i na jeho šířce. Člověk má tendence text skenovat, když tedy zkrátíme šířku řádků, lidské oko nemusí tolik kmitat ze strany na stranu a text je pohodlnější číst. Ideální šířka řádku se pohybuje okolo 60 znaků (včetně mezer) pro desktop a 30-40 znaků pro mobil. 

Vizualizace šířky řádků; zdroj: uxplanet.org

Ukázka neresponzivního a responzivního webu; zdroj: uxplanet.org

6. Zarovnání písma

Text na webu zarovnáváme doleva. Na rozdíl od grafiky pro tisk totiž musíme myslet také na responzivní zobrazování, kde můžou v případě zarovnání do bloku vznikat velké mezery. Zarovnáním doleva se těmto problémům vyhneme, a text tak působí čitelněji. Krátké texty můžeme zarovnat na střed, ovšem nikdy ne do bloku. 

Zarovnání písma hraje ve webdesignu zásadní roli; zdroj: ebrana.cz

7. Kontrast

Text by měl být oproti pozadí dostatečně kontrastní, aby šel přečíst co nejpohodlněji. Ideální variantou je klasicky tmavý text na světlém pozadí. Pokud se rozhodneme pro moderní inverzní variantu (tmavé pozadí se světlým textem), je potřeba počítat s tím, že se text bude číst o 32% pomaleji. Jestli je kontrast vašich stránek dostatečný, zjistíte například pomocí UX analýzy webu. 

Kontrast můžete zvýšit také tím, že nejdůležitější body v textu napíšete tučným písmem. S jeho použitím však opatrně, čtenář má pak tendence přeskakovat zbytek textu. 

Srovnání nedostatečného a správného kontrastu; zdroj: ebrana.cz

8. Pozor na Caps lock

Někteří lidé mají tendence zvýrazňovat důležitý text verzálkami. Nedělejte to. Verzálky používejte pouze pro nadpisy a krátké texty (jako je nabídka menu, logo apod.). Když čtenář uvidí obsah napsaný verzálkami, text přeskočí, protože se špatně čte. Pro zvýraznění důležitých částí textu použijte radši kontrast nebo vizuální prvky. 

O dalších pravidlech při psaní textů napsala článek také má kolegyně Petra, který je zaměřený na typografické chyby z pohledu copywritera. 

Delší text ve verzálkách se špatně čte; zdroj: uxplanet.org

Mohlo by vás také zajímat: 

• Nejpoužívanější redakční systémy pro webové stránky
• Pomalé weby nás štvou. Poradíme, jak je zrychlit!
• Psychologie barev: Klíč k úspěšnému marketingu
• 5 důvodů, proč váš web nevydělává

9. Nebojte se vizuálních prvků

Ideální variantou, jak maximálně zvýšit čtenost vaší stránky, je doplnit text o vizuální prvky. Nebojte se používat ikony, tlačítka, ilustrace, fotografie, infografiky, střídat barvu pozadí v sekcích apod. Povedené příklady najdete například v našich grafických referencích Kolokrám, IDCOM nebo KM Beta.  

Ukázka redesignu e-shopu Kolokrám.cz

10. Experimenty nechte profesionálům

Nezapomínejte, že všeho s mírou. Při zatraktivnění textového obsahu na webu si tedy zachovejte selský rozum. Vyhněte se divokostem, jako je křiklavé pozadí či barva textu, a úplně zapomeňte na blikající text, pokud nechcete jít stylem úsměvného webu Ling’s Cars. Je velké plus mít originální webové stránky, které upoutají (příklady zajímavé webové typografie najdete zde), ovšem v tomto případě web svěřte profesionálům. 

Takto ne!; zdroj: uxplanet.org

Chcete pomoci s tvorbou vašeho webu? Obraťte se na nás! Nabízíme kompletní služby, jak rozjet váš online business. Podívejte se na naše reference, případně ukázky redesignů, na kterých jsme pracovali. Pro více informací nás neváhejte kontaktovat.