Praktický sprievodca čitateľným písmom na modernom webe

Prečo sa väčšina webových stránok číta ťažšie, než by mala

Priemerná webová stránka v roku 2026 prichádza s vlastnou rodinou písiem, starostlivo zvolenými značkovými farbami a dizajnovým systémom, ktorý určuje rozstupy až na pixel. No hlavný text — teda to, čo si väčšina návštevníkov prišla skutočne prečítať — často zostáva vo veľkosti 14px, v sivom odtieni s nízkym kontrastom a v písme optimalizovanom pre nadpisy, nie pre odseky.

Toto nie je výčitka voči dizajnérom. Je to pripomienka, že čitateľnosť je samostatná disciplína od vizuálneho dizajnu a tieto dve oblasti sa nie vždy zhodujú. Písmo, ktoré vyzerá ostro v hero sekcii, môže byť pri dĺžke odseku vyčerpávajúce. Farebná paleta, ktorá dobre vyzerá na fotografiách, môže zlyhať pri kontrole kontrastu. Rozloženie, ktoré funguje na 27-palcovom monitore, sa môže na mobile zrútiť do úzkeho stĺpca.

Dobrá správa: čitateľné písmo si nevyžaduje diplom z typografie. Vyžaduje pozornosť k niekoľkým premenným, ktoré majú neúmerne veľký vplyv.

Veľkosť písma: väčšia, než si myslíte

Najčastejšou chybou čitateľnosti na webe je príliš malý hlavný text. Dizajnéri často nastavujú text tela stránky na 14px alebo 15px, pretože v mierke desktopu „vyzerá čisto“, a potom zabudnú, že významná časť čitateľov je na telefónoch, často v nie ideálnom osvetlení.

Praktický základ pre hlavný text v roku 2026:

• Desktop: minimum 18px, odporúčané 20px
• Mobil: minimum 16px, odporúčané 18px

Tieto hodnoty môžu pôsobiť veľké, ak ste zvyknutí na menšie písmo, ale odrážajú spôsob, akým ľudia na obrazovkách skutočne čítajú. Väčší text znižuje únavu očí, zlepšuje porozumenie a sprístupňuje obsah čitateľom s miernym zhoršením zraku, ktorí si neupravili nastavenia prehliadača.

Ak váš dizajnový systém vyžaduje menšie písmo, otestujte ho na telefóne na slnku. Ak pri čítaní žmúrite, je príliš malé.

Výška riadku: doprajte textu priestor dýchať

Výška riadku (riadkovanie) je zvislý priestor medzi riadkami textu. Ak je príliš tesná, riadky splývajú. Ak je príliš voľná, oko stráca nadväznosť medzi riadkami.

Pre hlavný text funguje pri väčšine písiem výška riadku 1.5 až 1.7. Nadpisy môžu byť tesnejšie (1.1 až 1.3), ale text odsekov potrebuje priestor.

CSS:

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

Toto je jedno z najjednoduchších zlepšení čitateľnosti. Ak má váš hlavný text momentálne line-height: 1.2 alebo používa pevnú hodnotu v pixeloch, zmeňte to ešte dnes.

Dĺžka riadku: kratšia, než si myslíte

Optimálna dĺžka riadku pre hlavný text je 45 až 75 znakov na riadok, približne 8 až 12 slov. Riadky dlhšie než 90 znakov sťažujú oku návrat na začiatok ďalšieho riadka. Riadky kratšie než 40 znakov vytvárajú trhaný, rozdrobený zážitok z čítania.

Väčšina webových stránok sa tu mýli tým, že nechá text roztiahnuť sa na celú šírku viewportu, najmä na desktope. Monitor široký 1920px dokáže zobraziť viac než 150 znakov na riadok, čo je pri čítaní vyčerpávajúce.

Riešením je max-width na textovom kontajneri:

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

Jednotka ch sa používa málo, ale na toto je ideálna: škáluje sa s veľkosťou písma a približne zodpovedá šírke znaku.

Kontrast: nie je to také jednoduché ako čierna na bielej

WCAG 2.1 určuje minimálny kontrastný pomer 4.5:1 pre hlavný text (úroveň AA) a 7:1 pre rozšírenú prístupnosť (úroveň AAA). Väčšina webových stránok to na papieri spĺňa, ale v praxi zlyháva, pretože používa svetlosivý text na bielom pozadí.

Častí vinníci:

• #666666 na #FFFFFF (4.54:1, prejde len tesne)
• #777777 na #FFFFFF (4.47:1, neprejde)
• Akýkoľvek odtieň svetlejší než #767676 na bielej (neprejde)

