Typografie jako součást úspěšného online řešení

V tomto článku nebudu psát o složité teorii ani o různých rozděleních a nudit vás historií typografie. Pokusím se však vyzdvihnout její důležitost, způsoby jak dokážete ovlivnit svoje zákazníky a jak dosáhnout, abyste sami dokázali jednoduše vybrat vhodné písmo (nebo častěji používaný výraz font) pro svůj byznys.

Všeobecně je dokázané, že výběr fontu dokáže ovlivnit schopnost čtenářů zapamatovat si reklamní texty a slogany, které používáte při komunikaci. Fonty, které zákazníci vidí, mohou mít velký vliv na jejich jednání. Pokud chcete, aby si vaši zákazníci váš produkt a značku pamatovali, měli byste typografii věnovat náležitou pozornost.

Jak typografie ovlivňuje chování zákazníků

Výběr typografie a samotného fontu ovlivňuje způsob, jakým zákazníci vnímají vaši značku a jak o ní přemýšlejí. Už jen nezbytné rozhodnutí při výběru typu a velikosti fontu dokáže ovlivnit komunikaci značky s jejími zákazníky. Samotný text a obsah určují její osobnost a to, jak se zákazník dívá na produkt nebo službu a jaká je pravděpodobnost, že udělá nákup.

Stejně jako výběr typografie výrazně ovlivňuje emoce zákazníků použitá barva. Červená barva má například schopnost ovlivnit a stimulovat chuť do jídla, o čemž najdete i množství studií. Hodně značek potravin proto používá při typografii právě červenou barvu.

Víme, že výběr červené barvy v typografii, například v logu, je vhodnou volbou pro potraviny. Červená barva by byla naopak nevhodnou volbou pro obchod zaměřený na spánek, jako například obchod s postelemi nebo matracemi. Důvod je jasný, protože červená barva přináší akci a vzrušení, vzbuzuje pocit naléhavosti a povzbuzuje k rychlému rozhodování. Červená barva se proto často používá v reklamě, při výprodejích nebo i u dopravních značek.

Základy dobré typografie

To, nakolik je font dobrý, dokážeme posoudit na základě tří parametrů. Tyto parametry jsou:

• srozumitelnost
• čtivost
• kontext

Srozumitelnost

Srozumitelnost se týká schopnosti čtenářů snadno porozumět písmenům nebo znakům. Některé typy fontů, jako například Arial nebo Helvetica, jsou čtivější než jiné. Právě proto jsou v online světě jednoduché fonty užitečnější. Srozumitelnost fontu je přímo provázaná s jeho anatomií.

Propracovaná ozdobná písma a skripty jsou často méně čtivá a vyžadují od lidí víc pozornosti. Mnoho designérů se snaží dosáhnout atraktivní vizuál právě tím, že použije „fancy“ okrasný font, čímž v konečném důsledku sníží čtivost vizuálu. Je důležité počítat i s tím, že běžně používané a jednoduché fonty nemusí být za určitých okolností čtivé (například použitím příliš malé velikosti fontu. Víc o tom, na co si dávat pozor, se dočtete níže v článku).

Anatomie písma

Bylo by zbytečné psát o tom, jaký je rozdíl mezi patkovým a bezpatkovým fontem. Typografie je však ve skutečnosti mnohem zajímavější a skládá se z mnoha částí.

Tak jako my i typografie má svoje nálady, styly a anatomické vlastnosti. Celé toto téma by bylo spíše vhodné na samostatný článek, ale v této infografice je pro nás postačující (a velmi pěkně) zpracované.

Čtivost

Čtivost definuje, jak snadno jsou slova v blocích textu čtivá. Je důležité zaměřit se na detaily a dbát na kombinaci čtivosti fontu a srozumitelnosti jeho znaků, protože samotný font bude ve velké míře rozhodovat o čtivosti vaší stránky.

Faktory, které ovlivňují čtivost textu

