Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revizePředchozí verzeNásledující verze | Předchozí verze | ||
pristupnost:pismo_a_formatovani_textu [2020/09/16 13:15] – ↷ Stránka přejmenována z 'pristupnost:formatovani_textu' na 'pristupnost:pismo_a_formatovani_textu' linda | pristupnost:pismo_a_formatovani_textu [2020/09/24 13:33] (aktuální) – epub | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
====== -#19 Písmo a formátování textu ====== | ====== -#19 Písmo a formátování textu ====== | ||
- | Čitelnost textu je jednou | + | Čitelnost textu je jedním |
- | Čitelnost textu může být ovlivněna | + | Čitelnost textu může být ovlivněna |
===== Výběr fontu ===== | ===== 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ů. | 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, na webu je doporučeno vždy **používat obvyklá písma bez typografických zvláštností**, | + | I v případě, že vizuální styl vaší organizace obsahuje neobvyklé fonty, |
- | Naopak se nedoporučují | + | Naopak se nedoporučují: |
- | * písma úzká (tj. narrow, compressed nebo condensed), nebo písma, | + | * písma úzká (tj. narrow, compressed nebo condensed) nebo písma, |
* efekty písma, např. stínování či obrysy; | * efekty písma, např. stínování či obrysy; | ||
* texty psané pouze velkými písmeny; | * texty psané pouze velkými písmeny; | ||
* fonty s typografickými zvláštnostmi. | * fonty s typografickými zvláštnostmi. | ||
+ | Ukázky nedoporučených písem si můžete prohlédnout na obr. 1. \\ | ||
{{: | {{: | ||
- | //Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)// | + | //Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)// |
<WRAP center info> | <WRAP center info> | ||
- | ===== Proč je důležité vybírat běžné fonty a vyhnout se efektům písma | + | ==== 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 | + | 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, |
- | + | ||
- | Nezapomínejme také na to, že písma, která mohou vypadat zajímavě a dobře při zobrazení na monitoru počítače, | + | |
- | + | ||
- | Hůře čitelná jsou také písma která jsou příliš úzká. Např. stlačený (condensed) typ písma je oproti běžnému typu písma stejné velikosti hůře čitelný. Negativní vliv na čitelnost mají také tenké linky některých písem, různé efekty písma, texty psané kapitálkami aj. | + | |
+ | Nezapomínejme ani na to, že písma, která mohou vypadat zajímavě a dobře při zobrazení na monitoru počítače, | ||
+ | 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, | + | 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, |
- | {{: | + | |
- | //Obr. 2: Srovnání úzkého fontu s tenkými linkami a běženého | + | Který se vám čte lépe?((Běžný font, který byl použit pro druhý |
+ | {{: | ||
+ | //Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma (zdroj: archiv autorky)// | ||
- | ===== Styly odstavů a bloků ===== | + | ===== Styly odstavců a bloků ===== |
- | Nezanedbatelný vliv na čitelnost textu má uspořádání textu, zejména řádkování, | + | Nezanedbatelný vliv na čitelnost textu má uspořádání textu, zejména řádkování, |
- | * Použijte dostatečné **rozestupy mezi řádky**, vhodné je např. řádkování 1,5 (rozhodně ne řádkování | + | * Použijte dostatečné **rozestupy mezi řádky**, vhodné je např. řádkování 1,5 (rozhodně ne řádkování 1). |
- | * Použijte dostatečný **odstup | + | * Použijte dostatečný **rozestup |
* **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. | * **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). | * **Text zarovnávejte doleva**, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu). | ||
- | //Na obrázcích | + | 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, |
- | Který text se vám lépe čte?//((První blok textu s malým rozestupem mezi řádky se čte hůře než " | + | Který text se vám čte lépe?((První blok textu s malým rozestupem mezi řádky se čte hůře než " |
- | {{: | + | {{: |
- | //Obr. 3: Ukázka textu s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// | + | //Obr. 3: Text s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// |
- | {{: | + | {{: |
- | //Obr. 4: Ukázka textu s dostatečnými mezerami | + | //Obr. 4: Text s dostatečným rozestupem |
===== Zvýraznění textu ===== | ===== Zvýraznění textu ===== | ||
- | Pokud je text na webové stránce psán srozumitelným jazykem a je strukturovaný | + | Pokud je text na webové stránce psán srozumitelným jazykem a je strukturován |
- | Pokud však potřebujete zvýraznit nějaký text v obsahu stránky, doporučujeme ke zvýraznění využít | + | 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, |
==== Pravidla pro zvýraznění textu ==== | ==== Pravidla pro zvýraznění textu ==== | ||
- | - **Dbejte na dostatečný kontrast textu a pozadí** | + | - **Dbejte na dostatečný kontrast textu a pozadí**. Pro barevné zvýraznění |
- | - **Nespoléhejte se při zvýraznění 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: | + | - **Při zvýraznění |
- **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. | - **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. | ||
- | - **Nepoužívejte pro zvýraznění textu více různých fontů**. Kombinace různých písem může nejen působit neesteticky, | + | - **Pro zvýraznění textu nepoužívejte |
- **Nepoužívejte neobvyklé fonty**, které mohou některým návštěvníkům webu komplikovat čtení a vnímání textu. | - **Nepoužívejte neobvyklé fonty**, které mohou některým návštěvníkům webu komplikovat čtení a vnímání textu. | ||
+ | < | ||