Struktura článku — Návod na logické uspořádání obsahu
Jak rozdělit delší články do sekcí, aby je čtenáři dočetli do konce. Funguje to…
Přečíst víceTypografie pro čitelnost — Jak vybrat správné písmo
Základní pravidla pro volbu fontů, rozestupu řádků a délky textu. Čtenáři si to opravdu všimnou.
Proč na typografii vůbec záleží?
Když čtenář otevře váš článek, první věc, kterou registruje, není obsah — je to vizuální vzhled. Správná typografie se stane neviditelnou. Lidé budou číst bez toho, aby si ji vůbec všímali. Špatná typografie? To poznají všichni — a skoro všichni váš text opustí.
Není to o tom, aby text vypadal hezky. Je to o tom, aby jej bylo možné číst bez únavy. Když zvolíte správné písmo, správný rozestup a správnou délku řádku, čtenáři mohou strávit více času čtením vaší zprávy. A to je to, co chcete.
Volba správného písma
Existuje tisíc fontů a můžete si vybrat z desítek tisíc. Ale pravda je prostá — pro dlouhé články používáte jednu z asi osmi základních voleb.
Pro tělo textu (body text) chcete serifové nebo bezserifové písmo. Nejčastěji se používají kombinace jako Georgia (serif) nebo Open Sans (bez serifů). Serifová písma mají ty malé “háčky” na koncích písmen — v tištěných knihách se serifová písma čtou lépe. Na obrazovkách se tradičně preferují bezserifová písma, protože jsou čistší.
Ale tady je důležité: nemusíte se rozhodovat mezi serifem a bez-serifem podle toho, co je “trendy” . Rozhodujte se podle čitelnosti. Otestujte oba přístupy se skupinou lidí. Podívejte se, jaký font vybírají sami čtenáři na webech, které čtou denně.
Rozestup řádků — Vzdálenost mezi řádky
Tady je to jednoduché. Chcete, aby byl prostor mezi řádky. Když jsou řádky moc těsně k sobě, oko čtenáře “skáče” mezi nimi a ztrácí místo, kde čtení skončilo.
Pro délku textu (body text) používejte line-height mezi 1,5 a 1,8. To znamená, že pokud je písmo 16 pixelů, bude rozestup řádků 24 až 29 pixelů. Některé webové stránky používají 1,6 — to je dobrý standard. Není to příliš těsné, není to ani příliš volné.
Pokud máte krátké řádky (třeba 50-60 znaků), můžete si dovolit menší rozestup. Pokud máte dlouhé řádky (90+ znaků), budete potřebovat větší rozestup. Čtenář potřebuje dostatek místa, aby našel začátek dalšího řádku bez obtíží.
Délka řádku — Kolik znaků na řádek?
Toto je jeden z nejdůležitějších faktorů. Příliš dlouhé řádky a čtenář se ztrácí. Příliš krátké řádky a text vypadá roztržitě.
Zlatý standard: 50-75 znaků na řádek. Někteří tvrdí, že je to 60 znaků, jiní říkají 70. Zkuste to sami — pravda je, že se to liší podle vašeho fontu a vzhledu.
V CSS se to nastavuje vlastností `max-width`. Pokud používáte 16 pixelů pro text, pak `max-width: 65ch` (65 znaků) je solidní výchozí bod. “ch” jednotka znamená “znaková jednotka” — přesně to, co potřebujete.
Zkontrolujte si to na mobilních zařízeních. Na telefonu by mělo být 40-50 znaků na řádek, protože obrazovka je užší. Na desktopu můžete být blíž k 70-75. CSS media queries vám to umožní nastavit různé max-width pro různé velikosti obrazovky.
Vizuální hierarchie — Které jsou nejdůležitější věci?
Když čtenář skenuje váš článek, měl by vidět strukturu. Nadpisy by měly být větší. Podnadpisy by měly být menší než nadpisy, ale větší než normální text. Normální text by měl být nejmenší.
Nepoužívejte příliš mnoho velikostí fontů. Doporučuji 3-4 úrovně: nadpis článku (H1), sekční nadpisy (H2), podnadpisy (H3) a tělo textu. To je dost. Když máte osm různých velikostí, čtenáři to vidí jako chaos.
Používejte váhu (tučnost) i rozumně. Nemusíte dělat nadpisy obrovské — můžete je dělat tučnější. Tento přístup udržuje článek více kompaktní a stále zcela čitelný.
Kontrast — Musí to být vidět
Tmavý text na světlém pozadí funguje. Světlý text na tmavém pozadí funguje. Tmavý text na tmavém pozadí? Ne. To je neviditelné.
Pro normální čtení
Chcete kontrast alespoň 4.5:1. To znamená, že pokud máte tmavý text, pozadí by mělo být výrazně světlejší. Není to těžké — pokud máte text #1a1a1a (téměř černý) a pozadí #ffffff (bílé), máte kontrast přibližně 21:1. Více než dostatečné.
Pro velký text
Pokud je váš text větší (20 pixelů a více), můžete být o něco méně přísní. Kontrast 3:1 je přijatelný pro velký text. Ale pro tělo textu — stále chcete 4.5:1 nebo více.
Používejte online nástroje jako WebAIM Contrast Checker. Vložte barvu textu a barvu pozadí, a dostanete skóre. Je to jednoduché a ušetří vám spoustu problémů s čitelností.
Shrnutí — Co pamatovat
Vyberte jednoduché, čitelné písmo. Pro tělo textu zůstávejte u klasických možností. Georgia, Open Sans, Inter nebo Lora — všechny fungují skvěle.
Nastavte rozestup řádků na 1,5 až 1,8. To je mezi řádky. Není to příliš těsné, není to ani příliš volné. Čtenáři si ani nebudou myslet na rozestup — budou jen číst.
Délka řádku: 50-75 znaků. Použijte `max-width: 65ch` na tělo textu a upravte to pro mobilní zařízení. Zkontrolujte si to na skutečných zařízeních — jak to vypadá na vašem telefonu?
Vytvořte jasnou vizuální hierarchii. Nadpisy by měly být větší nebo tučnější. Podnadpisy menší. Tělo textu nejmenší. Tři až čtyři úrovně je dost.
Kontrast je klíčový. Tmavý text na světlém pozadí. Světlý text na tmavém pozadí. Nikdy jedno na druhém.
Není to věda. Jde o to, aby si to čtenáři všimli, že čtou bez obtíží. Když se to stane, víte, že jste to udělali správně.
Další články na toto téma
Poznámka k obsahu
Tento článek je informativní průvodce typografií a čitelností webového obsahu. Pravidla a doporučení uvedená zde jsou založena na obecně uznávaných zásadách UX designu a web accessibility standardech. Každý projekt je jedinečný — pokud budujete profesionální web, zvažte konzultaci se zkušeným designérem nebo vývojářem, který pochopí vaše konkrétní potřeby.