Přístupné webové stránky

Příručka pro knihovny

Uživatelské nástroje

Nástroje pro tento web

Umístění: Metodické příručky pro knihovny » Přístupné webové stránky » 19. Písmo a formátování textu
Historie:
pristupnost:pismo_a_formatovani_textu

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze		Předchozí verze
pristupnost:pismo_a_formatovani_textu [2020/09/17 21:06] – lindapristupnost:pismo_a_formatovani_textu [2020/09/24 13:33] (aktuální) – epub
Řádek 1: Řádek 1:
 +====== -#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)// \\ \\ 
 +
 +<WRAP center info>
 +==== 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.
 +</WRAP>
 +
 +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->
  

Nástroje pro stránku

Kromě míst, kde je explicitně uvedeno jinak, je obsah této wiki licencován pod následující licencí: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki