Praktický průvodce čitelným písmem na moderním webu

Proč je většina webů hůře čitelná, než by měla být

Průměrný web v roce 2026 přichází s vlastní rodinou písem, pečlivě vybranými barvami značky a design systémem, který určuje rozestupy na pixel přesně. Přesto běžný text — tedy to, kvůli čemu většina návštěvníků skutečně přišla — často sedí na 14px v málo kontrastní šedé a je vysázen písmem optimalizovaným pro nadpisy, ne pro odstavce.

Tohle není kritika designérů. Je to připomínka, že čitelnost je samostatná disciplína od vizuálního designu a že tyto dvě oblasti nejsou vždy v souladu. Písmo, které vypadá ostře v hero sekci, může být při délce odstavců vyčerpávající. Barevná paleta, která dobře vypadá na snímcích, může neprojít kontrolou kontrastu. Rozvržení, které funguje na 27palcovém monitoru, se může na mobilu zhroutit do úzkého sloupce.

Dobrá zpráva: čitelné písmo nevyžaduje titul z typografie. Vyžaduje pozornost k několika proměnným, které mají neúměrně velký dopad.

Velikost písma: větší, než si myslíte

Nejčastější chyba v čitelnosti na webu je příliš malý běžný text. Designéři často nastavují text odstavců na 14px nebo 15px, protože na desktopu „vypadá čistě“, a pak zapomenou, že významná část čtenářů je na telefonech, často v ne zcela ideálním osvětlení.

Praktický základ pro běžný text v roce 2026:

• Desktop: minimum 18px, ideálně 20px
• Mobil: minimum 16px, ideálně 18px

Pokud jste zvyklí na menší písmo, tato čísla působí velká, ale odpovídají tomu, jak lidé na obrazovkách skutečně čtou. Větší text snižuje namáhání očí, zlepšuje porozumění a zpřístupňuje obsah čtenářům s mírným zhoršením zraku, kteří si neupravili nastavení prohlížeče.

Pokud váš design systém vyžaduje menší písmo, otestujte ho na telefonu na slunci. Pokud mhouříte oči, je příliš malé.

Výška řádku: dejte textu prostor dýchat

Výška řádku (proklad) je svislý prostor mezi řádky textu. Když je příliš těsná, řádky splývají. Když je příliš volná, oko ztrácí návaznost mezi řádky.

Pro běžný text funguje u většiny písem výška řádku 1.5 až 1.7. Nadpisy mohou být těsnější (1.1 až 1.3), ale text odstavců potřebuje prostor.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Tohle je jedna z nejjednodušších výher v čitelnosti. Pokud má váš běžný text aktuálně line-height: 1.2 nebo používá pevnou hodnotu v pixelech, změňte to ještě dnes.

Délka řádku: kratší, než si myslíte

Optimální délka řádku pro běžný text je 45 až 75 znaků na řádek, zhruba 8 až 12 slov. Řádky delší než 90 znaků ztěžují oku návrat na začátek dalšího řádku. Řádky kratší než 40 znaků vytvářejí trhaný, roztříštěný zážitek ze čtení.

Většina webů to dělá špatně tím, že nechá text roztáhnout přes celou šířku viewportu, zejména na desktopu. Monitor široký 1920px pojme více než 150 znaků na řádek, což je pro čtení vyčerpávající.

Řešením je max-width na textovém kontejneru:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Jednotka ch se používá málo, ale pro tohle je ideální: škáluje se s velikostí písma a přibližně odpovídá šířce znaku.

Kontrast: není to tak jednoduché jako černá na bílé

WCAG 2.1 stanovuje minimální kontrastní poměr 4.5:1 pro běžný text (úroveň AA) a 7:1 pro rozšířenou přístupnost (úroveň AAA). Většina webů to na papíře splňuje, ale v praxi selhává, protože používá světle šedý text na bílém pozadí.

Častí viníci:

• #666666 na #FFFFFF (4.54:1, těsně prochází)
• #777777 na #FFFFFF (4.47:1, neprochází)
• Jakýkoli odstín světlejší než #767676 na bílé (neprochází)

