Špatná typografie kazí každý web. Solidní návod, jak ji nastavit správně

Typografie je základ každého webu. Ovlivňuje čitelnost, pocit z návštěvy stránky i to, jak uživatelé vnímají vaši značku. A přesto je to věc, které se při tvorbě webu věnuje nejméně pozornosti. Tento průvodce vám ukáže, jak na typografii přistupovat systematicky — od výběru fontu přes správné velikosti textu až po česká typografická pravidla.

Jak vybrat správný font pro web

Výběr fontu pro web je jedno z nejdůležitějších typografických rozhodnutí. Neexistuje univerzálně správná odpověď, ale existují jasná pravidla, která vám pomohou se rozhodnout.

Patkové vs. bezpatkové fonty

Bezpatkové fonty (sans-serif) jako Inter, Poppins nebo DM Sans dominují webovému prostředí. Jsou čisté, dobře čitelné na obrazovkách a fungují v malých i velkých velikostech. Patkové fonty (serif) jako Playfair Display nebo Lora naopak přidávají charakter a eleganci — hodí se zejména pro nadpisy, editorial nebo luxusnější značky.

Na webu se nejčastěji setkáte s kombinací: bezpatkový font pro tělo textu a buď patkový, nebo výrazný bezpatkový pro nadpisy.

Jak kombinovat fonty na webu

Zlaté pravidlo kombinování fontů je jednoduché: používejte maximálně dva fonty na jednom webu. Více fontů vytváří vizuální chaos a zpomaluje načítání stránky.

Funkční kombinace jsou například:

• výrazný patkový font pro nadpisy ﹢ neutrální bezpatkový pro text,

• geometrický bezpatkový pro nadpisy ﹢ humanistický bezpatkový pro text,

• jeden univerzální font (např. Inter) ve více řezech — light, regular, semibold, bold.

Pokud si nejste jisti, nejbezpečnější volbou je jeden dobře vybavený font s dostatečnou sadou řezů.

Kde hledat fonty pro web

Google Fonts nabízí stovky kvalitních fontů zdarma a jsou optimalizované pro webové použití. Adobe Fonts jsou dostupné s předplatným Creative Cloud. Pokud chcete mít opravdu vylazenou typografiij stojí za zvážení placené fonty například od Briefcase Type Foundry, Displaay a dalších kvalitních typefoundry — přinesou vaší značce jedinečnost.

V solidpixels jsou součástí každého webu desítky kurátorsky vybraných fontů od Google Fonts, které jsou k dispozici pro všechny uživatele a zajišťují široký výběr typografických možností pro různé projekty. Pro ambasadory nabízí ještě další výhodu, a to možnost vkládat vlastní písmo, čímž mohou přizpůsobit vzhled svých webů přesně podle svých potřeb a vkusu.

Při výběru vždy zkontrolujte, zda font obsahuje českou diakritiku (ě, š, č, ř, ž, ý, á, í, é, ů, ú). U Google Fonts to zjistíte filtrováním podle jazyka Czech.

Na co si dát pozor při výběru písma pro web

• Čitelnost v malých velikostech: otevřete font v 16 px a přečtěte odstavec textu. Je pohodlně čitelný?

• Výška x-výšky: fonty s větší výškou malých písmen jsou čitelnější v těle textu.

• Podpora české diakritiky: vždy ověřte, že font obsahuje všechny potřebné znaky.

• Licence: zkontrolujte, zda font smíte používat na webu a případně v komerčních projektech.

Velikost textu a typografická škála

Správné velikosti písma na webu nejsou náhoda — vycházejí ze systému. Dobře nastavená typografická škála vytváří jasnou hierarchii informací a usnadňuje uživatelům orientaci na stránce.

Jaká má být velikost textu na webu?

Výchozí velikost těla textu by na webu měla být minimálně 16 px. Toto je dnes standardem a vychází z průměrné vzdálenosti čtení od obrazovky. Pro obsahově náročné weby (blogy, dokumentace, vzdělávací platformy) je vhodné zvýšit základní velikost na 18 px nebo i 20 px — text se lépe čte při delší práci.

Písmo menší než 16 px používejte pouze pro doplňkové informace: popisky pod obrázky, poznámky pod čarou, metadata. Nikdy ne pro hlavní obsah.

Typografická škála pro nadpisy

Nadpisy by měly vizuálně vyčnívat z textu a jasně signalizovat hierarchii. Dobře fungující škála velikostí nadpisů pro desktop:

Nejde o dogma — důležité je, aby byl každý stupeň hierarchie jasně odlišitelný od ostatních. Pokud jsou H1 a H2 podobně velké, ztrácí se smysl hierarchie.

