Typografia ako súčasť úspešného online riešenia

V tomto článku nebudem písať o zložitej teórii, ani o rôznych rozdeleniach a nudiť vás históriou typografie. Pokúsim sa však vyzdvihnúť jej dôležitosť, spôsoby ako dokážete ovplyvniť svojich zákazníkov a ako dosiahnuť, aby ste sami dokázali jednoducho vybrať vhodné písmo (alebo častejšie používaný výraz font) pre svoj biznis.

Všeobecne je dokázané, že výber fontu dokáže ovplyvniť schopnosť čitateľov zapamätať si reklamné texty a slogany, ktoré používate pri komunikácii. Fonty, ktoré zákazníci vidia, môže mať veľký vplyv na ich správanie. Ak chcete, aby si vaši zákazníci váš produkt a značku pamätali, mali by ste typografii venovať náležitú pozornosť.

Ako typografia ovplyvňuje správanie zákazníkov

Výber typografie a samotného fontu ovplyvňuje spôsob, akým zákazníci vnímajú vašu značku a ako o nej premýšľajú. Už len nevyhnutné rozhodnutia pri výbere typu a veľkosti fontu dokážu ovplyvniť komunikáciu značky s jej zákazníkmi. Samotný text a obsah určujú jej osobnosť a to, ako sa zákazník pozerá na produkt alebo službu a aká je pravdepodobnosť, že urobí nákup.

Rovnako ako výber typografie výrazne ovplyvňuje emócie zákazníkov použitá farba. Červená farba má napríklad schopnosť ovplyvniť a stimulovať chuť do jedla, o čom nájdete aj množstvo štúdií. Veľa značiek potravín preto používa pri typografii práve červenú farbu.

Vieme, že výber červenej farby v typografii, napríklad v logu, je vhodnou voľbou pre potraviny. Červená farba by bola naopak nevhodnou voľbou pre obchod zameraný na spánok, ako napríklad obchod s posteľami alebo matracmi. Dôvod je jasný, keďže červená farba prináša akciu a vzrušenie, vzbudzuje pocit naliehavosti a povzbudzuje k rýchlemu rozhodovaniu. Červená farba sa preto často používa v reklame, pri výpredajoch alebo aj pri dopravných značkách.

Základy dobrej typografie

To, nakoľko je font dobrý, dokážeme posúdiť na základe troch parametrov. Tieto parametre sú:

• zrozumiteľnosť
• čitateľnosť
• kontext

Zrozumiteľnosť

Zrozumiteľnosť sa týka schopnosti čitateľov ľahko porozumieť písmenám alebo znakom. Niektoré typy fontov, ako napríklad Arial alebo Helvetica, sú čitateľnejšie ako iné. Práve preto sú v online svete jednoduché fonty užitočnejšie. Zrozumiteľnosť fontu je priamo previazaná s jeho anatómiou.

Prepracované ozdobné písma a skripty sú často menej čitateľné a vyžadujú si od ľudí viac pozornosti. Veľa dizajnérov sa snaží dosiahnuť atraktívny vizuál práve tým, že použije “fancy” okrasný font, čím v konečnom dôsledku zníži čitateľnosť vizuálu. Je dôležité počítať aj s tým, že bežne používané a jednoduché fonty nemusia byť za určitých okolností čitateľné (napríklad použitím príliš malej veľkosti fontu. Viac o tom, na čo si dávať pozor, sa dočítate nižšie v článku).

Anatómia písma

Bolo by zbytočné písať o tom, aký je rozdiel medzi pätkovým a bezpätkovým fontom. Typografia je však v skutočnosti oveľa zaujímavejšia a skladá sa z množstva častí.

Tak ako my, aj typografia má svoje nálady, štýly a anatomické vlastnosti. Celá táto téma by bola skôr vhodná na samostatný článok, no v tejto infografike je pre nás postačujúco (a veľmi pekne) spracovaná.

Čitateľnosť

Čitateľnosť definuje, ako ľahko sú slová v blokoch textu čitateľné. Je dôležité zamerať sa na detaily a dbať na kombináciu čitateľnosti fontu a zrozumiteľnosti jeho znakov, pretože samotný font bude vo veľkej miere rozhodovať o čitateľnosti vašej stránky.

Faktory, ktoré ovplyvňujú čitateľnosť textu

Vždy je potrebné zohľadniť minimálne veľkosť písma, riadkovanie a dĺžku riadku v bloku textu, aby bol dobre čitateľný. Vo všeobecnosti je však týchto parametrov viac:

