Typografie na webu: jak písma ovlivňují důvěru zákazníků

V roce 2012 provedl deník The New York Times nenápadný experiment. Více než 45 tisíc čtenářů si přečetlo stejný odstavec a odpovědělo, zda napsanému věří. Text byl stejný. Lišila se jen jedna věc — písmo. A jedno ze šesti písem přesvědčovalo znatelně lépe než ostatní.

Které to bylo, prozradím níže. Nejdřív si vysvětlíme, proč písmo vůbec ovlivňuje rozhodnutí zákazníka, jaká písma pro web vybírat, jak nastavit i to nejjednodušší písmo tak, aby vypadalo draze, a kde hledat kombinace, které už designéři vyzkoušeli. A na konci — výběr bezplatných písem pro 8 oborů.

Proč písmo ovlivňuje důvěru

Návštěvník web nečte — nejdřív ho skenuje. Během prvních sekund mozek posoudí, zda firma působí spolehlivě, ještě než člověk přečte jedinou větu. A písmo je jedna z prvních věcí, které tento dojem utvářejí.

Stanfordská laboratoř přesvědčovacích technologií v rozsáhlé studii důvěryhodnosti webů analyzovala hodnocení více než 2,6 tisíce lidí. 46 % komentářů o důvěře se týkalo vzhledu webu: designu, rozvržení, písem, barev. Vedoucí studie B. J. Fogg to shrnul: lidé posuzují důvěryhodnost podle toho, jak web vypadá.

Písmo je hlas vaší značky. Zákazník ho „slyší“ dřív, než přečte slova.

• Čitelnost = respekt. Když se text čte těžko, člověk cítí, že na něj nikdo nemyslel.
• Jednotnost = pořádek. Stejná písma a velikosti na celém webu signalizují, že firma má věci pod kontrolou.
• Soulad = upřímnost. Písmo má „mluvit“ stejným tónem jako podnikání. Advokátní kancelář s kreslenými písmeny působí nevážně, dětské centrum s přísným písmem chladně.

Past „neobvyklého“ písma

Nejčastější chyba, kterou vidím na webech malých firem, je snaha vyniknout pomocí písma. Ručně psaný nadpis, ozdobné kudrlinky, „technologické“ písmo pro pekárnu. Zdá se, že to značku dělá výjimečnou. Ve skutečnosti:

• Text se čte hůř — člověk vynakládá úsilí a rychleji odchází.
• Písmo se nespojuje se značkou — je jen „hezké“, ale o vás nic neříká.
• Chybí diakritika nebo potřebné znaky — místo „ř“, „ů“ nebo „ě“ se objeví znaky z jiného písma a text vypadá rozbitě.
• Web se načítá pomaleji — ozdobná písma bývají těžká.

Další argument pro čitelnost je studie Brownovy univerzity a Adobe z roku 2022: rychlost čtení stejných lidí v pro ně „nejrychlejším“ a „nejpomalejším“ písmu se lišila o 35 % — bez ztráty porozumění. Písmo doslova mění, kolik toho člověk stihne přečíst, než se rozhodne.

Jedno, maximálně dvě písma

Otevřete weby velkých značek a všimnete si, že tam málokdy najdete víc než dvě písma. Není to omezenost, ale disciplína:

• Jedno písmo — nejjednodušší a nejspolehlivější varianta. Hierarchii vytváří velikost, tloušťka (řez) a barva. Tento web je mimochodem postavený na jediném písmu — Golos Text.
• Dvě písma — jedno pro nadpisy (s charakterem), druhé pro text (maximálně čitelné). Klasikou je kombinace patkového a bezpatkového písma.
• Tři a víc — web začne vypadat jako koláž, značka se rozmazává a stránky se načítají déle.

Každé nové písmo na webu je další hlas v rozhovoru se zákazníkem. Když mluví všichni najednou, neslyšíte nikoho.

A to nejdůležitější: stejná písma mají být všude — na webu, na sociálních sítích, v prezentacích, nabídkách i na vizitkách. Tak se značka stává rozpoznatelnou.

Google Fonts: bezplatný základ pro každou značku

Pro kvalitní typografii nemusíte písma kupovat. Google Fonts je knihovna s tisíci bezplatných písem pod otevřenou licencí: můžete je používat na webu, v reklamě, na sociálních sítích i v tištěných materiálech zdarma.

Jak vybrat písmo za 5 minut

