Při projektu pro českou právní kancelář jsme na jejich hlavní stránce změnili přesně jednu věc: základní písmo. Vyměnili jsme úzký geometrický bezpatkový font za humanistický s o něco širšími proporcemi a otevřenějšími protitvary. Během prvního měsíce průměrný čas na stránce vzrostl a míra okamžitých odchodů klesla. Žádné změny layoutu, žádný nový obsah, žádná přestrukturovaná navigace — jen jiné písmo. Typografie je často považována za kosmetický detail, ale zásadně formuje způsob, jakým lidé vnímají web.
Písma formují vnímání uživatelů
Písmo nese význam ještě předtím, než je přečteno jediné slovo. Patkové písmo jako Garamond evokuje tradici a autoritu. Zaoblené bezpatkové písmo jako Nunito působí přístupně a přátelsky. Neproporcionální písmo jako JetBrains Mono signalizuje technickou přesnost. Tyto asociace jsou hluboce zakořeněné a kulturně posilované desetiletími tištěného a digitálního designu.
Výběr nesprávného písma vytváří kognitivní disonanci. Jednou jsme auditovali web wellness značky, která používala ostře řezané, industriální bezpatkové písmo — takové, jaké byste očekávali na webu stavební firmy. Obsah hovořil o klidu, rovnováze a péči o sebe, ale typografie odporovala každému slovu. Sladění písma s osobností značky bylo jednou z nejjednodušších a nejefektivnějších změn v celém redesignu.
Kouzlo čitelnosti
Čitelnost není jen o výběru písma — jde o to, jak je text vysázen. Délka řádku, výška řádku a rozestup písmen spolupracují na vytvoření pohodlných podmínek pro čtení. Obecně uváděný ideál pro tělo textu je 50–75 znaků na řádek, což na desktopu odpovídá přibližně 600–700 pixelům šířky textu při standardních velikostech.
Výška řádku (neboli proklad) by měla obecně být mezi 1,4 a 1,6 pro tělo textu, i když optimální hodnota závisí na výšce malých písmen a celkových proporcích písma. Písma s vysokým x-height, jako Inter nebo Source Sans Pro, mohou dobře fungovat s výškou řádku 1,5. Písma s nižším x-height, jako Caslon nebo Baskerville, mohou potřebovat 1,6 nebo více, aby působila vzdušně a čitelně.
Kontrast mezi textem a pozadím také hraje zásadní roli. WCAG 2.1 vyžaduje minimální kontrastní poměr 4,5:1 pro běžný text, ale my mířime výš — obvykle 7:1 nebo více — protože splnění minimálního standardu ne vždy znamená pohodlné čtení, zejména na mobilních obrazovkách v proměnlivých světelných podmínkách.
Výběr správné velikosti písma
Časy 12pixelového těla textu jsou dávno za námi. Moderní osvědčené postupy umisťují tělo textu na 16–18 pixelů jako základ, přičemž mnoho obsahově bohatých webů jde až na 20 pixelů. Větší tělo textu zlepšuje čitelnost na displejích s vysokým rozlišením a snižuje potřebu přiblížení ze strany uživatelů.
Používáme modulární typografickou stupnici k vytvoření konzistentní velikosti napříč nadpisy, podnadpisy, tělem textu a popisky. Poměr 1,25 (velká tercie) funguje dobře pro většinu webových projektů a vytváří hierarchii, která působí vyváženě bez dramatických skoků mezi velikostmi. Pro web, kde nadpisy potřebují větší vizuální dopad, můžeme použít poměr 1,333 (čistá kvarta) nebo dokonce 1,5 (čistá kvinta).
Responzivní velikost písma je nezbytná. Používáme CSS clamp() pro vytvoření plynulé typografie, která se hladce škáluje mezi breakpointy. Například font-size: clamp(1rem, 0.5rem + 1.5vw, 1.25rem) zajistí, že tělo textu zůstane proporcionální napříč velikostmi obrazovky bez náhlých skoků na konkrétních breakpointech.
Párování písem: Kombinujte, ale nepřehánějte
Párování písem je jedno z nejjemnějších rozhodnutí ve webové typografii. Cílem je kontrast s harmonií — dvě písma, která vypadají dostatečně odlišně pro vytvoření hierarchie, ale sdílejí dostatek strukturální podobnosti, aby působila soudržně. Klasický přístup páruje patkové nadpisové písmo s bezpatkovým pro tělo textu, nebo naopak.
U téměř každého projektu se držíme dvou písem. Tři jsou absolutní maximum, a to pouze pokud existuje jasný funkční důvod — například neproporcionální písmo pro bloky kódu vedle patkového/bezpatkového páru pro redakční obsah. Každé další písmo zvyšuje kognitivní zátěž čtenáře a zvětšuje velikost stránky kvůli stahování souborů písem.
Při výběru párů hledáme společné charakteristiky: podobné x-height, kompatibilní šířky tahů a proporcionální šířky písmen. Písma navržená stejnou písmolévárnou nebo designérem se často dobře párují, protože sdílejí základní designové principy. Playfair Display a Source Sans Pro mají například komplementární proporce, které vytvářejí elegantní kontrast bez vizuálního napětí.
Správný výběr může zvýšit konverze
Typografie přímo ovlivňuje konverzní poměry, protože ovlivňuje porozumění a důvěru. Když uživatelé mohou snadno číst obsah a vizuální tón odpovídá slibu značky, je pravděpodobnější, že provedou akci. To platí pro vše od tlačítek výzvy k akci přes popisy produktů až po cenové tabulky.
Pro SaaS klienta v oblasti projektového řízení jsme testovali dvě verze jejich cenové stránky. Jediný rozdíl bylo písmo použité pro názvy plánů a seznamy funkcí — jedna verze používala neutrální geometrické bezpatkové písmo, druhá o něco teplejší humanistické bezpatkové písmo s lepší čitelností v malých velikostech. Humanistická varianta měla lepší výsledky ve výběru plánů, protože uživatelé dokázali porovnání funkcí rychleji a s větší jistotou analyzovat.
Testujte a iterujte
Typografická rozhodnutí by měla být validována, ne předpokládána. Během fáze prototypování provádíme testy čitelnosti s reálnými uživateli, které žádáme o přečtení pasáží a zodpovězení otázek k porozumění. Sledujeme také metriky zapojení po spuštění — čas na stránce, hloubku scrollování a konverzní poměry — abychom měřili, zda typografické změny přinášejí měřitelné výsledky.
A/B testování písem v produkci vyžaduje pečlivou implementaci. Chování načítání písem ovlivňuje vnímaný výkon a různá písma mohou posunout layout způsoby, které zkreslují výsledky testů. Používáme CSS Font Loading API k zajištění konzistentního renderování napříč variantami a kontrole kumulativního posunu layoutu.
V Kosmoweb typografie nikdy není dodatečnou úvahou. Je jedním z prvních rozhodnutí, která v každém projektu děláme, protože formuje každé následující designové rozhodnutí — mezery, layout, barvy a hierarchie, to vše vychází z typografického systému. Správné nastavení na začátku šetří čas a přináší lepší výsledky v celém procesu návrhu.