Typografia v digitálnom svete, prečo ju vôbec riešiť

Správna typografia má byť súčasťou každej stránky, bez ohľadu na jej zameranie (prezentačné weby, e-commerce riešenia a pod.). Ak je písmo zvolené správne, častokrát si to ani neuvedomujeme a zostávame na stránke dlhší čas. V opačnom prípade však dochádza k odchodom používateľov, ktorí nedosiahli svoju informačnú potrebu.

Vymedzenie základných pojmov

• Písmo – kompletná sústava znakov vrátane interpunkcie, čísel a špeciálnych znakov
• Rez – variant fontu/písma ako: light, regular, semibold, bold, black
• Font – konkrétny variant písma s určitými vlastnosťami ako: veľkosť, rez, šírka
• Typografia – odbor zaoberajúci sa skúmaním a procesom tvorby písem
• UI dizajn – dizajn používateľského rozhrania, všetko čo je okom viditeľné
• PPI – pixel per inch – počet pixelov v prepočte na jeden palec

Čo je to digitálna typografia?

Oblasť, ktorá sa zaoberá štruktúrou písmen a slov, zlepšuje čitateľnosť a navigáciu na webe. Okrem toho pomáha vytvárať esteticky príjemné rozhranie pre používateľov a dodáva tak textu život.

Oproti tlačovému dizajnu má veľmi veľa premenných, s ktorými treba rátať. Ak si vezmeme do ruky tlačený dokument, písmo na ňom sa nezmení, vždy drží tvar a formu. Naopak digitálna typografia v sebe skrýva nasledujúce faktory, s ktorými treba vždy počítať:

• Veľkosť obrazovky – responzívny dizajn na rôznych zobrazovacích zariadeniach
• Rozlíšenie obrazovky – hustota pixelov (ppi) je dôležitá v každej oblasti digitálnej grafiky, aj keď sa vyrábajú čoraz kvalitnejšie displeje, netreba zabúdať na staršie zariadenia, ktoré sa stále používajú
• Kalibrácia monitoru – rovnako ako pri tlači, tak aj v digitálnom svete je potrebné mať správne a verné zobrazenie farieb, ktoré musí vyhovovať všetkým typom obrazoviek

Hlavné typy písma v typografii

S rôznym typom písma sa stretávame dennodenne a každé môže vytvárať inú atmosféru, tón a celkovo inak pôsobiť na vizuál stránky. Pre tlačovú grafiku sa viac hodí Serif, ktorý zlepšuje čitateľnosť a orientáciu, no keď hovoríme o použiteľnosti na webe alebo v aplikácii, tu sa stretávame najčastejšie s písmom typu Sans-serif. Písmo podľa kategórií môžeme rozdeliť do piatich skupín:

1. Serif (pätkové)
2. Sans-serif (bezpätkové)
3. Display (efektné)
4. Script (kaligrafické)
5. Monospace (proporcionálne)

Serif a sans-serif majú najväčšie zastúpenie práve v digitálnom svete.

Serif (pätkové písmo) – pôsobí konvenčným dojmom a vytvára dojem oficiálnosti. Vďaka tomuto typu je možné čítať texty rýchlejšie a presnejšie aj pri dlhších odstavcoch. Pomáha tomu práve spomínaná pätka, ktoré vedie zrak čítajúceho a vytvára pomyselný riadok.

Sans-serif (bezpätkové písmo) – ide o jednoduchší, ležérnejší a hlavne mladší a modernejší štýl písma. Vďaka dobrému vykresľovaniu na rôznych zobrazovacích zariadeniach sa vynikajúco hodí práve pre webové stránky a aplikácie.

Display (efektné/nadpisové písmo) – vhodné predovšetkým na upútanie pozornosti, používa sa zväčša pri nadpisoch a titulkoch. Z hľadiska čitateľnosti sa neodporúča používať tento druh písma do základného textu.

Script (kaligrafické/ručne písané) – ide o písmo snažiace sa napodobniť ručne písaný text a vynikajúco sa hodí na svadobné tlačoviny, či iné významné elegantné udalosti. Jeho použitie je však vhodné len ako nadpis alebo krátky text. Toto písmo sa určite neodporúča používať pri dlhších textových odstavcoch.

Monospace (proporcionálne) – druh písma, ktoré je typické predovšetkým rovnakou šírkou všetkých znakov ako aj medzier a pre určitú skupinu užívateľov, ktorí trpia dyslexiou, nie je vôbec vhodné a sťažuje čitateľnosť. Najvhodnejším použitím je programátorské prostredie, tabuľky, kódy a pod.

Statické vs. variabilné písmo