Modularní typografická škála

Profesionálním přístupem je použití modularní škály — každý stupeň je násobkem předchozího stanoveným poměrem. Oblíbené poměry jsou 1,25 (major third), 1,333 (perfect fourth) nebo 1,5 (perfect fifth). Pokud máte základní text 18 px a použijete poměr 1,333, dostanete škálu: 18 / 24 / 32 / 42 / 56 px. Výsledek je harmonická řada, která působí přirozeně a konzistentně.

Řádkování (line-height) a délka řádku

Dvě nejčastěji podceňované vlastnosti typografie na webu. Přitom mají zásadní vliv na komfort čtení.

Jaké má být řádkování textu na webu?

Řádkování (line-height) určuje vzdálenost mezi řádky textu. Pro tělo textu je ideální hodnota 1,5 až 1,7násobek velikosti písma. Konkrétně: při 18px textu nastavte line-height na 1,6 — to odpovídá 28,8 px mezery mezi řádky.

Pro nadpisy platí jiná pravidla: velká písma mají přirozeně velké mezery, takže řádkování snižujte. Pro H1 v 80 px je vhodné řádkování 1,0 až 1,1. Příliš velké řádkování u nadpisů vytváří vzdušné bloky, které opticky nesouvisí.

Optimální délka řádku pro čitelnost

Optimální délka řádku pro pohodlné čtení je 60 až 80 znaků, neboli přibližně 45 až 75 slov na řádku. Kratší řádky nutí oči k příliš častému přeskakování, delší způsobují ztrátu orientace při přechodu na nový řádek.

V praxi to znamená omezit maximální šířku textových bloků (max-width) na přibližně 680–760 px při základní velikosti 18 px. Na full-width layoutech je časté omezení textového sloupce i uprostřed stránky.

Proložení znaků (letter-spacing)

Proložení znaků neboli letter-spacing (tracking) upravuje vzdálenost mezi jednotlivými písmeny. Pro tělo textu doporučujeme ponechat výchozí hodnotu nebo velmi jemnou úpravu (0 až 0,2 px). U nadpisů ve velkých velikostech může mírné stažení (záporný tracking, např. -0,5 px) zlepšit kompaktnost a výraz. U verzálkových nadpisů naopak mírné rozvolnění (0,5 až 2 px) zvyšuje čitelnost.

Typografie na mobilních zařízeních

Mobilní typografie není jen zmenšená verze desktopu. Menší obrazovky mají jiné podmínky pro čtení a vyžadují specifická pravidla.

Velikost písma na mobilu

Základní text by na mobilu neměl být menší než 16 px — to je minimum dané i doporučeními pro přístupnost (WCAG). Prohlížeče na iOS automaticky zvětšují text menší než 16 px, což může narušit váš layout. Mnoho webů pracuje na mobilu s 16 px textem a nadpisy škálovanými na 60–70 % desktopových hodnot.

Nadpisy na mobilních zařízeních

Velké nadpisy v desktopovém měřítku na mobilu jednoduše nefungují. H1 v 80 px na telefonu zabere celou obrazovku a zkrátí se do dvou slov. Proto je nezbytné definovat typografii pro každou breakpoint zvlášť. Typická mobilní H1 se pohybuje mezi 36 a 48 px.

Délka řádku a okraje na mobilu

Na mobilní obrazovce se délka řádku přirozeně zkracuje. Při šířce 390 px a okrajích 24 px zbude pro text přibližně 342 px — to odpovídá zhruba 40–50 znakům na řádek při 16 px. Tato hodnota je stále v akceptovatelném rozmezí. Nezmenšujte okraje za účelem vejití více textu na řádek — to čitelnost zhorší, ne zlepší.

Dotykové cíle a mezery mezi prvky

Na mobilu musíte myslet i na dostatečné mezery kolem klikatelných prvků. Tlačítka a odkazy by měly mít minimální výšku 44 px (doporučení Apple) nebo 48 px (doporučení Google). Hustě naskládané textové odkazy mohou vést k chybným kliknutím.

Testování typografie na reálném zařízení

Vždy testujte typografii přímo na telefonu, ne jen v simulátoru prohlížeče. Reálné podmínky — sluneční světlo, vzdálenost držení, pohyb — mohou odhalit problémy, které v DevTools nevidíte. Zvláštní pozornost věnujte kontrastu textu vůči pozadí.

Česká typografická pravidla

Česky psaný web by měl dodržovat česká typografická pravidla. Nejde o formalitu — správně sázený text působí profesionálně a zvyšuje důvěryhodnost.

Nedělitelná mezera — nejčastěji porušované pravidlo

