Typografie na webu
Pavel Maček
Co je to typografie?
- Práce s písmem a jeho uspořádání v ploše (prostoru)
- 95 % informací na internetu v písemné podobě – potřeba správné typografie
- Hlavním cílem je předání informace – potřeba čitelnosti
Kontrast
- Kontrast mezi jednotlivými prvky stránky je důležitý
- Kontrast na základě barvy, velikosti, druhu a řezu písma (vyznačování podrtžením je zlo – kromě odkazů)
- Je nutné ho používat s mírou, jinak dochází k vizuálnímu šumu
- Nutnost snížení kontrastu pro obrazovku PC (85% černá na bíle apod.)
- Barva odkazů: není potřeba aby razily více než je nutné, odkazy v textu potřebují více odlišit než odkazy v navigaci
Kontrast
Písmo na webu
- Obecná klasifikace: serifové (serif), bezserifové (sans-serif) – (banální klasifikace)
- „Bezpečné fonty“ (Arial, Georgia, Times) a jejich ekvivalenty na jiných op. systémech než Windows
- Dříve pro obrazovku lepší bezserifová písma, dnes toto neplatí díky antialiasingu (a serifová písma přímo pro obrazovku)
- Kombinace serif a sans-serif
Proklad řádků
- Pro dobrou čitelnost je důležitý správný proklad řádků (v CSS atribut
line-height)
- Delší řádky většinou potřebují větší proklad
- Krátké bloky textu většinou potřebují zakladní nebo negativní proklad
Délka řádku
- Délka jednoho řádku by měla ideálně být 45–75 znaků (30–50 em)
- Je důležité si dát pozor na délku řádku u fluidního designu
- Problémová Wikipedia (nebo IS), stránka se roztahuje bez omezení, řádky velice dlouhé a špatně čitelné
Mřížka účaří
- Mřížka účaří (baseline grid)
- Všechny prvky na stránce sedí horizontálně do mřížky složené z jednotlivých řádků
- Nutnost upravit odpovídajícím způsobem proklad řádků, velikost textu, odstavců, velikost obrázků
- Použití absolutních versus relativních jednotek pro text
Mřížka účaří
Zarovnání odstavců
- Doleva
p {text-align: left}
- Doprava
p {text-align: right}
- Do bloku
p {text-align: justify}
- Do bloku není vhodné pro web, díky absenci dělení slov vznikají řeky (CSS3 a slovník)
Odlišení odstavců
- Odsazení zleva (minimálně 1 em)
- Předsazení
- Prázdný řádek (na webu asi nejvíce používané)
- Ornament
- Nadpis před odstavcem
Odlišení odstavců (prázdný řádek)
Odlišení odstavců (odsazení)
Seznamy
- Číslovaný, abecední
- Nečíslovaný (bullets atd.)
- Bullets a podobné tvary by měly být předsazené
Seznamy (Předsazený seznam)
Uvozovky
- Vždy nahrazovat entitami v CSS
- Správné české uvozovky „99 a 66“
- Francouzské uvozovky «větší a menší»
- Předsazené uvozovky ‚používané pro blokovou citaci‘
´
Spojovník, pomlčky atd.
- Spojovník
- En pomlčka (8.00–10.00), em pomlčka (autor u citace)
- Mínus (10 − 5 = 5)
Použití alternativních fontů
- Možnost nahrazování textu obrázkem
- sIFR (nové vylepšení v chování)
- Vhodné např. pro nadpisy
- Fonts and the web