Typografie v ecommerce: čitelnost, čeština a rychlost

Na e-shopu se čte víc, než se zdá. Název produktu, cena, cena bez DPH, dostupnost, varianty, parametry, podmínky dopravy, recenze, chybové hlášky v pokladně. Každý z těch textů musí zákazník přečíst rychle a bez chyby, často na mobilu v tramvaji. Typografie proto není jen otázka vkusu, ale čitelnosti, důvěry a v konečném důsledku tržeb.

A má ještě dva rozměry, na které se při výběru písma zapomíná: češtinu a rychlost. Font, který v návrhu vypadá skvěle, může mít rozbité háčky nebo zpomalit načtení stránky. Projdeme obojí.

Čeština ve fontech: háčky, čárky a kroužky

Čeština potřebuje znaky, které v základní latince nejsou: ě, š, č, ř, ž, ů, ň, ť, ď a jejich velké varianty. Písmena s čárkou jako á, í, é jsou v základní západoevropské sadě, ale háčky a kroužek patří do rozšířené latinky. Google Fonts proto u fontů uvádí podporu Latin Extended. Font bez ní na českém webu nepoužívejte.

Podpora na papíře ale nestačí. Rozdíl je v kvalitě kresby:

• Háček u ď a ť má v dobrých fontech podobu apostrofu vedle písmene, ne klínku nad ním.
• Velká písmena s diakritikou (Ř, Č, Š) nesmí narážet do řádku nad sebou ani se ořezávat při malém řádkování.
• Všechny řezy musí mít české znaky. Stává se, že regular je kompletní a bold nebo kurzíva ne. Prohlížeč pak chybějící znak doplní z jiného písma a slovo vypadá rozbitě.
• Kerning dvojic jako „Tě“ nebo „Vů“ má být dotažený.

Jednoduchý test: vysázejte „Příliš žluťoučký kůň úpěl ďábelské ódy“ a totéž verzálkami ve všech řezech a velikostech, které web používá. Chyby uvidíte okamžitě.

Velikost, řádkování a délka řádku

Čitelnost základního textu stojí na třech parametrech.

Velikost. Standard WCAG minimální velikost písma nepředepisuje. V praxi se pro běžný text drží základ kolem 16 px a menší písmo jen na doplňkové informace. Pro formuláře na mobilu platí tvrdé pravidlo: pokud má pole písmo menší než 16 px, Safari na iPhonu při ťuknutí stránku přiblíží a zákazník musí zpět oddálit. V pokladně je to zbytečná překážka.

Řádkování. Pro delší text kolem 1,4–1,6násobku velikosti písma. U nadpisů méně.

Délka řádku. Baymard Institute v článku o čitelnosti doporučuje pro souvislý text zhruba 50–75 znaků na řádek včetně mezer. Delší řádky se špatně sledují, oko hledá začátek dalšího řádku. Typický problém e-shopů je popis produktu roztažený přes celou šířku velkého monitoru.

Hodnoty v tabulce jsou praktická výchozí nastavení, ne norma. Konkrétní čísla záleží na zvoleném písmu, protože různé fonty mají při stejné velikosti v pixelech různou výšku malých písmen.

Kontrast a přístupnost textu

Přístupnost má k textu konkrétní pravidla ve standardu WCAG 2.2 na úrovni AA:

• Kontrast (1.4.3): běžný text aspoň 4,5 : 1 vůči pozadí, velký text aspoň 3 : 1. Za velký se považuje text od 18 bodů, u tučného od 14 bodů, což odpovídá zhruba 24 px, respektive 18,7 px.
• Změna velikosti (1.4.4): text musí jít zvětšit na 200 % bez ztráty obsahu nebo funkce.
• Mezery v textu (1.4.12): když si uživatel nastaví řádkování 1,5násobek písma, mezery za odstavcem 2násobek, prostrkání písmen 0,12násobek a mezery mezi slovy 0,16násobek velikosti, nic se nesmí ořezat ani překrýt. Web tyto hodnoty sám používat nemusí.

Nejčastější prohřešky na e-shopech: světle šedý text na bílém, text přes fotku v banneru bez podkladu, tlačítka s pevnou výškou, ze kterých větší text vyteče, a texty zapečené do obrázků. Text v obrázku nejde zvětšit, přeložit, přečíst čtečkou ani najít vyhledávačem.

Typografie, která prodává: hierarchie a ceny

