Jak vybrat písmo pro web: Průvodce webovou typografií

Pokud návštěvník nemůže pohodlně číst váš obsah, okamžitě odejde. Průzkumy ukazují, že špatně čitelný text může zvýšit míru opuštění (Bounce Rate) až o 40 %. Čitelnost ovlivňuje řada faktorů: velikost písma, kontrast mezi textem a pozadím, řádkování (line-height) a délka řádku. Pokud je text příliš malý (pod 16 px na mobilních zařízeních), uživatel musí přibližovat, což drasticky zhoršuje uživatelskou zkušenost (UX).

Font, který zvolíte, komunikuje osobnost vaší značky. Bezpatkové písmo (sans-serif) jako Roboto nebo Open Sans působí moderně, čistě a technologicky. Patkové písmo (serif) jako Georgia nebo Merriweather vzbuzuje tradici, vážnost a autoritu. Pokud vaše značka nabízí prémiové služby, měla by to typografie odrážet elegantním patkovým písmem. Naopak startup v tech sektoru by měl volit čisté, moderní bezpatkové písmo.

Google při hodnocení stránek sleduje Core Web Vitals, mezi které patří rychlost načítání a interaktivita. Pokud použijete příliš mnoho různých fontů nebo jejich těžké varianty, dramaticky zpomalíte načítání webu. Každý font je další HTTP požadavek a každý řez (Regular, Bold, Italic) zvyšuje objem dat. Optimalizovaná typografie s použitím moderních formátů (WOFF2) a správného font-display zlepší výkon webu a pozitivně ovplyvní SEO ranking.

Serif (patkové písmo) má na koncích písmen malé ozdobné prvky – "patky". Tyto fonty (např. Times New Roman, Georgia, Merriweather) jsou tradičně používané v tištěných médiích, protože patky vedou oko čtenáře podél řádku. Na webu se serif fonty používají pro delší texty, blogy a seriózní obsah. Sans-serif (bezpatkové písmo) nemá žádné ozdobné prvky a působí čistě a moderně. Fonty jako Arial, Helvetica, Roboto nebo Open Sans jsou ideální pro webové prostředí, zejména pro nadpisy, navigaci a krátké texty.

Font-weight určuje, jak tučný nebo tenký je daný text. Standardní hodnoty jsou 100 (Thin), 300 (Light), 400 (Regular/Normal), 700 (Bold) a 900 (Black). Běžný odstavcový text by měl mít font-weight 400 (Regular), nadpisy obvykle 700 (Bold) nebo vyšší. Je důležité nevybírat příliš tenké varianty (pod 300) pro malý text, protože zhoršují čitelnost, zejména na displejích s nižším rozlišením.

Line-height je výška řádku, tedy vzdálenost mezi jednotlivými řádky textu. Pro odstavcový text je optimální hodnota mezi 1.5 až 1.8, což zajišťuje dostatečný prostor mezi řádky pro pohodlné čtení. Příliš husté řádkování (pod 1.3) způsobuje, že text splývá a je těžko čitelný. Letter-spacing (kerning) je vzdálenost mezi jednotlivými písmeny. U nadpisů lze použít mírně záporné letter-spacing pro kompaktnější vzhled, zatímco u odstavců se letter-spacing obvykle nemění.

V CSS se font definuje pomocí font-family. Je kritické vždy definovat fallback fonty, tedy záložní písma pro případ, že primární font selže při načítání. Příklad: font-family: 'Roboto', Arial, sans-serif;. Pokud se Roboto nenačte, prohlížeč použije Arial, a pokud ani ten není k dispozici, použije výchozí bezpatkový font systému.

Pro firemní weby, B2B služby a profesionální portfolio vybírejte písma, která působí seriózně, důvěryhodně a čistě. Ideální jsou neutrální bezpatkové fonty jako Roboto, Open Sans, Lato nebo Inter. Tyto fonty mají vynikající čitelnost i na malých velikostech a profesionální vzhled. Pro nadpisy můžete experimentovat s patkovými fonty jako Merriweather nebo Lora, které dodají obsahu autoritu.