Vždy je potřebné zohlednit minimálně velikost písma, řádkování a délku řádku v bloku textu, aby byl dobře čtivý. Všeobecně je však těchto parametrů víc:

• Velikost písma
• Délka řádku
• Zarovnání textu
• Řádkování
• Vzdálenost mezi písmeny
• Barva písma
• Barva pozadí písma

Kontext

Kontext je základní konstrukční prvek komunikace a obsahu, na který se často zapomíná. Ve zkratce jde o text z pohledu obsahu. Hlavním faktorem při práci s textem je výběr vhodného fontu. Výběr vhodného fontu závisí na vašem obsahu, cílové skupině a emoci, kterou chcete vyvolat. Níže na obrázku demonstruji, jak právě výběr barvy a fontu dokáže ovlivnit kontext vaší zprávy a emoce, které vyvolá.

Jak jsem uváděl výše, i samotná barva hraje velkou roli v kontextu:

• Červený nebo černý text a velká písmena v nadpisech motivují k akci a působí naléhavě. Proto jsou vhodné například pro bannerovou reklamu. Výjimkou však může být, když potřebujete vzbudit pocit pohodlí. Tehdy může být vhodnější jiná barva, například modrá.
• Růžová barva může vyvolat pocit lehkosti, ale má i svůj potenciálně kontroverzní význam. Někteří lidé spojují růžovou se slabostí nebo s určitými politickými postoji.
• Žlutá vyvolává teplo a pocit volnosti, protože si ji obvykle spojujeme se sluncem.
• Oranžová je často spojovaná s finančními institucemi a slevami.
• Zlatá barva se často spojuje s bohatstvím, sílou, kvalitou nebo luxusem. Hodně lidí ji však považuje za výstřední.

Mějte vždy na paměti, že jakkoliv dobře máte napsaný text, nikdy nebude přitahovat lidi, pokud nebude čtivý. Nezapomeňte, že v konečném důsledku chcete vždy pozitivně ovlivnit chování a emoce zákazníků.

Devět (9) pravidel pro správný výběr a použití písma pro váš digitální produkt nebo web stránku

Jak jsem uvedl na začátku, výběr správného fontu pro váš projekt může být uměním, ale nemusí to být věda. Stačí dodržet pár pravidel na to, abyste dosáhli skvělou čtivost vaší web stránky, e-shopu nebo jiného digitálního produktu. Nakonec, víc než 90 % obsahu na vaší stránce je text.

1.   Patkové vs. bezpatkové písmo

Je to jedno z prvních rozhodnutí, které vás čeká. V tomto případě jsou výhodnější volbou bezpatkové fonty (sans serif), protože jsou ve většině případů čitelnější a srozumitelnější než patkové (serif) fonty.

2.   Množství písem

Nejlepší bude, když použijete jen jeden typ fontu. Pokud se rozhodnete použít dva různé fonty, je důležité, aby byly kontrastní (například výrazně silný font pro nadpisy a jednoduchý snadno čitelný font pro obsah). Použití více než dvou fontů už dokáže výrazně snížit čtivost.

3.   Rozšířená latinka

Při výběru fontu se často podceňuje jeho kódování (podpora znaků pro různé země). Důsledkem toho se často stává, že použitý font nepodporuje některé znaky naší abecedy (nejčastěji jde o písmena s diakritikou č, ľ, š apod.). Pro většinu zemí (Evropa, UK, USA) je nejvhodnější použít font, který podporuje rozšířenou latinku (extended latin). Budete tak mít jistotu, že jste vybrali font, který správně zobrazí všechny znaky a symboly ve většině jazyků. V případě když víte, že se chystáte rozšířit podnikání na východní země, budete potřebovat font, který podporuje i cyrilici.

4.   Velikost písma

U online a digitálních řešení je nejvhodnější volbou použít pro běžný text velikost písma 16px. Velikost písma 12px je většinou u běžných fontů už hranice čtivosti. Při výběru velikosti fontu je velmi důležité sledovat i jeho zobrazení na různých zařízeních. Může se stát, že font se u některých velikostí nemusí na různých zařízeních vykreslit správně.

