8 pravidel webové typografie

1.   Dva a dost

Více než dva fonty zpravidla nejdou dohromady. Vyberte vždy jeden jediný font jako primární pro obsah, k němu sekundární pro nadpisy a nešlápnete vedle. Pokud chcete použít dva fonty, vyplatí se vybrat takové, které se budou doplňovat a vytvoří kontrast. Zároveň by se k sobě měly hodit. Pokud použijete stylově odlišná písma, vždy by se mělo jednat o záměr. Tedy byste měli být schopni zdůvodnit proč. Pokud si nejste jisti, můžete použít více řezů téhož písma.

Při výběru konkrétního písma se doporučuje sáhnout spíše po jednoduchých bezpatkových fontech. V tištěném textu vedou patky oči, abyste se neztráceli v řádcích, ale na monitorech zpravidla tolik textu nepřečteme.

S výběrem vhodného písma vám může pomoci Google Fonts. Při výběru si ověřte, že má písmo všechny potřebné znaky, které v češtině či jiném jazyce používáte, tedy aby například podporovalo diakritiku českého jazyka.

Většina webových šablon má dnes výběr fontů předchystaný, takže si s tím nemusíte lámat hlavu. U tvorby nových projektů je dobré požádat o pomoc typografa nebo grafického designéra.

V poslední době se vrací do módy retro prvky, od grafiky a ilustrací až po písmo. Při správném použití můžete vytvořit geniální web, ale pokud je prvek použit špatně, můžete se dobrat k vizuálnímu paskvilu. Proto pokud nejste z oboru a máte určitou představu, je někdy lepší zkonzultovat ji nejprve s grafikem, který má přehled o současné tvorbě a poradí vám, jak vaši vizi převést do ideální podoby, která bude fungovat.

2.   Velikost písma

Obecně se doporučuje spíše větší velikost písma, ideálně mezi 12 a 22 px. Menší písmo se hodí spíše do tiskovin, ale na obrazovce monitoru a dalších zařízeních zanikne. Vždy však dejte pozor na konkrétní font – různá písma mohou mít rozdílnou optickou velikost.

3.   Řádkování a šířka textového pole

Neboli výška řádku. Špatně nastavené řádkování způsobuje nečitelnost textu a často také neoptimální využití prostoru, kterým můžete při nastavení zbytečně velkého řádkování plýtvat. Uvádí se, že by řádkování mělo být přibližně o 30% větší, než je velikost textu. V CSS najdeme tento bod pod pojmem „line-height.“

S tím souvisí také nastavení samotné šířky textového pole. Příliš dlouhé řádky se na obrazovce špatně sledují a neudrží oko diváka. Pro obrazovku monitoru je ideální pro jeden řádek 60 znaků a pro mobil je to přibližně 35 znaků. S tím si již poradí responzivní webové stránky.

4.   Zarovnání písma

Na rozdíl od tisku zde platí, že text zarovnáváme vždy do leva nebo na střed. Zarovnání do bloku by mohlo v textu vytvořit zbytečně velké mezery.

Sem můžeme připojit ještě rozdělení do odstavců. Klíčem k dobře čitelnému textu a v druhé řadě k úspěšnému SEO, je rozdělit text do více bloků s podnadpisy h2. Čtenář se bude v textu mnohem snadněji orientovat.

Když už si chceme přečíst dlouhý text, zpravidla si ho vytiskneme. Většina uživatelů však prochází obsah na mobilních telefonech a navíc ho projdou velké množství na to, aby si tiskli každou nedůležitou stránku. Proto pokud chcete, aby dočetli text do konce, udělejte ho čitelným.

5.   Kontrast textu a pozadí

Dalším podstatným bodem je kontrast. Nejčastější variantou je černý text na bílém pozadí. Tato volba se hodí pro magazíny, blogy a další platformy, kde se předpokládá, že bude čtenář číst velké množství textu.

Další a v poslední době oblíbenou variantou je bílý text na tmavém pozadí. Je sice hůře čitelný, ale najdeme weby, kde splní svůj účel. Pokud pomineme patičku webu a další prvky, kde se může objevit, pro běžný text se hodí například na umělecké weby, kde chcete zaujmout nebo na stránky, které chcete pojmout originálněji, třeba v kontextu daného tématu.

6.      Bold a Caps lock

Tučným řezem písma můžete v textu snadno něco zvýraznit. Vždy však počítejte s tím, že má čtenář tendenci ostatní text přeskakovat a podvědomě očekává, že pokud je v textu něco zvýrazněno, jsou to ty nejpodstatnější informace, pro které si přišel.

Caps lock se čte špatně, takže se hodí spíše pro nadpisy nebo pro jednotlivá slova v textu. Přesto, pokud chcete v textu něco zvýraznit, sáhněte spíše po již zmíněném tučném písmu.

7.      Obrázky a grafika

Další prvky, které vám pomohou zvýšit čitelnost a hlavně četnost dočtení textu až do konce, jsou obrazové a grafické prvky. V dnešní internetové době, kdy si mnozí odvykli číst dlouhé knižní texty, je většině uživatelů nepohodlné přečíst celou stránku jednolitého textu. Formát obrazovky je navíc čitelný sám o sobě špatně.

Vedle rozdělení do odstavců a zvýraznění důležitých částí můžete podpořit čitelnost textu proložením obrázky a grafickými prvky. Pomocí obrazového obsahu lze vyjádřit část sdělení. Čtenář zpravidla vstřebá mnohem rychleji infografiku než vysvětlující popis.

8.   Spolupracujte s copywriterem

Tenhle bod se netýká přímo typografie, ale pokud se bavíme o textech na webu, nelze jej opomenout.

Ve chvíli, kdy začnete navrhovat web, přizvěte si k ruce také copywritera. Ne vždy je vhodné volit postup, kdy nejprve vytvoříte web a následně do něj pasujete texty, které teprve vzniknou. Ať už máte přesnou představu, jaké texty na webu chcete nebo naopak necháte volnou ruku jejich autorovi, je někdy dobré mít nejprve texty a spolu s nimi navrhovat vzhled webu.

Při drobnějším členění textů může být náročné napsat texty do předem vymezeného prostoru. Ve výsledku se to může odrazit na jejich kvalitě.

Potřebujete vytvořit webové stránky nebo upravit ty stávající? Kromě technického zázemí vám můžeme nabídnout také služby našich profesionálních grafiků a copywriterů. Společně probereme vaši představu a navrhneme optimální řešení.

Neváhejte nás kontaktovat


Publikováno: 26. 7. 2021
Blanka Kochová