U e-commerce projektů je čitelnost a rychlost klíčová. Uživatelé musí rychle najít informace o produktu, cenu a CTA (call-to-action). Používejte jednoduché, široce čitelné fonty s dostatečnou tloušťkou (font-weight min. 400). Vynikající volbou jsou Montserrat, Nunito nebo Poppins. Vyhněte se příliš kreativním nebo ozdobným fontům, které zhoršují rychlost rozhodování zákazníka.

Pro dlouhé články, blogy a textově náročné weby jsou patkové fonty často lepší volbou, protože usnadňují delší čtení. Fonty jako Georgia, Merriweather, Crimson Text nebo PT Serif byly navrženy přímo pro obrazovky a nabízejí vynikající čitelnost i při delších blocích textu. Pro nadpisy můžete použít kontrastní bezpatkový font, což vytvoří vizuální hierarchii.

Pokud navrhujete web pro designéra, fotografa nebo kreativní agenturu, máte větší prostor pro experimentování. Můžete použít unikátní display fonty pro nadpisy (např. Playfair Display, Bebas Neue nebo Abril Fatface), ale vždy je kombinujte s čitelným fontem pro odstavce. Kreativita je důležitá, ale nikdy nesmí jít na úkor čitelnosti.

Google Fonts nabízí obrovskou knihovnu bezplatných, kvalitních fontů (přes 1400 rodin). Hlavní výhodou je jednoduchá implementace – stačí vložit jeden řádek do HTML nebo CSS. Google Fonts jsou navíc často cachovány v prohlížeči, protože mnoho webů je používá, což teoreticky může zrychlit načítání. Dále Google automaticky servíruje optimalizované formáty (WOFF2) podle typu prohlížeče.

Použití Google Fonts znamená, že při každém načtení stránky prohlížeč kontaktuje externí server (fonts.googleapis.com), což odesílá IP adresu návštěvníka do USA. To je v rozporu s GDPR, jak potvrdily německé soudy v roce 2022. Z tohoto důvodu je dnes doporučeno fonty self-hostovat. Navíc externí požadavek zvyšuje latenci (TTFB) a vytváří závislost na dostupnosti Googlu.

Hostováním fontů na vlastním serveru získáte plnou kontrolu nad rychlostí, bezpečností a soulad s GDPR. Fonty se načítají z vaší domény, což eliminuje externí požadavky a zrychluje načítání (zejména s HTTP/2). Použijte nástroje jako google-webfonts-helper k jednoduchému stažení Google Fonts do lokálního prostředí. Poté je vložte pomocí @font-face v CSS a použijte preload hlavičku pro kritické fonty:

<link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>

Pokud vytváříte rychlý prototyp nebo testujete design, Google Fonts je rychlá volba. Pro produkční weby s důrazem na výkon a soukromí však vždy volte self-hosting. Moderní weby na míru, které vytvářím, vždy používají self-hosted fonty s preload a optimalizovanými formáty, čímž zajišťují maximální rychlost a GDPR compliance.

Nejlepší kombinace fontů vytváří vizuální kontrast, ale přitom si nekonkurují. Klasická kombinace je bezpatkový nadpis + patkový text (např. Montserrat Bold + Merriweather Regular) nebo naopak patkový nadpis + bezpatkový text (např. Playfair Display + Open Sans). Tyto kombinace vytvářejí jasnou hierarchii: nadpis přitahuje pozornost, odstavec je snadno čitelný.

Zde jsou osvědčené kombinace, které fungují skvěle v českém prostředí a podporují diakritiku:

Roboto (nadpisy) + Open Sans (text): Moderní, čistý, univerzální.

Montserrat (nadpisy) + Lora (text): Kontrast mezi geometrickým a seriozním.