5.   Hierarchie obsahu

Významnou roli ve čtivosti textu hraje hierarchie obsahu. Tato hierarchie reprezentuje členění textu na jednotlivé části (nadpisy, podnadpisy, odstavce atd.), které jsou od sebe jednoznačně odlišené.

Tohoto kontrastu mezi jednotlivými částmi dosáhnete nejjednodušeji jasným definováním velikosti fontu, jeho řezu (regular, bold) a případně výběrem doplňkového fontu nebo změnou barvy. Mějte však na paměti, že nejlepší způsob jak si udržet čtivost a jasnou hierarchii vašeho obsahu je zachovat jasné proporce jednotlivých částí (například úrovně nadpisů budou jednoznačné a nebudou mezi sebou zaměnitelné) obsahu.

6.   Délka řádku v bloku

Délka řádku textu v bloku výrazně ovlivňuje náš komfort při čtení. V závislosti na velikosti textu se může tato délka řádku lišit. Pro běžný text je optimální délka řádku mezi 45 a 75 znaky. Když zvětšíme velikost fontu, musíme zvětšit i délku řádku. Nenechte se však nikdy zmást potřebou zaplnit textem celou šířku stránky, abyste se vyhnuli prázdnému místu. Při příliš dlouhých (nebo i příliš krátkých) řádcích v textu se čtenáři často stává, že po dočtení řádku nedokáže navázat na začátek toho dalšího, čtení se stává nekomfortním a často přechází do frustrace.

7.   Řádkování

Řádkování představuje vertikální prostor mezi řádky textu od jeho spodní části až po vrchní část spodního řádku. Změna řádkování fontu je velmi jednoduchá úprava (často podceňovaná), která dokáže výrazně ovlivnit komfort čtení a celkovou čtivost vašeho textu. Nejčastěji jde o případy, kdy používáme tmavé barvy fontu, kdy text působí těžko, a potřebujeme, aby víc „dýchal“. Optimální velikost řádkování se pohybuje od 120 % u nadpisů a bez obav 140–160 % u běžného textu.

8.   Zarovnání textu

Každý styl zarovnání má odlišné aplikace v designu a vlastní výzvy, které ovlivňují čtivost textu.

Při online designu nebo digitálních produktech je nejvhodnější volbou využívat zarovnání textu na levou stranu. Důvod je jednoduchý, protože je pro nás (a většinu jazyků) přirozené číst text zleva doprava. Ve stejném nebo podobném vzorci procházíme a skenujeme i webové stránky. Z estetických důvodů můžete mít sklon zkoušet zarovnat text do bloku k okrajům. V digitálním světě je to však nevhodné řešení (mezi slovy vznikají různě velké mezery), které snižuje čtivost textu.

9.   Barva textu a barva pozadí textu

Jak jsem už uvedl na začátku článku, samotná barva dokáže výrazně ovlivnit čtivost a kontext fontu. Při výběru barvy a fontu je důležité být opatrný. Výrazný, tučný černý font může odvádět pozornost vašeho zákazníka od jiných obsahových částí, kterým dál nemusí věnovat pozornost.

U barevného pozadí textu je lepší zvolit tmavší barvy a vyhnout se světlým a zářivým barvám. Červené nebo žluté pozadí může ztížit čtivost bílého fontu. Dalším případem nevhodného výběru barvy jsou prolínající se barvy fontu s pozadím. Použití červeného fontu na červeném pozadí v žádném případě nebude účinné.

Podobná pravidla platí také při výběru barvy pro font na bílém pozadí. Nejlepší volbou je zvolit opět tmavší barvy fontu. Právě světlé barvy, jako například růžová a žlutá, nebo světlé odstíny šedé barvy výrazně snižují jeho čtivost. Pokud se pro světlé barvy přece jen rozhodnete, zvolte font, který je výraznější a hrubší. Při tmavých barvách fontu můžete naopak bez obav zvolit tenčí elegantnější typy fontu.