Keď hovoríme o statickom druhu písma, máme na mysli navrhnuté a zdigitalizované znaky, ktoré vyžadujú jeden súbor pre každý rez písma, ktorý chceme použiť na webe alebo v inom digitálnom dokumente. Ak chceme nainštalovať font Arial v statickej verzii, budeme potrebovať 12 súborov od rezu Arial Light až po Arial Black Italic.

Variabilné fonty, označované aj ako OpenType sú relatívne novým formátom fontov, ktoré boli predstavené už v roku 2016. Súbor obsahujúci takéto písmo umožňuje inštaláciu viacerých rezov písma hneď. Vďaka variabilným fontom môžu dizajnéri používať jeden súbor rodiny písma vo všetkých rezoch, od extra light až po black.

Rozdiel medzi statickým a variabilným písmom pre dizajnérov

Statické písma	Variabilné písma
Statické písma musia mať viac súborov pre každý rez	Variabilné písma využívajú jeden súbor, ktorý obsahuje všetky rezy
Statické písma v základe nepodporujú žiadne CSS animácie	Variabilné písma sú využívané predovšetkým kvôli ľahším CSS animáciám
Statické písma sa viažu na pevné obmedzenia, ktoré stanovil autor	Variabilné písma ponúkajú niekoľko typografických variácií
Pri statických písmach si nemôžeme vytvoriť vlastný štýl písma	Variabilné písma ponúkajú možnosť tvorby vlastných štýlov písma
Statické písma nezlepšujú výkon webu	Variabilné písma sú rýchlejšie načítané, majú lepšiu odozvu a čitateľnosť na webe

Dôležitosť písma pri webovom dizajne

Ako sme si už povedali, typografia ako taká je oveľa viac, ako len výber typu písma. Ide o veľmi dôležitý aspekt dizajnu UI. Ak je typografia správne nastavená, môžeme na našom webe dosiahnuť hierarchiu a grafické vyváženie.

Jednou z najdôležitejších súčastí typografie je súdržnosť. Písmo má za úlohu pôsobiť čo najvyvážanejšie s celkovým obsahom, aby webová stránka pôsobila profesionálnejšie. Okrem toho pomáha predchádzať zložitému a neprehľadnému rozhraniu. Pri poskytovaní informácii užívateľovi je dôležité zvoliť také písmo, z ktorého pochopí okamžite, čo číta.

Typografia má veľký vplyv na to, ako je webová stránka vnímaná. Správna typografia vytvára vizuálnu hierarchiu (usporiadanie prvkov na základe dôležitosti), ktorá je zapamätateľná a zároveň príjemná na vstrebávanie informácii.

Určite ste sa stretli s problémom, že vás pri čítaní väčšieho množstva textu na monitore alebo smartfóne začali bolieť oči. Je dôležité predchádzať tomuto problému, ktorým je vyčerpanie návštevníkov predovšetkým pomocou väčšieho písma, použitia hrubšieho rezu bold (nie však vo veľmi veľkom množstve), jednotného typu písma bez rezov light a extra light a hlavne správneho medziriadkového prekladu.

Písmo nemá za úlohu len informovať, ale aj sa vizuálne odlíšiť od konkurencie, čo prináša jedinečnosť webu. Vďaka tomu si vaši potenciálni užívatelia začnú spájať typ písma na webe s vašou značkou. Výrazná, súdržná typografia prináša lepšiu používateľskú skúsenosť a je možné vybudovať väčšiu dôveru a rast značky.

Doba ide veľmi rýchlo a s tým aj samotná pozornosť človeka. Práve preto sa odporúča z každej strany byť čo najstručnejší a vytvárať taký obsah, ktorý by užívateľovi rýchlo odovzdal informácie a následne ich aj rýchlo spracoval.

Na záver pár odporúčaní, ktoré sú vhodné aj pre optimalizáciu webu

1. Nepoužívajte viac ako 3 druhy písma na stránke
2. Používajte overené písma vhodné pre webové a mobilné aplikácie
3. Zvážte správnu dĺžku riadka, aby nebol príliš dlhý a aby sa v ňom čitateľ nestrácal
4. Rodinu písma vyberajte tak, aby správne fungovala v rôznych veľkostiach
5. Snažte sa o dodržiavanie správnej výšky riadka – line height
6. Uistite sa, že znaky majú dostatočný kontrast, vyhnite sa rezom extra light a light

Jednotlivé tipy pre správnu typografiu si bližšie priblížime v budúcom príspevku.

Ak sa Vám tento typ príspevku páčil a myslíte si, že by sa mohli z neho naučiť niečo nové aj vaši známi a priatelia, budem rád za akékoľvek zdieľanie.