Poppins (nadpisy) + Merriweather (text): Přátelský nadpis, autoritativní text.

Playfair Display (nadpisy) + Source Sans Pro (text): Elegantní a profesionální.

Nikdy nekombinujte dva velmi podobné fonty (např. Arial + Helvetica), protože to působí zmateně a nepřináší žádnou hodnotu. Vyhněte se kombinaci dvou výrazných display fontů, které si vzájemně konkurují. Stejně tak nepoužívejte více než tři typy fontů – to vytváří vizuální chaos a zpomaluje web.

Na mobilních zařízeních by text nikdy neměl být menší než 16 px. Menší text nutí uživatele přibližovat, což dramaticky zhoršuje UX a zvyšuje bounce rate. Na desktopu je optimální velikost odstavcového textu mezi 18–21 px. Nadpisy by měly být proporcionálně větší (minimálně 1.5× až 2× větší než odstavec), aby vytvářely jasnou hierarchii.

Pro zajištění čitelnosti musí být kontrastní poměr mezi textem a pozadím minimálně 4.5:1 pro běžný text a 3:1 pro velký text (podle WCAG 2.1 úrovně AA). Šedý text na bílém pozadí často nesplňuje tento standard. Použijte nástroje jako Contrast Ratio nebo WebAIM Contrast Checker k ověření kontrastu. Nikdy nepoužívejte světle šedý text (#ccc) na bílém pozadí – je to běžná chyba, která web činí nečitelným pro mnoho lidé.

Optimální line-height pro odstavce je 1.5–1.8. Pokud je řádkování příliš husté (pod 1.3), text splývá a čtenář ztrácí orientaci. Délka řádku by měla být mezi 50–75 znaky (včetně mezer). Delší řádky (nad 90 znaků) jsou únavné a čtenář snadno ztrácí pozici při přechodu na další řádek. Kratší řádky (pod 40 znaků) vyžadují příliš časté skákání očí a narušují plynulost čtení.

WOFF2 je nejmodernější formát webových fontů a nabízí až 30 % lepší kompresi než starší WOFF nebo TTF. Všechny moderní prohlížeče (včetně Chrome, Firefox, Safari, Edge) WOFF2 podporují. Při self-hostingu vždy preferujte WOFF2 a jako fallback použijte WOFF pro starší prohlížeče:

@font-face { font-family: 'Roboto'; src: url('roboto.woff2') format('woff2'), url('roboto.woff') format('woff'); }

Vlastnost font-display: swap v CSS zajistí, že prohlížeč okamžitě zobrazí text pomocí fallback systémového fontu a po načtení vlastního fontu ho plynule nahradí. To eliminuje FOIT (neviditelný text během načítání) a zlepšuje vnímání rychlosti webu. Příklad:

@font-face { font-family: 'Open Sans'; src: url('opensans.woff2') format('woff2'); font-display: swap; }

Pro fonty, které se používají v nadpisech above the fold (viditelné bez scrollování), použijte <link rel="preload"> v <head> HTML. Tím řeknete prohlížeči, že má tyto fonty stáhnout s nejvyšší prioritou, ještě před CSS nebo JavaScript. To dramaticky zrychlí First Contentful Paint (FCP) a zlepší Core Web Vitals.

Každý řez fontu (Regular 400, Bold 700, Italic, Bold Italic) je samostatný soubor, který musí prohlížeč stáhnout. Pokud použijete 5 různých řezů jednoho fontu, znamená to 5× větší objem dat. Vyberte pouze ty řezy, které skutečně používáte. Pro většinu webů stačí Regular (400) a Bold (700). Pokud nepotřebujete kurzívu, nestahujte ji.

Místo pevných pixelů (px) používejte relativní jednotky jako rem nebo em. 1rem odpovídá velikosti základního fontu prohlížeče (obvykle 16px). Pokud uživatel zvětší velikost písma v nastavení prohlížeče (což dělají lidé se slabším zrakem), text v rem jednotkách se automaticky přizpůsobí. Naopak text v px zůstane stejný a stane se nečitelným. Toto je klíčové pro přístupnost.

Funkce clamp() v CSS umožňuje vytvořit plynule škálující velikost písma, která se přizpůsobuje šířce viewportu. Syntaxe: font-size: clamp(minimální, preferovaná, maximální); Příklad:

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

To znamená, že nadpis H1 bude minimálně 1.5rem, maximálně 3rem, a mezi těmito hodnotami se plynule škáluje podle šířky obrazovky (4 % viewportu). Tím odpadá nutnost definovat breakpointy pro každou obrazovku a typografie je vždy proporcionální.

I když máte responzivní typografii nastavenou správně, vždy testujte na reálných mobilních zařízeních. Emulátor v prohlížeči není dostatečný. Zkontrolujte, zda je text čitelný na iPhone SE (malý displej), iPad (tablet) i velkém monitoru. Věnujte pozornost zejména délce řádků – na mobilech by měly být kratší než na desktopu.

Roboto je jeden z nejpoužívanějších fontů na světě. Je čistý, moderní a perfektně podporuje diakritiku. Vynikající pro webové aplikace, firemní weby a technologické projekty. Má širokou škálu řezů (Thin až Black) a vynikající čitelnost i na malých velikostech.

Open Sans je humanistický sans-serif, který je optimalizovaný pro web i tisk. Je velmi neutrální, přátelský a skvěle funguje jak pro nadpisy, tak odstavce. Používá ho Google na mnoha svých stránkách. Má perfektní podporu češtiny a je ideální pro vzdělávací, neziskové a komunitní projekty.

Montserrat je geometrický sans-serif inspirovaný starými poutacími nápisy z Buenos Aires. Působí moderně, odvážně a je skvělý pro nadpisy. Podporuje češtinu a má řezy od Thin až Black. Ideální pro startupy, tech firmy a kreativní agentury.

Merriweather je patkový font navržený speciálně pro čitelnost na obrazovkách. Je perfektní pro dlouhé texty, blogy a články. Kombinuje tradiční vzhled s moderní technologií. Plně podporuje diakritiku a je jednou z nejlepších voleb pro obsahové weby v češtině.

Lato je polohumanistický sans-serif s teplým a přátelským charakterem. Je skvělý pro firemní weby, landing pages a e-shopy. Má vynikající čitelnost a podporuje rozšířené znaky pro češtinu. Nabízí řezy od Thin až Black, což dává velkou flexibilitu.

Každý další font přidává kilobajty a HTTP požadavky. Nikdy nepoužívejte více než 2–3 rodiny fontů. Ideální je 1 font s různými řezy (Regular, Bold) nebo 2 fonty (nadpis + text). Více fontů vytváří vizuální chaos a dramaticky zpomaluje web.

Pokud nedefinujete fallback fonty v CSS, prohlížeč v případě selhání načtení použije výchozí Times New Roman, což může zcela zničit design. Vždy definujte kompletní font stack: font-family: 'Roboto', Arial, sans-serif;

Šedý text na bílém pozadí je módní trend, který však zhoršuje čitelnost zejména pro starší uživatele a lidi se sníženým zrakem. Vždy ověřte kontrast pomocí nástrojů WCAG a nikdy neklesejte pod poměr 4.5:1.

Text pod 16 px na mobilních zařízeních je nečitelný bez přiblížení. Google to navíc penalizuje v mobilním rankingu. Vždy nastavte minimální velikost 16px pro mobil.

Bez font-display: swap může dojít k FOIT (neviditelný text), kdy uživatel po dobu načítání fontu nevidí žádný obsah. To zvyšuje bounce rate a zhoršuje Core Web Vitals. Vždy použijte font-display: swap.