Menu

7 mýtů o typografii, které škodí webdesignu

Typografie ovlivňuje vzhled webových stránek i celkové vnímání značky. Kterých 7 typografických mýtů webdesignerům jen svazuje ruce?

7 mýtů o typografii, které škodí webdesignu

1) Grafický designer se obejde bez textu

Mýtus: „Náš web bude vypadat fantasticky, sehnali jsme totiž vynikajícího copywritera. Dejte tam zatím lorem ipsum, texty dodáme na konec.“

Realita: Obsah hraje roli i při výběru písma, jehož tvary zdaleka nejsou významově neutrální. To, zda grafik zvolí krasopisné psací písmo, nebo tučnou abecedu jak z cedule westernového salónu, ovlivňuje celkové sdělení a dodává mu podstatně odlišný význam. Některé texty si navíc vyžadují pečlivou kontrolu zvolené znakové sady. Například při komunikaci technických firem jsou nutností speciální znaky (m3, π apod.) nebo zřetelné odlišení číslice 0 a písmene O. Texty od copywritera proto vždy dodávejte grafikovi ještě před započetím jeho práce, ideálně už v rámci přípravných rozhovorů.

2) Placené fonty jsou zbytečně drahé

Mýtus: „Měli jsme teď nějaké výdaje skrz narozeniny pana ředitele. Bohatě stačí, když ty stránky vysázíte freefontem.“

Realita: Majitelé webů někdy nechtějí investovat do písma, takže pak grafikům nezbývá než vybírat z nabídky free fontů. Ty nejsou nutně špatným řešením a třeba mezi Google fonty najdeme některé kvalitní, včetně velkého množství v češtině. Ty dobré jsou obvykle hodně používané (podle studie od Avocode byl v roce 2016 nejvíce používaným fontem na webu Roboto, následovaný Open Sans). Písma jsou pak okoukaná a některé weby vypadají hodně podobně.

Pokud chcete podpořit jedinečnost značky v digitálním světě, investujte do písma pro titulky a nadpisy. Když se uskromníte, vystačíte se dvěma řezy (bold a regular), za které zaplatíte kolem 1000 Kč. To je celkem zanedbatelný vklad vzhledem k hodnotě, kterou vám to přinese: odlišíte se od ostatních firem, budete moct používat font v různých materiálech bez omezení (na webu i v tiskovinách) a navíc získáte jistotu české lokalizace. Kvalitní fonty se navíc často dají koupit za levnější peníze u samotných tvůrců a v akčních nabídkách některých prodejců.

3) Text psaný velkými písmeny je nečitelný

Mýtus: „Text nesmí být psaný verzálkami. Jinak ho nikdo nebude chtít číst.“

Realita: Ačkoliv nejsou vždy zrovna ideální volbou, vysloveně nečitelné verzálky nejsou. Psycholožka Susan Weinschenk zmiňuje v knize 100 věcí, které by měl každý designér vědět o lidech dvě nevýhody velkých písmen: čteme je pomaleji (hlavně protože na ně nejsme zvyklí) a působí dojmem, že na nás někdo křičí. To ovšem neznamená, že by se hůř četla. Ačkoliv do delšího textu moc vhodné nejsou, v nadpisech naopak přidávají na důrazu. Více do hloubky probírá téma ve svém článku The science of word recognition specialista Kevin Larson. U anglicky psaných textů může být použití verzálek součástí vizuálního stylu. V češtině na dojmu trochu ubírají háčky a čárky, které brání nízkému prostrkání.

4) Patková písmena se špatně čtou

Mýtus: „V žádném případě nesmí být text na webu vysázen patkovým písmem. Nebo snad bezpatkovým?“

Realita: Během celého 20. století zkoumalo hned několik studií, zda je pro čtenáře vhodnější patkové, či bezpatkové písmo. Jednoznačné výstupy nepřinesly, a nejspíš právě proto diskuze přetrvává dodnes. Obvyklé jsou třeba názory, že patkové písmo patří minulosti a že na web je vhodnější to bezpatkové. Mýtuvzdorným závěrem by tak mohlo být, že volba písma není otázkou čitelnosti, ale estetického vnímání. Hlavně v posledních letech je totiž trendem na webech kombinovat patkový a bezpatkový font.

5) Dva fonty na webu jsou maximum

Mýtus: „Víc jak dva fonty na jednom webu už jsou cirkus!“

Realita: Pro e-shopy a on-line aplikace není větší počet než dva různé fonty moc vhodný. Více použitých písem v kombinaci s ostatními prvky totiž může působit rušivě. Ideální jsou dva fonty, kdy kombinací odlišných řezů dosáhnete lepší čitelnosti a orientace v textu. Pokud ale chcete se svým webem vybočit a váš grafik na to má odvahu a schopnosti, není problém použít více fontů. Jen pak není zrovna jednoduché udržet konzistenci a logiku, navíc se zapotí také kodér.

Více než dva fonty pohromadě často nemají své opodstatnění. Něco takového asi nejčastěji vystavují portfolia designérů (viz Max Kaplun, agentura Bleed) nebo některé experimentální projekty (Soft Landings), pro které platí jediné pravidlo: porušit co nejvíce pravidel. Kombinací fontů a webovou typografií se zabývají třeba weby Typewolf, FontPair nebo typ.ico, kde také najdete názorné ukázky.

6) Kontrola znaků je práce pro grafika

Mýtus: „Záměny znaků si v textech pohlídá grafik. Copywriter je především marketingovým básníkem.“

Realita: Autor textů by si měl vždy důkladně zkontrolovat gramatiku a ideálně výsledek své práce přenechat dohledu profesionálního korektora. Grafik může leccos přehlédnout, předat mu text s chybami je proto prvním krokem k maléru. Práci neusnadní ani oblíbený nešvar, kdy v e-mailu designéra přistanou připravené texty ve formátu GIF nebo JPEG. Opisováním obrázku se neušetří ani čas, ani peníze, a eliminaci chyb to také zrovna nepomůže.

Na webech a e-shopech se pak návštěvníci běžně setkávají se špatně použitými mezerami, záměnou spojovníku a pomlčky nebo výpustkou napsanou třemi tečkami. Pokud něco takového znalý čtenář odhalí, web zbytečně ztratí body na něčem, co je s trochou snahy jednoduše podchytitelné.

7) Odkazy musí být podtržené a výrazně barevné

Mýtus: „Hlavně, aby odkazy nebyly šedé. Šedá barva vyznačuje neaktivní prvky.“

Realita: Vždy záleží na kontextu a kontrastu. Pokud je logika navigace založena na šedé barvě, pak šedá funguje podobně jako klikatelná barva. Jen je dobré pohlídat mezní kontrast 4,5 : 1 (barva písma : pozadí), pak mohou být odstíny jakékoliv. S konfigurací pomohou webové nástroje jako colorable.jxnblk.com.

Jak se můžete podívat na následujících ukázkách, šedá barva funguje nejen v navigaci, ale dokonce i v UI prvcích, jako jsou formuláře. S šedými odkazy v horní liště menu pracuje třeba web Nike, na kterém najdeme šedivý formulář v košíku. Dalším příkladem jsou přihlašovací formuláře k účtu na Apple.com. Funkční využití šedé si dále prohlédněte třeba na webech siteInspire, Snohetta nebo svla.co.