Tipográfia: Hogyan használd hatékonyan a webdizájnban

A tipográfia mindig is fontos szerepet játszott a webdizájnban, hosszú ideig azonban inkább a nagyobb költségvetéssel dolgozók kiváltsága volt komolyabban foglalkozni vele. Ma már szinte bárki alkalmazhatja fogásait – sőt, ez erősen ajánlott.

Azt, hogy milyen fontos az első benyomás egy weboldal esetén, már régóta tudjuk. Ezért érdemes a látogatói statisztikákat is figyelni! Egy 2006-os, a Behaviour & Information Technology szaklapban publikált tanulmány szerint mindössze 50 milliszekundum áll rendelkezésünkre, hogy egy honlappal kedvező első benyomást tegyünk a látogatóra. Ez körülbelül a fele annak az időnek, amennyi alatt egy emberről első benyomást alkotunk.

A Consumer WebWatch tanulmánya azt is kimutatta, hogy a felhasználók egy igen jelentős hányada (46,1%) egy weboldal küllemét, a webdesignt vizsgálja először, amikor kialakul benne a vélemény annak hitelességéről. Tehát az elrendezést, színvilágot, grafikai megoldásokat – és persze a tipográfiát.

Mire használhatjuk a tipográfiát?

Ha végigtekintünk 2015 világhálóján, úgy találhatjuk, hogy nem sok változatosság van a felhasznált betűtípusok terén. Ami valahol érhető is, hiszen aki új weboldalt épít, sokszor inkább a megszokott megoldásokat választja ahelyett, hogy valami formabontóbb és egyben kockázatosabb megoldással kísérletezne.

Mára jelentős teret hódítottak maguknak a sans serif, vagyis talpatlan betűtípusok, amelyek összességében meglehetősen egyhangúak – bár találkozhatunk egy-egy kreatív megoldással, a legtöbb esetben a betűkre minimális hangsúlyt helyeznek a webdizájnerek.

Kevés változatosságot figyelhetünk meg olyan területeken is, mint az e-mail marketing – a felhasznált betűtípusok nagyrészt Georgia, Arial és Helvetica, a többi typeface elhanyagolható mértékben jut csak szerephez. Ebből a szempontból a Google szöveges keresőmarketinges hirdetései is egyformák, hogy a versenyt a bennük foglalt tartalom és a helyezés eredményezze.

A tartalom egyre fontosabbá válásával azonban a betűkre, betűtípusokra igenis nagy figyelmet kellene fektetnünk.

Az iA egy 2006-os írásban, amely ma sem tekinthető elavultnak, odáig megy, hogy kijelenti, a webdizájn 95%-a tipográfia – hiszen a weben megtalálható információk 95 százalékban írott anyagként szerepelnek.

Közölnek egy megszívlelendő idézetet is Emil Ruder svájci tipográfustól, aki szerint a nyomtatott anyagok elképesztő mennyisége miatt az egyéni munka ereje elenyészőben van, az emberek egyszerűen nem képesek feldolgozni minden információt, amely rendelkezésre áll – s ezért a tipográfusok feladata, hogy úgy formálják a nyomtatott anyagokat, hogy az olvasók érdeklődését nagyobb eséllyel keltsék fel.

Bár a content shock elméletét napjaink marketingesei már elvetik, Ruder következtetésével egyáltalán nem haszontalan foglalkozni. Valójában mindegy, mekkora információmennyiség áll a rendelkezésünkre, hiszen nem számít, tíz vagy tízezer weboldalon nem olvassuk-e el a szöveget.

Miért fontos a tipográfia az észlelésben?

A webdizájner feladata (többek között) az, hogy olyan hatást gyakoroljon munkájával a felhasználóra, hogy maradásra, tartalomfogyasztásra bírja. Hogy jobbat, a célközönség számára érdekesebbet készítsen a tízezernél - akár egy microsite-ról, akár egy teljes webáruház fejlesztésről van szó.

A Practical Typography ekönyve részleteiben is elmagyarázza, hogy milyen hatással van észlelésünkre a tipográfia. Másodpercek alatt választhatunk két weboldal, cikk vagy éppen önéletrajz között mindössze az alapján, hogy milyen betűtípust használnak, hogyan szerkesztik meg az oldalakat.

Az esztétika persze szubjektív, a webdizájn azonban soha nem abból indul ki, hogy „mindenkinek más tetszik”. A cél, hogy megtaláljuk, ami a célközönségünk lehető legnagyobb hányadának tetszik.

A tipográfia, ahogyan a webdizájn számos más eleme, például a grafikai tervezés, önmagában is vízválasztó lehet, hiszen a felhasználó meggyőzősére nagyon minimális mennyiségű idő áll csak rendelkezésünkre.

Ráadásul, a felhasználói élményt (user experience, UX) a tipográfiával rendkívüli mértékben befolyásolhatjuk, többek között azért, mert

a túlságosan kis betűméret és a rossz kontraszt a leggyakoribb panaszok közé tartoznak, amelyeket az online szövegeket olvasók megfogalmaznak;
a 40 év felettieknek sokkal kevesebb fény jut el a retinájába, mint a fiatalabbaknak, így nehezebben is olvasnak – 60 éves korában ez az arány már csak 20%.

Túl kevés volna a font?

A webdizájnerek egy gyakori korai kifogása a változatosság hiánya volt – egyszerűen nem állt rendelkezésre elég betűtípus ahhoz, hogy valóban változatos képet mutathasson a web.

Ez ma már messze nem igaz. A Bright Eye Media már 2009-ben több mint 100 ezerre becsülte a rendelkezésre álló fontok számát. A felhasználó felületen (UI, user interface) szintén fontos, milyen tipográfiával találkozik a netező.

A másik gyakori kifogás az egyedi megoldások ellen a túlságosan alacsony felbontás volt – a dizájnerek arra hivatkoztak, hogy a kisfelbontású kijelzőin meg sem látszanának az egyedi megoldások. Ma már azonban nem az ormótlan CRT-monitorok, hanem a retinakijelzők korát éljük, így ez az érv is semmibe enyészett.

A flat design és a minimalizmus reneszánszát éli, s ezzel a tipográfia jelentősége is nagyot nőtt – a szövegekre nagyobb figyelmet irányít maga a minimáldizájn. És akkor még nem is beszéltünk a Mobile First Design trendjéről.

Vajon a tipográfia csak a betűtípusokról szól?

Egyáltalán nem.

Az elmúlt években a különlegesebb betűtípusok használata mellett más tipográfiai trendek is megjelentek a webdizájnban – az extrém méretű szövegek használata például, amelyet a hagyományos marketing már régen felfedezett magának. Gondoljunk csak a hirdetőtáblákra, amelyeken méteres betűk ordítják a legfontosabb hívószavakat, s a szárazabb információk csak apró betűn szerepelnek.

A fesztiválok plakátjai például mind ezt a módszert alkalmazzák: a fellépők nevei azok, melyek felkeltik a célközönség figyelmét, így ezeket óriási betűvel írják ki, míg az olyan információk, mint a fesztivál helye és ideje, már kisebb méretben jelennek meg. Érthető, hiszen ha a figyelmet megragadtuk, az érdeklődő már közelebb jön, elolvassa azt is, hol-mikor-miért és így tovább.

Ilyen bátorságot ma már a webdizájnerek is mutatnak - figyelve a helyes ergonómiára - , 85 pont feletti betűméretekkel, amihez persze fontos, hogy a grafikai kontextus is illeszkedjen. A dizájn és a képek egy ilyen erős megoldás hatékonyságát könnyen felboríthatják.

Ennél persze diszkrétebb módok is léteznek arra, hogy a tipográfia segítségével pozitívan hassunk közönségünk szépérzékére.

Fontos mérlegelnivaló a reszponzivitás

Tekintettel kell lennünk a közönség szövegolvasási szokásaira. Célunk egyrészt az, hogy tökéletesen fogyaszthatóvá, másrészt emlékezetessé tegyük a tartalmat. Alkalmazhatunk tehát egyedi megoldásokat, de minden esetben érdemes A/B tesztekkel megbizonyosodni arról, hogy az valóban könnyen olvasható, és nincsenek benne például összetéveszthetetlen van felismerhetetlen karakterek.

A dizájn kialakításánál ezután vegyük figyelembe azt is, hogy a különféle eszközöknél más és más távolságról olvassák szövegeinket a felhasználók. Így a reszponzivitás jegyében be kell állítanunk, hogy az egyes platformok esetén mekkora méretű szövegek jelenjenek meg.

A szövegegységek megjelenése is nagyban múlik a használt betűtípuson. Érdemes ezt is tesztelni, olyan eszközök segítségével például, mint a Universal Typography demója.
Igazán figyelemfelkeltő megoldásokat elsősorban a címek és alcímek esetében érdemes alkalmaznunk – és persze olyan módon, hogy az összhangban legyen a szöveggel magával. 
Alkalmazhatunk például 3D-effekteket (amelyek ma már egy kis retró-hangulatot is adnak a szövegnek) vagy éppen fejjel lefelé fordított szavakat helyezhetünk el. Ez utóbbinál semmi sem vonzza oda a tekintetet biztosabban, ahová mi akarjuk.
Érdekesebbé tehetjük a szöveget, ha serif és sans típusokat kombinálunk, ezt azonban nagy óvatossággal érdemes kivitelezni – az egymáshoz illeszkedő betűtípusok kiválasztása egyáltalán nem egyszerű feladat.

Akkor hát mennyire lényeges, hogy néznek ki a betűk?

Eleve nem csak a betűkről beszélünk, ha a tipográfia a téma, hanem a szöveg komplett megjelenéséről mérettel, sorközökkel és minden mással együtt.

A jelentősége mindennek pedig óriási - minden design ötletet mérlegelnünk kell. A felhasználók egyetlen pillanat – sőt, még kevesebb – alatt megállapítják magukban egy-egy weboldalról, hogy az esetleg nehezen olvasható, vagy éppen trehányul néz ki, mint amire nem fordítottak figyelmet, csak összeválogattak egy sor különféle betűtípust. Vagy éppen unalmas, mert ugyanúgy néz ki, mint minden más oldal a weben, amely Helveticával és Ariallal dolgozik.

Az egyedi betűtípusok, méretek vagy éppen a színek használata erősen ajánlott technika, amely segíthet abban, hogy irányítsuk látogatóinkat. Hogy tovább ösztönözzük őket az olvasásban, hogy megkönnyítsük azt számukra, vagy a kívánt helyre irányítsuk tekintetüket. Aki tudja, hogy az ilyen finom manipulációk mennyire fontosak az online marketingben, sejtheti, hogy a tipográfiával egy olyan erőteljes eszköz áll rendelkezésére, amelyet legtöbb versenytársa nem aknáz ki teljesen (vagy egyáltalán).

Érdemes tehát a webdizájn-folyamat legelején elgondolkodni azon, hogy mélyebben érintsük ezt a kérdéskört is, és olyan módon tegyük egyedivé szövegeinket, ahogyan senki más nem teszi.