Typografie na webu znamená výběr a rozvržení písma tak, aby se text dobře četl a zároveň vypadal jednotně se zbytkem stránky. Patří sem font, jeho velikost, řádkování, délka řádku a kontrast vůči pozadí.
Proč typografie ovlivňuje víc než jen vzhled?
Designér Oliver Reichenstein napsal v roce 2006 v eseji pro studio iA větu, která platí dodnes: web design je z 95 % typografie. Většina obsahu na webu je text, takže to, jak se čte, přímo rozhoduje, jestli návštěvník zůstane, nebo zavře záložku.
Konkrétní příklad z praxe: softwarová firma Numara zvětšila písmo z 10 na 13 bodů a přidala řádkování. Konverze na formuláři vzrostly o 133 %, Bounce rate klesl o 10 %. Je to jedna case study, ne obecný zákon - ale ukazuje, jak moc dovede detail v písmu hýbat čísly.
Jaká typografická pravidla se vyplatí dodržet?
Řádek by měl mít 50 až 75 znaků. Delší řádky se čtou hůř, oko se při přechodu na další řádek ztrácí. Kontrast textu vůči pozadí má splňovat standard WCAG - poměr aspoň 4,5:1 u běžného textu a 3:1 u velkého nadpisu.
Na mobilu nechoďte pod 16 pixelů, jinak si lidé text zvětšují sami a rozhazují vám rozvržení stránky. Na webu stačí dva až tři fonty - jeden pro odstavce, druhý pro nadpisy, případně třetí jako akcent na citace nebo tlačítka.
Odkud brát fonty a co s licencí?
Typografii řeším u každého projektu hned na začátku - spolu s barvami a rozvržením drží web na míru pohromadě. Podívejte se, jak stavím weby na míru →.
Nejjednodušší a nejbezpečnější cesta jsou Google Fonts. Jsou zdarma pro komerční použití pod licencí OFL nebo Apache 2.0 a pokrývají i českou diakritiku - háčky a čárky nejsou problém.
U placených fontů dejte pozor - web licence bývá oddělená od desktop licence. Font koupený pro tiskoviny nemusíte mít po EULA právo nasadit rovnou na web. Pro menší firmu je bezpečnější sáhnout po ověřených sans-serif fontech jako Roboto, Open Sans, Lato nebo Montserrat, které diakritiku drží dobře. Serifové písmo s patkami působí tradičněji a hodí se třeba advokátní kanceláři, sans-serif bez patek působí moderněji a čistěji.
Kde jsou limity typografie?
Typografie sama web neprodá. Řeší čitelnost a první dojem, ale konverzi ovlivňuje spolu s rychlostí načítání, strukturou stránky a tím, jestli návštěvník vůbec najde, co hledá. Přesná čísla o tom, kolik firma získá jen lepším písmem, se navíc těžko zobecňují - case studies ukazují směr, ne záruku pro každý projekt.
Můj pohled
Preferuji vždy Google Fonts. Jsou ověřené světovým gigantem, použití i licence jsou jasné. Nechci své klienty dostávat do problémů s fonty, kde není jasné licencování nebo je problém s vykreslováním češtiny.
Dobrá typografie se pozná podle toho, že si jí návštěvník vůbec nevšimne - prostě čte a nezadrhává se. Když chcete ověřit, jestli váš web tenhle test projde, stačí ho na chvíli otevřít na mobilu a přečíst si první odstavec nahlas.
Pavel Szabo
Programátor webů, eshopů a informačních systémů s více než 23 lety praxe. Pomáhám firmám i jednotlivcům s online podnikáním, automatizacemi a využitím AI v praxi.