• Veľkosť písma
• Dĺžka riadku
• Zarovnanie textu
• Riadkovanie
• Vzdialenosť medzi písmenami
• Farba písma
• Farba pozadia písma

Kontext

Kontext je základný konštrukčný prvok komunikácie a obsahu, na ktorý sa často zabúda. V skratke ide o text z pohľadu obsahu. Hlavným faktorom pri práci s textom je výber vhodného fontu. Výber vhodného fontu závisí na vašom obsahu, cieľovej skupine a emócii, ktorú chcete vyvolať. Nižšie na obrázku demonštrujem, ako práve výber farby a fontu dokáže ovplyvniť kontext vašej správy a emócie, ktoré vyvolá.

Ako som spomínal vyššie, aj samotná farba hrá veľkú rolu v kontexte:

• Červený alebo čierny text a veľké písmená v nadpisoch motivujú k akcii a pôsobia naliehavo. Preto sú vhodné napríklad pre bannerovú reklamu. Výnimkou však môže byť, ak potrebujete vzbudiť pocit pohodlia. Vtedy môže byť vhodnejšia iná farba, napríklad modrá.
• Ružová farba môže vyvolať pocit ľahkosti, ale má aj svoj potenciálne kontroverzný význam. Niektorí ľudia spájajú ružovú so slabosťou, alebo s určitými politickými postojmi.
• Žltá vyvoláva teplo a pocit voľnosti, pretože si ju zvykneme spájať so slnkom.
• Oranžová je často spájaná s finančnými inštitúciami a zľavami.
• Zlatá farba sa často spája s bohatstvom, silou, kvalitou alebo luxusom. Veľa ľudí ju však považuje za výstrednú.

Majte vždy na pamäti, že akokoľvek dobre máte napísaný text, nikdy nebude priťahovať ľudí, ak nebude čitateľný. Nezabudnite, že v konečno dôsledku chcete vždy  pozitívne ovplyvniť správanie a emócie zákazníkov.

Deväť (9) pravidiel pre správny výber a použitie písma pre váš digitálny produkt alebo web stránku

Ako som spomínal na začiatku, výber správneho fontu pre váš projekt môže byť umením, ale nemusí to byť veda. Stačí dodržať pár pravidiel na to, aby ste dosiahli skvelú čitateľnosť vašej web stránky, e-shopu alebo iného digitálneho produktu. Nakoniec, viac ako 90% obsahu na vašej stránke je text.

1.   Pätkové vs. bezpätkové písmo

Je to jedno z prvých rozhodnutí, ktoré vás čaká. V tomto prípade sú výhodnejšou voľbou bezpätkové fonty (sans serif), pretože sú vo väčšine prípadov čitateľnejšie a zrozumiteľnejšie ako pätkové (serif) fonty.

2.   Množstvo písiem

Najlepšie bude, ak použijete len jeden typ fontu. Ak sa rozhodnete použiť dva rôzne fonty, je dôležité, aby boli kontrastné (napríklad výrazné silný font pre nadpisy a jednoduché ľahko čitateľný font pre obsah). Použitie viac ako dvoch fontov už dokáže výrazne znížiť čitateľnosť.

3.   Rozšírená latinka

Pri výbere fontu sa často podceňuje jeho kódovanie (podpora znakov pre rôzne krajiny). Dôsledkom toho sa často stáva, že použitý font nepodporuje niektoré znaky našej abecedy (najčastejšie ide o písmená s diakritikou č,ľ,š a pod.). Pre väčšinu krajín (Európa, UK, USA) je najvhodnejšie použiť font, ktorý podporuje rozšírenú latinku (extended latin). Budete tak mať istotu, že ste vybrali font, ktorý správne zobrazí všetky znaky a symboly vo väčšine jazykov. V prípade ak viete, že sa chystáte rozšíriť podnikanie na východné krajiny, budete potrebovať font, ktorý podporuje aj Cyriliku.

4.   Veľkosť písma

Pri online a digitálnych riešeniach je najvhodnejšou voľbou použiť pre bežný text veľkosť písma 16px. Veľkosť písma 12px je väčšinou pri bežných fontoch už hranica čitateľnosti. Pri výbere veľkosti fontu je veľmi dôležité sledovať aj jeho zobrazenie na rôznych zariadeniach. Môže sa stať, že font sa pri niektorých veľkostiach nemusí na rôznych zariadeniach vykresliť správne.

