A jó tipográfia 5 lépcsőfoka – Ne aggódj többet

Design

Amikor egy weboldalt böngészek vagy egy könyvet olvasok, először mindig a felhasznált betűtípusra figyelek fel. Pontosan ezért, ha a betűk vagy a tipográfia nem megfelelő, akkor az demotivál az olvasás folytatására, nem számít, hogy mennyire jó a tartalom. Egyet értek azzal, hogy a szépség mércéje a szemlélő ízlésén alapszik, de összességében a betűtípusok között is vannak szebbek és legszebbek. Ha a weboldaladon nem elég jó a tipográfia, nehezen fogod tudni lenyűgözni az olvasóid.

Szeretnénk abban segíteni, hogy ki tudd választani az ideális tipográfiát a projektjeidhez, ezért összeszedtünk néhány hasznos tippet és koncepciót, amit jó ha tudsz ha tipográfiával foglalkozol. Érdemes körülnézned a Webragacs tipográfia kategóriájában is, hiszen már temérdek hasznos információt tettünk közzé a témával kapcsolatban.

Első lépés: Olvashatóság

Mi határozza meg a jó tipográfiát? Természetesen támogatnia, segítenie és még inspirálnia is kell az olvasót abban, hogy elolvasson egy szöveget. Egy betűtípus hasztalan, ha nem lendíti előre az olvashatóságot és nem segíti a felhasználót, hogy a legapróbb erőfeszítés nélkül olvashasson. Annak érdekében, hogy a tipográfiai törekvéseid sikeresek legyenek, mindenek előtt az olvashatóságra kell fókuszálnod.

Az egyszerűen olvasható szöveg alappillérei nagyon egyszerűek: óvakodj a furcsa betűtípusoktól, kerüld az olyan színeket, amitől az embernek megfájdul a szeme is, és így tovább. Azonban, ha a projekted megkívánja, nyilván használhatsz furcsa betűtípusokat is, ez nem törvényszerű csak egy erős ajánlat. Gondolj végig ilyenkor mindent legalább kétszer, ne vidd túlzásba a furcsa betűtípusok mennyiségét.

Véleményem szerint, talán a legjobb választás olvashatóság szempontjából az Open Sans betűtípus. Végtére is, nem ok nélkül használja azt a WordPress.com, nemde? Itt is a példa, a WP.com Rólunk részéről, ami bepillantást enged az olvashatóság egy fejezetébe. (A régebbi verzió Helvetica/Arial kombinációt használt a bal oldalon, míg az új Open Sans-ot a jobb oldalon)

Wordpress.com Rólunk

Bár a Helvetica-Arial páros a legkedveltebb betűtípusok közé tartoznak, kétség kívül nem ők képezik az olvashatóság csúcsát. A fenti képen jobb oldalán az Open Sans sokkal szellősebb, “nem folyik össze”, pontosan ezért is érdemelne több figyelmet.

Második lépés: Színek

A design talán legmeghatározóbb és legaprólékosabban kiválasztott elemei a színek. A figyelmet pedig teljes jogossággal megérdemlik. (Amennyiben a színek sajátosságairól, jelentéseikről, alkalmazásukról szeretnél bővebben olvasni, a Webragacson találsz egy kiváló három részes sorozatot csak a színekről.)

A tipográfia értelmében, olyan színeket kell választanod, amik nem rontják az olvasás élményét (pl.: megfelelő kontrasztarányok), de ugyanakkor hozzájárulnak és kiemelik a dizájn egyediségét is. (Igen, bár csak ilyen egyszerű lenne, ugye? A lényeg, hogy az alapelvek és pozitív hozzáállás meglegyen, sose feledd.)

Színek

A kép forrása

Az ideális színek kiválasztása nem egyszerű, de érdemes figyelem előtt tartani az alábbiakat: Úgy kell megválasztanod a használni kívánt színeket, hogy azok felhívják magukra a figyelmet, de éppen csak annyi időre, hogy aztán átadják a stafétabotot a tartalomnak. A jól megválasztott színek ne maguktól akarják megváltani a világot, csupán   tegyenek hozzá érdemben a betűtípus és a tartalom sikeréhez. Ugyanis, míg néhány szín pár másodpercnyi lendületet ad (mondjuk úgy: kezdőlöketet) és kellemesebb közeget teremt, addig a tartalom akár percekre vagy órákra is lekötheti a figyelmet.

Harmadik lépés: Méret, térköz és elhelyezkedés