Pokud váš design systém definuje „text-secondary“ jako světle šedou, otestujte ji. WebAIM contrast checker je nejrychlejší způsob, jak to ověřit.

Tmavý režim to ještě komplikuje. Čistě bílý text na čistě černém pozadí vytváří halaci (zářící efekt), která se čte hůře než lehce lomená bílá na tmavě šedé. Lepší přístup:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Volba písma: výchozí fonty jsou lepší, než si myslíte

Vlastní webové fonty jsou všudypřítomné, ale nesou s sebou kompromisy. Přidávají latenci, zvětšují velikost stránky a mohou blokovat vykreslování, pokud nejsou načteny pečlivě. Pro běžný text jsou systémové fonty často lepší volbou.

Robustní sada systémových fontů v roce 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Tím získáte San Francisco na macOS/iOS, Segoe UI na Windows a Roboto na Androidu — všechno vysoce čitelná, profesionálně navržená písma, která se načtou okamžitě.

Pokud pro běžný text použijete vlastní font, vyberte takový, který je navržený pro delší čtení, ne pro display použití. Vyhněte se:

• Ultra-light nebo ultra-bold řezům pro text odstavců
• Zúženým nebo rozšířeným variantám
• Fontům s nízkou x-height (výškou malých písmen)

Než se pro vybrané písmo rozhodnete, otestujte ho v délce odstavců.

Responzivní typografie: fluidní typografické škály

Pevné velikosti písma se napříč zařízeními neškálují dobře. Velikost 20px pro běžný text, která je pohodlná na desktopu, může na mobilu působit příliš velká.

Fluidní typografie používá clamp() k plynulému škálování velikosti písma mezi minimem a maximem:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Tím se velikost škáluje od 16px na malých obrazovkách po 20px na velkých, s plynulou interpolací mezi tím. Je to sofistikovanější než breakpointy v media queries a přizpůsobí se jakékoli šířce viewportu.

Pro kompletní typografickou škálu (nadpisy, běžný text, drobný text) generují nástroje jako Utopia fluidní škály podle vašich omezení.

Mezery mezi odstavci a zarovnání textu

Dva drobné detaily, na kterých záleží:

1. Mezery mezi odstavci: Přidejte mezeru mezi odstavce (margin-block-end: 1em) nebo použijte odsazení prvního řádku (text-indent: 1.5em), ale ne obojí. Většina webového obsahu používá mezery.

1. Zarovnání textu: Zarovnání vlevo (nebo vpravo u RTL jazyků) je téměř vždy čitelnější než zarovnání do bloku, které vytváří nerovnoměrné mezery mezi slovy, pokud není zapnuté dělení slov. Běžný text zarovnaný na střed se čte obtížně a měl by být vyhrazen krátkým pasážím.

Testování čitelnosti v praxi

Čitelnost není čistě objektivní, ale můžete ji testovat:

• Přečtěte si vlastní obsah na telefonu v různých světelných podmínkách
• Spusťte audit přístupnosti v Lighthouse, abyste zachytili problémy s kontrastem a velikostí písma (návod najdete v článku jak číst Lighthouse report bez paniky)
• Požádejte někoho staršího 50 let, aby si přečetl stránku bez úpravy nastavení
• Zkontrolujte v analytice míru okamžitého opuštění u textově náročných stránek — pokud lidé rychle odcházejí, čitelnost může být jedním z faktorů

Pokud se váš obsah špatně čte, lidé ho číst nebudou. Je to tak jednoduché.

Jak to vypadá v praxi

Čitelný styl běžného textu v roce 2026 může vypadat takto:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Tohle pokrývá velikost písma, výšku řádku, délku řádku, kontrast a responzivní škálování přibližně v tuctu řádků CSS. Není to vzrušující, ale funguje to.

Kdy pravidla porušit

Tato doporučení platí pro běžný text — odstavce, které lidé čtou kvůli informacím. Nadpisy, popisky, UI štítky a marketingové texty mají jiná omezení a mohou tato pravidla ohýbat.

Pokud ale někdo přišel na váš web číst článek, stránku dokumentace nebo popis produktu, čitelné písmo není volitelné. Je to základní očekávání.