Typografie webových stránek

Pravděpodobně se každý z vás někdy setkal s webem, který byl přeplácaný vším, co dokáže prohlížeč zobrazit. Mnozí autoři stánek se ve snaze zvýrazňovat uchylují k tragickým úkonům. A pak platí známé – všeho moc škodí.

Východiskem z průšvihu je provést test na potřebném vzorku lidí. Před tímto testem je dobré znát základní pravidla sazby a pokusit se na chvilku stát čtenářem, který, než se pustí do čtení, se orientuje podle uspořádání textu, jeho barevného odlišení nebo výrazu (typ písma, řez atd.).

Dnešní příspěvek pokračuje v sérii článků uveřejněných v loňském roce. Dovolím si začít několika úvodními odstavci jednoho z předcházejících článků:

Návrh by neměl zapomínat na to, že každá stránka bude mít určitý obsah. Když vytváříte šablonu stránek, zkoušejte ji graficky vyladit i s předpokládaným obsahem. Nasimulujte si nejrůznější možné varianty s textem, obrázky, seznamy, tabulkami apod. Zkuste si setřídit jednotlivé informace podle následujících bodů.

1. Jaký tvar a barevnost bude mít logo firmy nebo jiný symbol záhlaví stránek? Většinou bývá určujícím elementem pro design stránek.
2. Přibližná struktura webu a způsob navigace na stránkách (tvoří základ pro návrh kompozice stránek a její obsahové skladby).
3. Skladba obsahu stránek, tj. umístění jednotlivých částí stránky, poměr množství fotografií, tabulek a dalšího obrazového materiálu k množství textu. U tabulek a jiných „popisných“ grafických objektů jejich předpokládaná šířka potřebná pro čitelné zobrazení.
4. Předpokládáte-li, že budou stránky obsahovat obrázky, u kterých bude převažovat určitá barva (např. u fotografií potápěčského či golfového klubu), podřiďte vzhled stránek této barevnosti.

Tento text byl úvodem k článku Barevnost loga – pohled typografa. V tomto volném pokračování se pokusím odpovědět alespoň částečně na zbývající druhý, třetí a čtvrtý bod. Druhý bod o navigaci bych rád podrobněji rozebral v některém z dalších článků.

Skladba obsahu stran

Pokud je web složitý svou strukturou zanořování a přístupností stránek, rozdělte ho na menší, obsahově ucelené části, dejte jim také odlišné záhlaví a pokud si to zaslouží, tak i novou doménu. Jednoduchá, dobře zapamatovatelná a názvem srozumitelná adresa vám poskytne nejen dobrou reklamu pro materiál obsažený na stránkách, ale také urychlí čtenáři při opětovné návštěvě nalezení „staré“ cesty. Odlišným záhlavím čtenáři napovíte, že se jedná o jiné stránky. Budete-li zachovávat stejný princip členění u všech takto provázaných webů, zjednodušíte tím orientaci všem návštěvníkům. Provázání mezi příbuznými weby bude ve struktuře vazeb nejvýše.

Obvyklé členění stránek vychází z tradic členění textu na papíře „zleva doprava a shora dolů“. V horní části se nachází záhlaví společné pro celý web nebo jen určitou skupinu stránek. Pokud jsou weby mezi sebou provázány, měly by být tyto odkazy umístěny jako první, tzn. nejlépe jako první „řádek“ záhlaví. Do záhlaví patří logo, ilustrační obrázek související s náplní stránek a menu. Pro menu není vyhrazeno pevné umístění v designu stránek. V kompozici webu se nejčastěji objevuje jako levý sloupec pod záhlavím.

Na záhlaví navazuje hlavní část, vyhrazená textu samotné stránky. Na ně se vztahuje několik typografických zásad, a i když jsou z větší části převzaty z klasické typografie vycházející z tištěných dokumentů, jsou dobře uplatnitelné i v prostředí Internetu.

