====== -#19 Písmo a formátování textu ====== Čitelnost textu je jedním ze základních předpokladů přístupnosti stránky. Týká se širokého spektra uživatelů: nejen lidí se zrakovým postižením nebo sníženým barvocitem, seniorů nebo lidí s poruchami čtení, ale např. i těch, kteří pro přístup ke stránce používají mobilní zařízení. Čitelnost textu může být ovlivněna různými faktory. Kromě nedostatečného kontrastu nebo nevhodného vzorku na pozadí je to především využití vhodného písma a formátování textu. ===== Výběr fontu ===== Výběr fontu pro webové stránky obvykle vychází z grafického stylu organizace. Ten v určitých případech vyžaduje použití speciálních fontů. I v případě, že vizuální styl vaší organizace obsahuje neobvyklé fonty, je na webu doporučeno vždy **používat obvyklá písma bez typografických zvláštností**, která se uživatelům webu nejlépe čtou. Vhodná jsou písma bezpatková, proporcionální. Naopak se nedoporučují: * písma úzká (tj. narrow, compressed nebo condensed) nebo písma, která mají příliš tenké linky; * efekty písma, např. stínování či obrysy; * texty psané pouze velkými písmeny; * fonty s typografickými zvláštnostmi. Ukázky nedoporučených písem si můžete prohlédnout na obr. 1. \\ {{:pristupnost:neobvykle_fonty.png|Ukázka neobvyklých typů fontů, kterým je vhodné se na webu vyhnout}} \\ //Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)// \\ \\ ==== Proč je důležité vybírat běžné fonty a vyhnout se efektům písma ==== Neobvyklá písma mohou být překážkou pro čtení a někdy i porozumění textu pro lidi s poruchami zraku, dyslektiky, lidi s mentálním postižením, cizince, prelingválně neslyšící apod. Je však známo, že typograficky nezvyklé písmo může být rušivé i pro běžné uživatele webu, kteří pak svou pozornost zaměří na písmo a méně se soustředí na sdělení textu.((Neobvyklá písma mohou mít i technická úskalí: Na webu se obvykle využívají tzv. web safe fonty, tj. fonty, o kterých se předpokládá, že jsou k dispozici na většině počítačů a že se uživateli stránka s tímto fontem zobrazí správně, tedy tak, jak byla navržena. Pokud však uživatel písmo na svém počítači nainstalováno nemá, zobrazí se mu jiné písmo. V některých případech to může znamenat i "rozsypání" designu stránky. Existují sice technická řešení, která tyto problémy eliminují; většinou však nejsou stoprocentní a v některých případech mohou být zdrojem dalších technických problémů. Nezapomínejme ani na to, že písma, která mohou vypadat zajímavě a dobře při zobrazení na monitoru počítače, nemusí vždy stejně dobře vypadat na menší ploše (tj. na mobilních zařízeních).)) Hůře čitelná jsou také příliš úzká písma. Je tomu tak např. u stlačeného (condensed) typu písma ve srovnání s běžným typem písma stejné velikosti. Negativní vliv na čitelnost mají rovněž tenké linky některých písem, různé efekty písma, texty psané kapitálkami aj. Na obr. 2 jsou dva bloky textu, u kterých byla použita stejná velikost písma. Horní blok je psán úzkým fontem s tenkými linkami, dolní blok je psán běžným fontem stejné velikosti.\\ Který se vám čte lépe?((Běžný font, který byl použit pro druhý blok, je lépe čitelný než první blok textu s úzkým fontem a tenkými linkami.)) \\ {{:pristupnost:fonty.png?500|Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma}} \\ //Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma (zdroj: archiv autorky)// ===== Styly odstavců a bloků ===== Nezanedbatelný vliv na čitelnost textu má uspořádání textu, zejména řádkování, rozestupy mezi odstavci nebo bloky. K čitelnosti přispívá čistý a vzdušný design stránek: * Použijte dostatečné **rozestupy mezi řádky**, vhodné je např. řádkování 1,5 (rozhodně ne řádkování 1). * Použijte dostatečný **rozestup mezi odstavci** a mezi jednotlivými bloky. * **Vyhněte se příliš dlouhým řádkům** a nastavte šířku textových bloků tak, aby se uživatelům dobře četla. Důležité je to zejména kvůli širokoúhlým monitorům. * **Text zarovnávejte doleva**, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu). Na obr. 3 a 4 vidíte stejný text. Zatímco na obr. 3 je použito řádkování 1 a mezi odstavci nejsou mezery, na obr. 4 jsou dostatečné mezery mezi řádky i odstavci. Který text se vám čte lépe?((První blok textu s malým rozestupem mezi řádky se čte hůře než "vzdušněji" formátovaný text druhého bloku.)) {{:pristupnost:odstavce_bez_mezer.png|Obr. 3: Text s malým rozestupem mezi řádky a odstavci}} \\ //Obr. 3: Text s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// {{:pristupnost:odstavce_vzdusne.png|Obr. 4: Text s dostatečným rozestupem mezi řádky a odstavci}} \\ //Obr. 4: Text s dostatečným rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// ===== Zvýraznění textu ===== Pokud je text na webové stránce psán srozumitelným jazykem a je strukturován pomocí nadpisů, seznamů a dalších sémantických prvků, bývá často přehledný sám o sobě. Nastavení redakčního systému se postará o zvýraznění jednotlivých prvků, např. vzhledu nadpisů. Pokud však potřebujete zvýraznit nějaký text v obsahu stránky, doporučujeme ke zvýraznění využít tučný řez písma nebo kurzivu, případně zvýraznění pomocí barvy písma nebo barvy pozadí textu. V tom případě však nezapomeňte, že barva by neměla být jediným způsobem sdělení informace. ==== Pravidla pro zvýraznění textu ==== - **Dbejte na dostatečný kontrast textu a pozadí**. Pro barevné zvýraznění není např. vhodné použít světlý podklad pro světlé písmo. - **Při zvýraznění se nespoléhejte pouze na barvu**. Lidé s poruchami barvocitu nemusí barevné zvýraznění vůbec vnímat (podle typu poruchy např. nemusí rozeznat červenou, zelenou či jinou barvu, viz [[pristupnost:zrakove_postizeni#uzivatele_s_poruchami_barvocitu|Uživatelé s poruchami barvocitu]]). Text můžete zvýraznit např. tučným řezem. - **Snažte se zvýrazněné části textu odlišit od odkazů**. Zejména nepoužívejte podtržení slov. Podtržení se na webu tradičně využívalo a využívá pro odkazy, a proto by mohlo v návštěvnících stránky vzbuzovat dojem, že zvýrazněný text je odkazem. - **Pro zvýraznění textu nepoužívejte více různých fontů**. Kombinace různých písem může nejen působit neesteticky, ale vést i k tomu, že informace působí nepřehledně. - **Nepoužívejte neobvyklé fonty**, které mohou některým návštěvníkům webu komplikovat čtení a vnímání textu. <-odkazy|18. Odkazy^obsah|Obsah^obrazky|20. Obrázky->