Texty jsou důležité jak pro vyhledávače, tak zejména pro vaše zákazníky – pro lidi. Měli byste si však uvědomit, že nejen čtivost a kvalita textových informací, ale také jejich čitelnost významně ovlivňují kvalitu vašeho webu a jeho obchodní výsledky. Nesmíte totiž zapomínat, že na webu se stále častěji pohybují lidé vyššího věku, kteří již nemusejí mít zrak jako ostříž. Stejně tak na váš web mohou přijít lidé s nějakým zrakovým postižením anebo jen mají třeba starým monitorem. Ve všech takových případech je důležité, aby texty vašeho webu byly dostatečně kontrastní vůči pozadí a velikost písma byla dostatečně veliká.
Myslete na všechny tyto možnosti a nepřipravujte se sami o návštěvníky svého webu.
Sami posuďte, který text tlačítka je čitelnější:
A co zde?
Který z dvou výše uvedených obrázků je čitelnější? Jak sami na příkladech vidíte, čitelnost textů může významně ovlivnit použitelnost webů. Pokud například jsou špatně čitelné text v navigaci, může to zcela znemožnit procházení vašeho webu.
Obsah článku
Kontrast
Jak si můžete sami zkontrolovat čitelnost textů na svém webu? Je to velmi jednoduché, stáhněte si do prohlížeče Chrome doplněk Color Contrast Analyzer nebo můžete využít i některé online nástroje jako třeba https://contrastchecker.com/ Tento nástroj mohou využít i grafici při svých návrzích, když zadají barvu pozadí a popředí přímo pomocí hexadecimálního či RGB zápisu.
Velikost písma, řádkování
Dalšími důležitými drobnostmi, které mohou výrazně ovlivnit čitelnost textů je velikost písma a řádkování textu. Podívejte se opět na příklady a sami posuďte, jaký text je nakolik čitelný.
Řádkování 100 %
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Nam quis nulla. Suspendisse sagittis ultrices augue. Nulla non arcu lacinia neque faucibus fringilla. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam dictum tincidunt diam. Aliquam erat volutpat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
Řádkování 150 %
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Nam quis nulla. Suspendisse sagittis ultrices augue. Nulla non arcu lacinia neque faucibus fringilla. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam dictum tincidunt diam. Aliquam erat volutpat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
Řádkování 185 %
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Nam quis nulla. Suspendisse sagittis ultrices augue. Nulla non arcu lacinia neque faucibus fringilla. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Etiam dictum tincidunt diam. Aliquam erat volutpat. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
Zde jasně vidíte, jak pouhé řádkování (vzdálenost jednotlivých řádků od sebe) ovlivňuje čitelnost. nyní se podívejme na velikost fontu – písma:
Toto je text velikosti 9 bodů (9 px)
Toto je text velikosti 10 bodů (9 px)
Toto je text velikosti 12 bodů (9 px)
Toto je text velikosti 16 bodů (9 px)
Toto je text velikosti 18 bodů (9 px)
Toto je text velikosti 20 bodů (9 px)
Toto je text velikosti 24 bodů (9 px)
Ideální velikost a řádkování fontu je:
- 16 px pro hlavní čitelný text, zkuste klidně i 18 px, uděláte tím radost méně ostrozrakým zákazníkům
- 13-14 px pro vedlejší (štítky, poznámky)
- 150 – 160 % řádkování
Pro ilustraci – tento web má následující nastavení:
Pamatujte
- Používejte vždy dostatečnou velikost písma, nejlépe vždy v relativních jednotkách (em, %).
- Pro češtinu používejte řádkování alespoň 140%.
- Dodržujte dostatečný kontrast textů vůči pozadí
- Grafika či obrázky na pozadí výrazně snižují čitelnost textu.
- Dostatečně opticky oddělujte jednotlivé odstavce.
- NIKDY NEPOUŽÍVEJTE VELKÁ PÍSMENA PRO CELÉ VĚTY.