1. Otevřete fonts.google.com a ve filtru jazyka (Language) zvolte Latin Extended a jazyky, ve kterých bude váš web.
2. Do pole náhledu napište svůj skutečný text — název firmy, nadpis webu.
3. Určitě ověřte speciální znaky: napište například „Příliš žluťoučký kůň úpěl ďábelské ódy“ a pokud je web vícejazyčný, i „Grüße, Łódź, Ελλάδα“. Pokud nějaké písmeno vypadá „cize“, písmo se nehodí.
4. Podívejte se, kolik řezů (tlouštěk) písmo má: pro web jsou vhodné alespoň 3 — normální, střední a tučný.
5. Vyzkoušejte písmo v malé velikosti (14–16 px) a na obrazovce telefonu.

Pinterest: jak okoukat hotové kombinace

Vybrali jste písmo, ale nevíte, s čím ho zkombinovat a jak bude vypadat ve skutečném designu? Tady pomůže Pinterest — obrovská databáze inspirace od designérů z celého světa.

• Hledejte podle názvu písma v angličtině: „Montserrat font pairing“, „Playfair Display typography“, „Manrope website design“.
• Přidejte obor: „dental website typography“, „law firm website fonts“, „beauty salon branding fonts“.
• Ukládejte si inspiraci na samostatnou nástěnku — je to hotový brief pro designéra.
• Všímejte si nejen písem, ale i velikostí, rozestupů a množství prostoru kolem textu.

Kombinace napovídá i samotná stránka písma v Google Fonts — sekce s oblíbenými páry ukazuje, s jakými písmy se používá nejčastěji.

Tajemství: jak z jednoduchého písma udělat „drahé“

Tohle odlišuje profesionální web od amatérského se stejným písmem. Písmo se dá nastavit — a právě nastavení dávají ten „drahý“ vzhled, který lidé připisují designu.

Příklad z tohoto webu: nadpisy jsou vysázené písmem Golos Text s prostrkáním −5 % a řádkováním kolem 1,0. Stejné bezplatné písmo bez nastavení by vypadalo výrazně obyčejněji.

Výsledek experimentu: které písmo přesvědčilo nejvíc

Vraťme se k experimentu Errola Morrise pro The New York Times. Čtenářům se zobrazil text jedním ze šesti písem: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans a Trebuchet. Vítězem se stal Baskerville — klasické patkové písmo. Lidé o něco častěji souhlasili s tvrzením vysázeným právě jím.

Upřímně: rozdíl byl malý a sám Morris přiznal, že nejde o přísně vědecký experiment. Závěr je ale velmi praktický — klasické, klidné a dobře známé písmo budí víc důvěry než „veselé“ nebo neobvyklé. Proto banky, právníci a zdravotnická zařízení tak často volí střídmá písma.

Výběr bezplatných písem pro 8 oborů

Všechna písma níže jsou z Google Fonts, zdarma pro komerční použití a podporují češtinu. Před výběrem si přesto potřebná písmena vyzkoušejte na svém textu.

• Univerzální záchranáři pro jakýkoli obor: Inter, Manrope, Montserrat, Golos Text, Onest. S nimi se těžko spletete.
• Písma s charakterem (Unbounded, Playfair Display, Cormorant Garamond, Prata) — jen pro velké nadpisy, ne pro odstavce.
• Ručně psaná (například Caveat) — maximálně pro jeden až dva akcenty, nikdy pro běžný text.

Písma a rychlost webu

Každé písmo a každý řez je samostatný soubor, který musí prohlížeč stáhnout. Proto:

• omezte se na 1–2 písma a 2–3 řezy;
• načítejte jen potřebné sady znaků (například latinka + rozšířená latinka);
• soubory písem hostujte na vlastním serveru — web tak nezávisí na službách třetích stran a načítá se rychleji (a v EU se tím navíc nepředávají IP adresy návštěvníků Googlu);
• nastavte zobrazení textu hned, ještě než se písmo načte, aby stránka nebyla prázdná.

Kontrolní seznam typografie webu

• Maximálně dvě písma na webu.
• Písmo podporuje českou diakritiku a speciální znaky vašich jazyků.
• Písmo odpovídá tónu podnikání.
• Běžný text 16–18 px, řádkování 1,4–1,6.
• Velké nadpisy jsou hutnější: menší prostrkání i řádkování.
• 2–3 řezy na celý web.
• Dostatečný kontrast textu vůči pozadí.
• Stejná písma na sociálních sítích, v prezentacích a dokumentech.
• Web je vyzkoušený na telefonu.

Závěr

Typografie není o „hezkých písmenkách“, ale o důvěře. Čitelné písmo, které odpovídá charakteru podnikání, jedno až dvě písma pro celou značku a správně nastavené rozestupy dělají web profesionálním i s bezplatnými písmy. A „neobvyklost“ nechte myšlenkám a textům — tam pracuje pro vás.

Pokud chcete, aby písma, barvy a texty fungovaly společně, začněte článkem „AI pro texty webu“ nebo se podívejte na ukázky mé práce.