Ak váš dizajnový systém definuje „text-secondary“ ako svetlosivú, otestujte ju. WebAIM contrast checker je najrýchlejší spôsob overenia.

Tmavý režim to ďalej komplikuje. Čisto biely text na čisto čiernom pozadí vytvára haláciu (žiariaci efekt), ktorá sa číta ťažšie než mierne lomená biela na tmavosivej. Lepší prístup:

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

Výber písma: predvolené písma sú lepšie, než si myslíte

Vlastné webové písma sú všadeprítomné, ale prinášajú kompromisy. Pridávajú latenciu, zväčšujú veľkosť stránky a ak sa nenačítajú opatrne, môžu blokovať vykresľovanie. Pre hlavný text sú často lepšou voľbou systémové písma.

Robustný stack systémových písiem v roku 2026:

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

Tým získate San Francisco na macOS/iOS, Segoe UI na Windows a Roboto na Android — všetko veľmi čitateľné, profesionálne navrhnuté písma, ktoré sa načítajú okamžite.

Ak pre hlavný text používate vlastné písmo, vyberte také, ktoré je navrhnuté na dlhé čítanie, nie na display. Vyhnite sa:

• Ultraľahkým alebo ultratučným rezom pre text odsekov
• Zúženým alebo rozšíreným variantom
• Písmam s nízkou výškou x (výškou malých písmen)

Pred rozhodnutím otestujte zvolené písmo na dĺžke odseku.

Responzívna typografia: plynulé typografické škály

Pevné veľkosti písma sa medzi zariadeniami neškálujú dobre. Hlavné písmo s veľkosťou 20px, ktoré je pohodlné na desktope, môže na mobile pôsobiť príliš veľké.

Plynulá typografia používa clamp() na hladké škálovanie veľkosti písma medzi minimom a maximom:

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

Toto škáluje od 16px na malých obrazovkách po 20px na veľkých obrazovkách, s plynulou interpoláciou medzi nimi. Je to sofistikovanejšie než breakpointy v media queries a prispôsobí sa akejkoľvek šírke viewportu.

Pre kompletnú typografickú škálu (nadpisy, hlavný text, malý text) nástroje ako Utopia generujú plynulé škály podľa vašich obmedzení.

Rozstupy odsekov a zarovnanie textu

Dva malé detaily, na ktorých záleží:

1. Rozstupy odsekov: Pridajte priestor medzi odsekmi (margin-block-end: 1em) alebo použite odsadenie prvého riadka (text-indent: 1.5em), ale nie oboje. Väčšina webového obsahu používa rozstupy.

1. Zarovnanie textu: Zarovnanie doľava (alebo doprava pri jazykoch RTL) je takmer vždy čitateľnejšie než zarovnanie do bloku, ktoré vytvára nerovnomerné medzery medzi slovami, ak nie je zapnuté delenie slov. Hlavný text zarovnaný na stred sa číta ťažko a mal by byť vyhradený pre krátke pasáže.

Testovanie čitateľnosti v praxi

Čitateľnosť nie je úplne objektívna, ale môžete ju testovať:

• Prečítajte si vlastný obsah na telefóne v rôznych svetelných podmienkach
• Spustite audit prístupnosti v Lighthouse, aby ste zachytili problémy s kontrastom a veľkosťou písma (návod nájdete v článku ako čítať Lighthouse report bez paniky)
• Požiadajte niekoho nad 50 rokov, aby si prečítal stránku bez úpravy nastavení
• Skontrolujte v analytike mieru okamžitých odchodov na stránkach s veľkým množstvom textu — ak ľudia rýchlo odchádzajú, čitateľnosť môže byť jedným z faktorov

Ak sa váš obsah číta ťažko, ľudia ho nebudú čítať. Je to také jednoduché.

Ako to vyzerá v praxi

Čitateľný štýl hlavného textu v roku 2026 môže vyzerať 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;
  }
}

Toto približne v tucte riadkov CSS pokrýva veľkosť písma, výšku riadku, dĺžku riadku, kontrast a responzívne škálovanie. Nie je to vzrušujúce, ale funguje to.

Kedy pravidlá porušiť

Tieto odporúčania sa vzťahujú na hlavný text — odseky, ktoré ľudia čítajú kvôli informáciám. Nadpisy, popisky, UI štítky a marketingové texty majú iné obmedzenia a môžu tieto pravidlá ohýbať.

Ak však niekto prišiel na váš web čítať článok, dokumentačnú stránku alebo opis produktu, čitateľné písmo nie je voliteľné. Je to základné očakávanie.