1. Když se mezi titulek a hlavní text umístí dvou až třířádkový podtitulek, zvýší se tím chuť čtenáře k přečtení toho ostatního.
2. Úvodní odstavec by měl být krátký. Je nutné zajistit, aby podtitulky byly odlišitelné od titulků i běžného textu. Dlouhý první odstavec čtenáře odradí. Kratší odstavce jsou přehlednější a méně únavné. Přísné pravidla reklamní tvorby obvykle doporučují ne více jak 11 slov.
3. Schéma stavby textové kompozice může vypadat zhruba takto: první mezititulek je vložen asi po pěti až sedmi řádcích základního textu. Toto členění se může v celé textové straně v pravidelných intervalech opakovat. Pro běžného čtenáře moderní doby jsou titulky (mezititulky) to jediné, co si přečte, a podle toho zůstane nebo vyhledá další záchytný bod – titulek.
4. Mezititulky udržují čtenáře v textu. Jejich stručná forma se uplatňuje tak, aby čtenář co nejrychleji pochopil jádro sdělení z mezititulků, aniž by musel číst celý text.
5. Titulek by neměl být jen nadpisem, ale měl by také být po všech stránkách spojením jasně formulovaných slov, vystihujících to podstatné ve sdělení.
6. V textu, který je výčtem určitých položek, je účelnější místo pomlček, sloužících k označení každé položky, použít číslování.
7. Když se mezi odstavce vloží volná řádka, zvýší se tím pozornost čtenáře.
8. V DLOUHÉM TEXTU SE VERZÁLKY ČTOU HŮŘE než minusky.
9. Čím je méně zvýrazněných slov (půltučným, tučným řezem, podtržením, proložením apod.) na řádku, tím je text čtenářem rychleji vnímán. Pokud je text dobře napsán, nemá smysl zvýrazňovat celé řádky.
10. Zarovnáním textu do bloku můžete dosáhnout větších mezer mezi slovy než jsou mezery mezi řádky. Vznikají tzv. řeky, kde se řádek rozpadá do více nesouvislých celků.
11. Má-li být text více vidět, zaslouží si i více volného prostoru, například samostatná řádka, odstavec nebo předsazený textový blok.
12. Výběr písem provádějte uvážlivě. Kresba jednotlivých znaků se liší podle cílového použití. Pro elektronické publikování v médiích jako internet se doporučují jednoduchá písma bezpatkového typu. Avšak u sazby delších textů, které se obtížně člení do schématu krátkých odstavců proložených například číslovanými (či odrazkovými) seznamy apod., nalezne uplatnění patkové písmo.
13. Pro běžný text používejte vždy písmo v základním řezu. Podíváte-li se na názvy písem, pak ta, která odpovídají řezům plain, roman nebo normal.
14. Dlouhý řádek není vhodný pro rychlá sdělení. V prostředí internetu nepoužívejte pružnou šířku pro stránky s textem, pokud nemáte kontrolu nad minimální a maximální šířkou.

Na hlavní část navazuje pata stránky. Pata může obsahovat doplňující informace ke stránce, kde mohou být také uvedeny údaje o vzniku stránek (datum, copyright, kontakt na autora atd.)

Pokud chcete zvolit konkrétní typ písma, musíte se omezit na ty, která jsou dostupná v systémech uživatelů. Při definování písem pro webové stránky je otázkou i jejich velikost. Patková písma se v malých velikostech vykreslují neostře. V případě webu s informacemi pro širokou veřejnost obezřetnost platí dvojnásob. Například pro patková písma Georgia, Times New Roman můžete použít velikost 16px a pro bezpatkové písmo Verdana 12px. Rozdíly optického působení velikosti písma nejsou však měřitelné velikostí v bodech. Například Verdana působí ve čtrnácti bodech oproti stejně velkému písmu Times New Roman jako slon a myš.

Barevnost

Určit barevnost textu není nikdy snadné. Vždy budete hledat kompromisy mezi barevností textu, odkazů, pozadí stránek a ještě několika dalšími prvky, které na stránku vložíte.

Hlavní prioritou je dobrá čitelnost. Budete se znovu potýkat se skutečnostmi ovlivňující barevnost. Budete tak muset vytvářet stránky s ohledem na:

• těžko odhadnutelné podmínky na straně uživatele (nastavení počtu barev v systému, kalibrace monitoru)
• a v neposlední řadě na uživatele s omezením citlivosti zrakového vnímání na určitou barevnou složku. Při poruchách barvosleposti je rozhodující zejména vzájemný kontrast barev v jasové složce.

Čitelnost je důležité kontrolovat v každé předpokládané velikosti textu. Počítejte se skutečností, že písmo se může zobrazit jinak veliké, než předpokládáte. V malých velikostech se bude více měnit barva textu a tím i samotný kontrast textu a podkladu. Vyrastrováním na obrazovce monitoru bude docházet k převedení celých tahů do odstínů barevně bližších barvě podkladu.

Související články

• Vzhled html stránek – pohled typografa
• Barevnost loga – pohled typografa
• Magie barev na webu – část I.
• Magie barev na webu – část II.

Informace

• Soutěž o nejlepší definici písem -poznámky o problematice definování fontů z blogu od Petra Staníčka (ze dne 7. března 2003)
• A Comparison of Popular Online Fonts: Which Size and Type is Best?
• Typografie – stránky o typografické úpravě knih pro laiky
• Vischeck – stránky o poruchách barevného vidění

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.