5.   Hierarchia obsahu

Významnú úlohu v čitateľnosti textu hrá hierarchia obsahu. Táto hierarchia reprezentuje členenie textu na jednotlivé časti (nadpisy, podnadpisy, odstavce…), ktoré sú od seba jednoznačne odlíšené.

Tento kontrast medzi jednotlivými časťami dosiahnete najjednoduchšie jasným definovaním veľkosti fontu, jeho rezu (regular, bold) a prípadne výberom doplnkového fontu alebo zmenou farby. Majte však na pamäti, že najlepší spôsob ako si udržať čitateľnosť a jasnú hierarchiu vášho obsahu je zachovať jasné proporcie jednotlivých častí (napríklad úrovne nadpisov budú jednoznačné a nebudú medzi sebou zameniteľné) obsahu.

6.   Dĺžka riadku v bloku

Dĺžka riadku textu v bloku výrazne ovplyvňuje náš komfort pri čítaní. V závislosti od veľkosti textu sa môže táto dĺžka riadka líšiť. Pre bežný text je optimálna dĺžka riadka medzi 45 a 75 znakmi. Ak zväčšíme veľkosť fontu, musíme zväčšiť aj dĺžku riadka. Nenechajte sa však nikdy zmiasť potrebou zaplniť textom celú šírku stránky, aby ste sa vyhli prázdnemu miestu. Pri príliš dlhých (alebo aj príliš krátkych) riadkoch v texte sa čitateľovi často stáva, že po dočítaní riadku nevie nadviazať na začiatok toho ďalšieho, čítanie sa stáva nekomfortným a často prechádza do frustrácie.

7.   Riadkovanie

Riadkovanie predstavuje vertikálny priestor medzi riadkami textu od jeho spodnej časti až po vrchnú časť spodného riadka. Zmena riadkovania fontu je veľmi jednoduchá úprava (často podceňovaná), ktorá dokáže výrazne ovplyvniť komfort čítania a celkovú čitateľnosť vášho textu. Najčastejšie ide o prípady, kedy používame tmavé farby fontu, kedy text pôsobí ťažko a potrebujeme, aby viac “dýchal”. Optimálna veľkosť riadkovania sa pohybuje pri 120 % pri nadpisoch a bez obáv 140 – 160 % pri bežnom texte.

8.   Zarovnanie textu

Každý štýl zarovnania má odlišné aplikácie v dizajne a vlastné výzvy, ktoré ovplyvňujú čitateľnosť textu.

Pri online dizajne alebo digitálnych produktoch je najvhodnejšou voľbou využívať zarovnanie textu na ľavú stranu. Dôvod je jednoduchý, keďže je pre nás (a väčšinu jazykov) prirodzené čítať text zľava do prava. V rovnakom alebo podobnom vzorci prechádzame a skenujeme aj webové stránky. Z estetických dôvodov  môžete mať sklon skúšať zarovnať text do bloku k okrajom. V digitálnom svete je to však nevhodné riešenie (medzi slovami vznikajú rôzne veľké medzery), ktoré znižuje čitateľnosť textu.

9.   Farba textu a farba pozadia textu

Ako som už spomínal na začiatku článku, samotná farba dokáže výrazne ovplyvniť čitateľnosť a kontext fontu. Pri výbere farby a fontu je dôležité byť opatrný. Výrazný, tučný čierny font môže odvádzať pozornosť vášho zákazníka od iných obsahových častí, ktorým ďalej nemusí venovať pozornosť.

Pri farebnom pozadí textu je lepšie zvoliť tmavšie farby a vyhnúť sa svetlým a žiarivým farbám. Červené alebo žlté pozadie môže sťažiť čitateľnosť bieleho fontu. Ďalším prípadom nevhodného výberu farby sú prelínajúce sa farby fontu s pozadím. Použitie červeného fontu na červenom pozadí v žiadnom prípade nebude efektívne.

Podobné pravidlá platia aj pri výbere farby pre font na bielom pozadí. Najlepšou voľbou je zvoliť opäť tmavšie farby fontu. Práve svetlé farby, ako napríklad ružová a žltá, alebo svetlé odtiene šedej farby výrazne znižujú jeho čitateľnosť. Ak sa pre svetlé farby predsalen rozhodnete, zvoľte font, ktoré je výraznejšie a hrubšie. Pri tmavých farbách fontu môžete naopak bez obáv zvoliť tenšie elegantnejšie typy fontu.