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

95% obsahu webové stránky tvoří text. Jak jej zatraktivnit na maximum, aby byl obsah co nejvíce uživatelsky přívětivý? Dejte na těchto deset pravidel.
Pravidla webové typografie

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. 

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.

Pravidla typografie - velikost 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. 

Pravidla typografie - druhy písem

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.

Pravidla typografie - oblíbené fonty
 
Nejoblíbenější webové fonty; zdroj: uxdesign.cc

Věděli jste, že? 

Maxi typografie je ve webdesignu žhavým trendem. Více informací najdete v tomto článku

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

Pravidla typografie - hierarchie obsahu

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.

Pravidla typografie - řádkování

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

Mohlo by vás také zajímat: 

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

Pravidla typografie - šířka textového pole

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

Věděli jste, že?

Podle Statista.com, 51% všech návštěvníků na webu bylo v polovině roku 2020 z mobilních zařízení. Mít responzivní webdesign je tedy v dnešní době nutnost. Weby, které nejsou optimalizované, jsou na mobilních zařízeních prakticky nečitelné. O dalších výhodách responzivního webdesignu jsme napsali v tomto článku.

Pravidla typografie - šířka textového pole

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. 

Pravidla typografie - zarovnání písma

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. 

Pravidla typografie - kontrast

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

Pravidla typografie - verzálky

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

Mohlo by vás také zajímat: 

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.  

Pravidla typografie - vizuální prvky

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. 

Pravidla typografie - blikající text

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
 

Vylepšete svůj Outsourcing IT

napište nám

Přidat komentář