Dobrá sazba vede oko. Na detailu produktu má zákazník během pár vteřin najít název, cenu, dostupnost a tlačítko do košíku. Pomáhá jasná hierarchie:

1. Název produktu jako hlavní nadpis stránky, ale ne tak velký, aby odsunul cenu a tlačítko pod okraj obrazovky na mobilu.
2. Cena jako nejvýraznější číslo nákupní části. Původní cena u slevy menší a přeškrtnutá, cena bez DPH menší a tlumená.
3. Dostupnost a doručení čitelně pod cenou.
4. Parametry v tabulce se zarovnanými čísly, ideálně s číslicemi stejné šířky, aby se hodnoty daly porovnat.

Počítejte i s českou sazbou čísel a cen: mezera jako oddělovač tisíců („12 990 Kč“), nezlomitelná mezera mezi číslem a jednotkou, aby „Kč“ nezůstalo samo na dalším řádku, a desetinná čárka. Drobnosti, které dohromady rozhodují, jestli e-shop působí profesionálně. Víc o skladbě detailu v článku Product page UX.

Velikosti, řádkování a řezy se vyplatí zapsat jako design tokeny. Typografická škála s pěti až sedmi velikostmi pokryje celý e-shop a brání tomu, aby si každá nová stránka vymýšlela vlastní velikost nadpisu.

Výkon webfontů

Každý webfont je soubor, který se musí stáhnout. Dokud není stažený, prohlížeč buď text nezobrazí, nebo ho zobrazí záložním písmem a po načtení prohodí. První varianta zdržuje vykreslení a může zhoršit LCP, druhá může posunout obsah a zhoršit CLS. Obě metriky patří mezi Core Web Vitals. Google v doporučeních na web.dev popisuje, jak obojí omezit:

• Jen WOFF2. Nejlépe komprimovaný formát, který podporují všechny současné prohlížeče.
• Málo řezů. Každý řez je další soubor. Regular a bold často stačí. Variabilní font může nahradit několik řezů jedním souborem, ale bývá větší, takže se vyplatí porovnat velikosti.
• Podmnožiny znaků. Font s azbukou, řečtinou a vietnamštinou český web nepotřebuje. Popisovač unicode-range umožní stáhnout jen potřebné sady. U češtiny počítejte se základní i rozšířenou latinkou.
• Hostování u sebe. Font ze stejné domény odpadá navázání spojení s dalším serverem a máte pod kontrolou cache i to, kam se posílají data návštěvníků.
• Přednačtení hlavního fontu přes rel="preload", jen jednoho nebo dvou souborů, které jsou potřeba hned nahoře na stránce.
• Vhodné `font-display`. Hodnota swap zobrazí text hned záložním písmem, optional použije webfont jen tehdy, když je k dispozici rychle.
• Upravené záložní písmo. Vlastnosti size-adjust a ascent-override v @font-face přizpůsobí systémové písmo rozměrům webfontu, takže po prohození text neposkočí. Některé frameworky to umí automaticky.

Alternativou je systémové písmo. Je okamžitě k dispozici a češtinu zvládá. Nevýhodou je, že na Windows, macOS a Androidu vypadá jinak. Rozumný kompromis bývá webfont pro nadpisy a značku, systémové písmo pro text rozhraní. Víc k rychlosti v článku Core Web Vitals pro e-shopy.

Jak na to prakticky: checklist typografie

• Má font kvalitní češtinu ve všech řezech, včetně verzálek a ď, ť?
• Je základní text kolem 16 px a pole formulářů na mobilu aspoň 16 px?
• Má popis produktu rozumnou délku řádku, zhruba 50–75 znaků?
• Splňuje veškerý text kontrast 4,5 : 1, velký text 3 : 1?
• Jde text zvětšit na 200 % a zvýšit řádkování bez ořezání?
• Je cena nejvýraznější číslo nákupní části a sázíte čísla česky?
• Nejsou důležité texty zapečené do obrázků?
• Načítáte jen WOFF2, jen potřebné řezy a podmnožiny, z vlastní domény?
• Máte nastavené font-display a upravené záložní písmo proti posunu textu?
• Jsou velikosti a řezy zapsané jako tokeny v jednom místě?

Typografii řešíme jako součást redesignu, kde kompletní redesign trvá obvykle 6–10 týdnů, nebo v rámci design systému, aby pravidla platila na celém webu. Když řešíte jen konkrétní problém, třeba čitelnost pokladny, začněte menší úpravou. Navazující téma barev rozebírá článek Barvy a psychologie nakupování.