Typografie je na webu to, co si většina lidí neuvědomí, dokud je něco špatně. Text se špatně čte, stránka působí chaoticky a návštěvník odejde, aniž by věděl proč. Dobrá zpráva: základní pravidla se vejdou na jednu stránku a platí na každém webu.
1. Pohodlná délka řádku
Oko unaví dlouhé řádky i příliš krátké. Za ideál se považuje zhruba 45 až 75 znaků na řádek, tedy přibližně 66. Na webu to jednoduše vyřešíte tím, že odstavec omezíte na šířku kolem 70 znaků (v CSS jednotka ch). Na širokém monitoru tak text nikdy neroztáhnete přes celou obrazovku.
2. Velikost a řádkování
Základní text ať má alespoň 16 px, na velkých displejích klidně víc. Řádkování těla textu držte kolem 1,5násobku velikosti písma, nadpisy mohou být těsnější (1,1 až 1,3). Čím delší řádek a menší písmo, tím víc vzduchu mezi řádky potřebují.
3. Hierarchie: nanejvýš tři až čtyři úrovně
Čtenář web nečte, skenuje ho. Pomozte mu: velký nadpis, menší mezititulek, běžný text a drobný popisek. Úrovně odlišujte nejdřív velikostí, potom tloušťkou písma a až nakonec barvou. Nadpisy označte skutečnými značkami H1 až H6, nejen velkým písmem. Pomůže to čtenářům, odečítačům i vyhledávačům.
4. Pevný rytmus mezer
Tohle odlišuje web, který „sedí“, od webu, který vypadá náhodně. Určete si malou sadu mezer a používejte jen ty: například 14 px mezi popiskem a nadpisem, 14 px mezi nadpisem a úvodním textem, 6 px mezi navazujícími odstavci téhož bloku. Na mobilu je o něco zmenšete. Texty, které k sobě patří, patří blízko sebe, a mezi bloky nechte víc místa.
5. Jedno až dvě písma, málo řezů
Víc písem než dvě nepůsobí bohatě, ale nejistě. Vyberte výrazné písmo pro nadpisy a neutrální pro text, každé ve dvou až třech řezech. Ušetříte i rychlost načítání: každý soubor s písmem je desítky kilobajtů navíc. Používejte formát WOFF2 a nastavte font-display: swap, ať se text zobrazí hned.
6. Kontrast a tmavý režim
Běžný text by měl mít kontrast alespoň 4,5 : 1, velký text 3 : 1 (norma WCAG AA). Na tmavém pozadí nepoužívejte čistě bílou na čistě černé, lépe se čte světle šedobílá na velmi tmavé šedé. Text zarovnávejte doleva, zarovnání do bloku vytváří na webu nerovné mezery mezi slovy.
7. Čeština má svá pravidla
- Pevná mezera: jednopísmenné předložky a spojky (k, s, v, z, o, u, a, i) nesmí zůstat na konci řádku. Stejně tak se drží pohromadě číslo s jednotkou (10 km) nebo titul se jménem.
- Uvozovky: v češtině jsou dolní a horní: „takto“, ne „takto“.
- Pomlčka a spojovník: pomlčka nahrazuje „od–do“ (8:00–12:00), spojovník spojuje slova (česko-slovenský) a píše se bez mezer.
- Čísla: tisíce se oddělují mezerou (12 500 Kč), desetiny čárkou (4,5).
- Zkratky: s. r. o., tzn., ale značky jednotek bez tečky (kg, cm).
Ve WordPressu pevné mezery nemusíte hlídat ručně. Existují pluginy, které je doplní automaticky při zobrazení stránky.
Kontrolní seznam na závěr
- Odstavec není širší než zhruba 70 znaků.
- Základní text má aspoň 16 px a řádkování kolem 1,5.
- Stránka má nejvýš tři až čtyři úrovně písma.
- Mezery mezi prvky vycházejí z jedné malé sady hodnot.
- Používáte maximálně dvě rodiny písma.
- Kontrast textu splňuje 4,5 : 1.
- Za jednopísmennými předložkami je pevná mezera.
Chcete web, který se dobře čte a zároveň vypadá výrazně? Ozvěte se nám, rádi se na něj podíváme.
Zdroje: Made Good Designs – Web Typography, Bowwe – Web Design Typography Guide, RTsoft – Typografický tahák, Zalomení řádků v češtině a slovenčině.