A szöveg méretezés az a terület, ahol már a tények javára fény derült. A címsorok mindig nagyobb betűvel íródnak, mint a szövegdoboz. A hosszabb szövegek bekezdésekre tagolódnak. A linkek elkülönülnek a szövegkörnyezettől. De ugyanakkor vannak olyan alkalmak, amikor nem okoz problémát egy furcsa betűtípus, vagy a megszokottól eltérő betűméret arányok. (Fontos: A tipográfiában jártas személyek igyekeznek magukat távol tartani a “sorkizárt” szövegmegjelenítéstől, mert abnormális szóközméreteket melegágyát képezik, amik rontják az olvashatóságot.)

Denise Chandler

 

Denise Chandler honlapja remekül példázza, hogy a különc betűtípusokkal is jól lehet operálni, ha mondjuk egy portfóliós oldalról van szó. Mindamellett a térközök is pont ideálisak, nem hagynak túl sok teret üresen és nem is zárják el a levegőtől a szövegtörzset. Ebből okulva, a jó tipográfiában mindig fontos hogy az objektumok (képek, címsorok, bekezdések, dobozok/boxok) között ideális legyen a távolság: ne vegyenek el túl sokat a térből, de ne is hagyják azt üresen.

Negyedi lépés: Hely az innovációnak

Kreatív iparágban dolgozóként, mindig kell helyet hagynunk a személyes innovációnknak (stílusunknak) a munkáinkban. Ez a terület pontosan az, amit mindenkinek magának kell megtapasztalnia és kialakítania, hiszen komoly embereknek nem mások mondják meg milyen legyen a stílusuk. Maguk alakítják. De következzék néhány példa arra, hogyan is keverje az ember a stílusát a tipográfiai normákkal.

Innováció

  • Mindig szem előtt kell tartani azt a tényt, hogy a tipográfia az olvashatóságot kell segítse. Érdemes a különleges és egyedi ötletekkel teszteket végezni, hogy nem-e vesznek el az olvasás élményéből.
  • Tartasd a célt a szemed előtt. Ha egy híroldalnak választasz betűtípusokat, nyilván professzionálisabb hatásúakat fogsz választani (a muszáj nagy úr!). Viszont, ha egy klub oldalát tervezed, valószínűleg már kevésbé kell ragaszkodnod a komoly betűtípusokhoz.
  • Ha tényleg komolyan gondolod a saját stílusod, tegyél meg mindent, hogy megszabadulj az általánosságban elterjedt megoldásoktól. Egy hírportálhoz biztosan egy professzionális betűtípus kell, de azt senki sem parancsolja hogy Arial legyen a logó, menü, címsorok és bekezdések betűtípusa.
  • Bizonyosodj meg róla, hogy a felhasznált színek valóban hozzátesznek a megjelenéshez és nem állnak az könnyű olvashatóság útjába. Szervezd a tipográfia színeit a dizájn fő színei köré.
  • Szükségtelen mondani, de óvakodj az ördögtől! A köznyelvben a Comic Sans nevet viseli.

Ötödik lépés: Az üzenet

Bármi, ami összefüggésbe hozható a kreativitással, üzenetet kell hordozzon. Egy regény a szerző nézőpontját közvetíti az olvasó felé, a festmény kifejezése a festője érzéseinek, még egy egyszerű plakát is üzenetet hordoz magában a készítőjéről. Nyilvánvaló, hogy ez alól a web sem kivétel.

Annak érdekében hogy  tipográfiával kapcsolatos döntések és az weboldal üzenete harmóniában legyen egymással, ideje újra és újra megkérdezned magadtól, hogy mit is közvetít az oldal. Amikor egymás után többször ugyan azt a választ kapod és nem változik az üzenet minden nap, jó úton jársz a harmónia felé. Ki szeretné, ha egy alapítványi oldal olyan érzést keltene, mintha egy sportfogadó iroda honlapján járna az ember.

Üzenet

 

Vegyük példának a “The Peach Design” oldalát, ahol a baracksárga szín lesz az első, ami szembetűnik, ez pedig kiváló harmóniában van az oldal nevével (peach = barack). Az oldalt megtekintve villámgyorsan ráeszmélünk, mi is a profilja, nem kell oldalakat olvasnunk, hogy kiderüljön: “Webdesign és Fejlesztés” a fő szakterületük az “Illusztrációk” mellett.

Végszó

Reméljük tetszett a cikk, ha kifogásod, kérdése volna, lentebb hagyhatsz kommentet, amire szívesen válaszolunk. amennyiben szeretnél még többet olvasni, ilyen témákról látogasd meg a tipográfia kategóriát, ahol temérdek rendkívül hasznos, izgalmas és érdekes olvasnivaló vár.

Cikk forrása: Speckyboy, Index kép forrása: Deviantart/TJay-Design

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!

Eddig 1 hozzászólás érkezett. Szólj hozzá!

  1. balintant

    Ezeknek a szabályoknak nagyon jól sikerült az új dizájn elkészítésekor eleget tenni. Gratula!

A kommentelési lehetőség zárolva van ehhez a cikkhez.