V češtině nesmí zůstat na konci řádku jednopísmenná předložka nebo spojka (k, s, v, z, a, i, o, u). Řešením je nedělitelná mezera (non-breaking space), která drží slovo s následujícím slovem pohromadě.

Jak vložit nedělitelnou mezeru v solidpixels:

• Windows: alt ﹢mezerník

• MacOS: ⌥ ( option) ﹢ mezerník

Nedělitelná mezera se používá také za čísly s jednotkami (100 km, 50 Kč, 18 px), za zkratkami (Ing. Novák, p. Dvořák) a v datumech (1. ledna 2024).

České uvozovky

V češtině se používají tzv. české uvozovky ve tvaru „dole-nahoře". Nikoliv anglické "straight quotes" ani francouzské guillemets.

• Správně: „Toto je citát."

• Špatně: "Toto je citát."

Jak vložit české uvozovky:

• Uvozovka dolní „ : Alt﹢0132 (Win) nebo zkopírovat ze znakové mapy

• Uvozovka horní " : Alt﹢0147 (Win)

• MacOs: většina editorů je zadá automaticky při správném nastavení jazyka klávesnice

Pomlčka vs. spojovník

Toto jsou dva různé znaky s různým použitím:

• Spojovník (-) se používá jako součást slov: česko-slovenský, modro-bílý, e-mail. Mezi spojovníkem a okolním textem nejsou mezery.

• Pomlčka (–) se používá pro oddělení vedlejší věty nebo jako náhrada slova „až": Praha – Brno, 10–20 km, „Přišel – a hned odešel." Mezi pomlčkou a okolním textem jsou mezery (nebo nedělitelné mezery).

Další česká typografická pravidla

• Tři tečky: vždy jako jeden znak … (elipsa, U﹢2026), nikoliv tři samostatné tečky

• Čísla: tisíce se oddělují pevnou mezerou (1 000 000 Kč), nikoliv tečkou ani čárkou

• Desetinná čárka: v češtině se používá čárka, nikoliv tečka (3,14 — nikoliv 3.14)

• Zkratky: za zkratkami typu apod., atd., tj. se píše tečka. Za zkratkami jednotek (km, kg, px) tečka není

Kontrast a přístupnost textu

Typografie musí být čitelná pro všechny uživatele, včetně těch se zrakovými obtížemi. Přístupnost není volitelný doplněk — je to standard a v mnoha případech i právní požadavek.

Minimální kontrastní poměr textu

Standard WCAG 2.1 definuje minimální kontrastní poměry mezi textem a pozadím:

Kontrast ověřte pomocí nástrojů jako WebAIM Contrast Checker nebo Stark (plugin pro Figmu). Šedý text na bílém pozadí vypadá elegantně, ale může nesplňovat minimální požadavky.

Nejčastější chyby v kontrastu textu

• Bílý text na světle barevném pozadí: vizuálně atraktivní, ale často nedostatečný kontrast

• Průhledný text přes fotografii: kontrast se mění v závislosti na části fotografie pod textem — vždy přidejte tmavý overlay

• Barevný text pro doplňkové informace: zajistěte, že je dostatečně čitelný i bez rozlišení barvy (pro barvoslepé uživatele)

Praktický checklist pro nastavení typografie na webu

Než web spustíte, projděte si tento seznam:

• Základní font těla textu: minimálně 16 px, ideálně 18 px

• Řádkování těla textu: 1,5 až 1,7

• Maximální šířka textového sloupce: 680–760 px

• Hierarchie nadpisů: každý stupeň jasně odlišitelný od ostatních

• Mobilní typografie: nadpisy škálované, text minimálně 16 px

• Kontrast textu: splňuje WCAG 2.1 AA (4,5 : 1 pro normální text)

• Font obsahuje českou diakritiku

• Nedělitelné mezery za jednopísmennými předložkami

• České uvozovky místo anglických

• Správná pomlčka vs. spojovník

• Maximálně dva fonty na webu

• Testování na reálném mobilním zařízení

Dobrá typografie na webu je neviditelná

Uživatel si jí nevšimne — ale pocítí ji. Pohodlně přečte celý článek, bez přemáhání najde informace, které hledá, a odchází s pocitem, že web působí profesionálně. Naopak špatná typografie odrazuje, unavuje a podkopává důvěryhodnost značky.

Začněte se základy: správný font pro web, čitelná velikost textu, dostatečné řádkování. Pak dolaďte detaily: hierarchii nadpisů, mobilní variantu, česká typografická pravidla. A vždy testujte na reálných zařízeních.

Typografie není práce jednoho dne — je to péče, která se vrací v každém přečteném odstavci.