Typografie, která funguje — bez zbytečných pravidel

Dobré písmo není o tom zpamatovat si všechna pravidla. Je to o tom, aby byl text čitelný a příjemný.

9 min čtení Střední úroveň Únor 2026

Typografie a písma zobrazená v designovém nástroji na počítačovém monitoru

Proč má typografie smysl?

Typografie ovlivňuje, jak lidé vnímaní váš obsah. Není to jen o tom vybrat hezké písmo — jde o to, aby se text dal pohodlně číst a aby návštěvníci zůstali na stránce déle. Správná volba písma, velikosti a řádkování může zvýšit čitelnost až o 30 procent.

Nejdůležitější je, že se nemusíte držet striktních pravidel. Moderní webdesign vám dává svobodu experimentovat a vytvářet typografii, která je nejen funkční, ale taky autentická. Pokud víte, co dělají jednotlivé prvky, můžete je porušit se smyslem.

Volba písma — co opravdu záleží

Existují tisíce fontů. Ale pro web potřebujete vlastně jen pár kvalitních. Rozdělujte si písma na dvě kategorie: serifová (s nožičkami) a bezserifová (bez nich).

Serifová písma (jako Georgia nebo Playfair Display) vypadají elegantněji a tradičněji. Bezserifová (Arial, Inter, Roboto) jsou moderní a čitelná na malých obrazovkách. Kombinovat obě skupiny můžete, ale neměli byste to přehánět — maximálně tři fonty na stránce, lépe dva.

Pro tělo textu se vždycky vyplatí zvolit něco, co je určené přímo pro web. Fonty jako Inter, Segoe UI nebo system fonty jsou optimalizované pro obrazovky a jsou čitelné i při malých velikostech. Nemusíte používat Google Fonts — běžné webové fonty stojí za to.

Řádkování a velikost — základy čitelnosti

Víte, co dělá rozdíl mezi textem, který se čte hladce a textem, který vás pronásleduje? Řádkování. Vzdálenost mezi řádky by měla být 1,5 až 1,8krát větší než výška písma. To znamená, že pokud máte text o velikosti 16 pixelů, řádkování by mělo být kolem 24 až 28 pixelů.

Podobně důležitá je i délka řádku. Kdyby měl řádek přes 70 znaků, oko vás bude ztrácet mezi řádky. Ideálně mezi 50 až 75 znaky. Na mobilech je to trochu jiné — tam můžete jít i na 40 znaků.

Mezery mezi slovy a znaky? Ty by měly být přirozené. V CSS se to řeší pomocí letter-spacing a word-spacing. Ale začněte s výchozími hodnotami — změny dělají jen v krajních případech.

Vizuální hierarchie — jak vést oko návštěvníka

Hierarchie v typografii znamená, že různé prvky mají různou důležitost. Hlavní nadpis by měl být větší a výraznější. Podnadpisy menší. Běžný text ještě menší. Všichni to víme — ale mnozí to zapomínají dělat konzistentně.

Jak na to:

H1 — největší nadpis, jenom jeden na stránce
H2 — sekční nadpisy, o něco menší
H3 — podnadpisy pod H2
Body text — standardní velikost, obvykle 16px
Malý text — poznámky, metadata, 12-14px

Kontrast — aby se to dalo číst

Kontrast mezi textem a pozadím není kosmetika — je to záležitost přístupnosti. Text by měl mít minimálně poměr kontrastu 4,5:1 oproti pozadí. To znamená, že tmavý text na světlém pozadí funguje lépe než světlý text na tmavém.

Zkuste si to: nechte text přečíst někomu s dyslexií nebo slabovidostí. Zjistíte rychle, zda je váš kontrast dostačující. Na webu je to měřitelné — použijte nástroje jako WebAIM Contrast Checker.

Nepoužívejte šedé texty na bílém pozadí, pokud to není opravdu nezbytné. Černá nebo tmavě šedá na bílém? To funguje vždycky. A to je vlastně všechno, co potřebujete vědět.

Responzivní typografie — od mobilu k desktopu

Mobil (< 480px)

Na mobilech je prostor omezený. Zmenšete fonty, zvětšete řádkování. H1 by měl být kolem 28-32px. Body text 14-16px. Řádkování je kritické — 1,6 až 1,8.

Tablet (480-1024px)

Střední cesta. H1 kolem 32-40px. Body text 15-18px. Tady máte více volnosti — můžete si hrát s mezerami a řádkováním více.

Desktop (> 1024px)

Máte místo. H1 může být 48-64px. Body text 16-20px. Tady se opravdu můžete rozjet — delší řádky, větší mezery, více typu písem.

Důležité: neměňte typografii jen tak. Měňte ji proto, aby byla čitelná na každém zařízení. CSS clamp() funkce vám pomůže automaticky škálovat velikosti písem bez media queries.

Shrnutí — typografie je jednoduší, než si myslíte

Dobré písmo není o tom znát všechna pravidla. Je to o tom dělat věci s cílem — aby se text dal snadno číst a aby vypadal dobře. Pokud budete mít na paměti těchto pár věcí, už budete dělat lépe než 80 procent webů:

Vyberte si dva fonty — jeden na nadpisy, jeden na text

Řádkování 1,5 až 1,8 — to dělá čitatelnost

Délka řádku kolem 50-75 znaků

Dobrý kontrast — 4,5:1 je standard

Responzivita — text se mění na různých zařízeních

Začněte experimentovat. Vezměte si nějakou stránku, kterou máte rádi, a prostudujte si její typografii. Kolik fontů tam je? Jak velké jsou nadpisy? Jaké je řádkování? Tímto způsobem se naučíte vidět dobrou typografii, a pak ji budete moci vytvářet.

Poznámka k obsahu

Tento článek poskytuje vzdělávací informace o typografii a webdesignu. Konkrétní implementace se vždy liší v závislosti na vašem projektu, cílové skupině a technických omezeních. Doporučujeme vždy testovat vaši typografii na reálných uživatelích a používat nástroje pro ověření přístupnosti. Tyto pokyny nejsou absolutní — jsou to Best practices založené na zkušenostech a výzkumu.