Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-11-105 komment

Hogyan válassz betűtípusokat a weboldaladra?

Elmondunk mindent, amit a betűtípusok kiválasztásáról, kombinálásáról, alkalmazásáról tudnod érdemes, ha van vagy lesz egy weboldalad. Külön megemlítjük, hogy milyen szempontok merülnek fel a mobilos megjelenésnél.

Egy betűtípusnak nem csak annyi a feladata egy weboldalon vagy egy applikációban, hogy jól nézzen ki. Könnyen olvashatóvá, gyorsan áttekinthetővé kell tennie a szöveget, miközben stabil vizuális kapcsolatot teremt a tartalommal.

A ClickLaboratory egyik esettanulmányból kiderül, hogy egy általuk optimalizált weboldalnál pusztán a betűtípus megváltoztatásával 10 százalékkal csökkentették a visszapattanási arányt, 19 százalékkal a kilépési arányt, 24 százalékkal növelték az egy látogatás során megtekintett oldalak számát, míg a konverziót 133 százalékkal emelték meg. Ennyit változtattak a tipográfián:

A ClickLaboratory ennyit módosított

A ClickLaboratory ennyit módosított

Ahogy a képen is látható, a Test Font esetében nagyobb lett a betű mérete és változott a betűtípus. Ez alapján akkor érdemes foglalkozni a betűtípus kérdésével? Úgy tűnik, hogy igen. Kezdjük ott, hogy

Miként hatnak a betűtípusok a felhasználókra?

A különböző betűtípusok különféle érzelmeket váltanak ki az emberekből, amikor rájuk pillantanak. Egy betűtípus által kiváltott érzelem és az olvashatóság két külön dolog. Így van ez például a jól ismert Disney logóval, mely alig-alig olvasható betűkből áll, ennek ellenére, mint egészet, könnyen befogadjuk, és egyfajta érzelmi hatást vált ki az emberekben. Ha ugyanazt a szöveget más és más betűtípussal írjuk, akkor más és más hatást váltunk ki, és így más benyomás alakul ki rólunk, változik az egyéniségünk. De nézzük, hogy a betűtípusok milyen üzeneteket hordoznak!

A serif betűtípusok

Ha tiszteletre méltónak és megbízhatónak akarunk látszani már a betűtípusunkkal is, akkor válasszunk egy serif betűt. Olyan fogalmak kapcsolhatók az ilyen betűtípusokhoz, mint a tisztesség, a stabilitás, a hagyomány, ugyanakkor kissé merev és régimódi. A Webshark logója így nézne ki egy serif betűtípussal, a Heuristicával írva:

serif font

A sans serif

A letisztult és egyszerű betűtípusok családja, melyek modernebbnek hatnak, mint a serif betűk. Nem rejtegetnek semmit, azt fejezik ki – egyenesen és tárgyilagosan -, amiről a szöveg szól. Nem véletlen, hogy a digitális világban ezekkel találkozhatunk leggyakrabban. Ennek ellenére kétféle sans serif betűtípus is eltérő érzelmeket válthat ki, más hatást kelt. A Websharkot írhatjuk így is sans seriffel:

sans serif

Kézírásos betűtípusok

Sokan az eleganciát, a kecsességet próbálják kifejezni, amikor valamilyen kézírásos betűtípust választanak. És valóban, az emberekben is ezt az érzést keltik, de emellett személyesnek, kreatívnak és szeretetet sugárzónak tűnnek. Mindez azonban ritkán van csak összhangban azzal, amit egy cég szeretne sugározni magáról. A Webshark esetében például így hatna, ami ugye egy weboldalak fejlesztésével foglalkozó cégnél nem lenne túl meggyőző:

kézírásos font

Display betűk

Ezek azok a betűtípusok, melyek nagyobb méreteknél, 14 pt felett kezdenek érvényesülni, ennél kisebb méretben nem is érdemes próbálkozni velük. Viszont ezekkel lehet talán a legkomolyabb érzelmi hatást kiváltani a közönségben, vagyis az adja a legerőteljesebb karaktert a weboldalunknak, cégünknek. Már ha sikerül a megfelelőt kiválasztani. Legtöbbször barátságosak, vidámak, és könnyen megragadják az emberek figyelmét, ugyanakkor túl harsányak, így óvatosan kell bánni velük. Mi lenne a benyomásod a Websharkról, ha így nézne ki a logónk?

display

Modern betűtípusok

Igazán progresszív, futurisztikus és egyben sílusos betűtípusok, intelligenciát sugároznak. Azt mutatják, hogy a cég nem csak itt és most van jelen, hanem a jövőbe tekint, diktálja a trendeket. A modern betűtípusok azokat a lehetőségeket tükrözik, melyet a holnap hozhat el. Ugyanakkor hidegnek és nagyon “technikai” jellegűnek hatnak, mintha csak egy sci-fiből lépnének elő:

modern

Dekoratív betűk

Megkülönböztethetünk még úgynevezett dekoratív betűtípusokat, melyek erősen stilizáltak, messze állnak a hétköznapitól, ugyanakkor játékosságot visznek a designba. A közönséget megnyugtatják fesztelen, barátságos kisugárzásukkal. Ugyanakkor minden egyes betűtípust egyénileg kell megítélni, mert lényeges különbségeket hordoznak, annak ellenére, hogy egy családba tartoznak. Amikor közülük akarunk választani, akkor nagyon veszélyes terepre tévedünk, úgyhogy óvatosnak kell lenni velük, és előre tudni kell, hogy a közönségünk érteni fogja-e, amit ki szeretnénk fejezni.

dekoratív font

Amit itt felsoroltunk, az egyfajta csoportosítása a betűtípusoknak, melyeket persze máshogy is lehet kategorizálni.

Az ismerős betűtípusok bizalmat keltenek

A kiválasztásnál figyelembe kell venni, hogy nem csak az számít, hogy egy-egy betűtípus melyik családba tartozik, hiszen a közönségünkre az is hatással van, hogy mennyire ismerik már az adott betűtípust. Minél többször találkoztak már vele, annál jobban megbíznak benned, illetve az üzenetben, amit közvetíteni akarsz feléjük.

Ez az oka annak, hogy bár megszámlálhatatlan betűtípus közül választhatunk, a tervezők majdnem mindig ugyanazon pár típus közül válogatnak. Nem muszáj persze nekünk is mindig Helveticával írni, ugyanakkor ajánlott olyan betűtípust választani, melyet mondjuk a Helvetica inspirált, tehát egészen hasonló hozzá, mégsem ugyanaz.

Mindez, amiről beszéltünk, elsősorban a logók betűire, esetleg címekre, leadekre igaz, tehát nem a teljes szövegre. A kenyérszöveg sokszor olvashatatlanná válik a nagyon eredeti, szokatlan betűtípusoktól, vagyis nem ajánlott őket hosszú szövegek esetében alkalmazni.

Milyen üzenetet hordoz a betűtípusod?

A betűtípus befolyásolja az érzékelésünket, azt hogy milyen képet alakítunk ki egy weboldalról, hogyan alakul a cég imidzse.

A betűtípusok pszichológiája

A betűtípusok pszichológiája

2012-ben a New York Times egyik szerzője, Errol Morris egy tanulmányban vizsgálta meg az egyes betűtípusok “megbízhatóságát”. Ehhez írt egy cikket, melyben arról volt szó, hogy vajon kell-e aggódnunk amiatt, hogy a Földet elpusztítja egy meteorit becsapódása. A lényege az volt, hogy a meteoritok nem jelentenek számottevő fenyegetést ránk nézve. Ezután Morris azt kérdezte meg az olvasókról, hogy igaznak vagy hamisnak gondolják-e ezt az állítást. A kísérlet az volt a dologban, hogy hatféle betűtípust használt, egyik olvasó az egyikkel írt szöveget kapott, egy másik a másikkal. Mint kiderült, azok az olvasók találták a legnagyobb arányban igaznak az állítást, akik Baskerville betűtípussal írt szöveget kaptak, ami egy igen kifinomult serif betűtípus. De általában a serif betűkkel írt szöveget megbízhatóbbnak ítélték.

Egyébként a serif megbízhatóságát igazolta vissza az is, amikor főiskolai dolgozatokra adott érdemjegyeket vizsgáltak, annak fényében, hogy azokat milyen betűtípussal írták. Mint kiderült, a Terbuchet – ami egy sans-serif betűtípus – kapta a legrosszabb minősítést, míg a két serif betűtípus (a Times New Roman és a Georgia) jobban teljesített. Vagyis, ha szeretnénk nem csak megbízhatóak lenni, hanem annak is látszani, akkor használjunk serif betűket a landing page-ünkön és a call to action szövegeinknél, különösen, ha a hihetőségen múlik a konverzió.

Mire kell figyelned a weboldaladon használt betűknél?

Akad néhány olyan alapvető szabály, melyet mindenképpen érdemes betartanod:

1. Legyen olvasható!

Az olvashatóság javítása érdekében kerüld az olvashatatlan betűtípusokat, mint amilyenek például a kézírásos betűtípusok. Ez alól csak néhány kivételes esetben érdemes eltérni, és ilyenkor lehet díszesebb betűtípusokat használni. A legjobban olvasható betűtípusok jellemzően nem vonják magukra a figyelmet, majdhogynem láthatatlanok, egyszerűen csak működnek.

2. Hagyj helyet a sorok közöt!

A sortávolság különösen fontos tényező mobilos megjelenésnél, ahol maximális sortávolságokat érdemes kialakítani a könnyű olvashatóság érdekében. A sorok távolságát a szöveg mérete, a szövegek mennyisége, a betűk stílusa, a kijelző szélessége határozza meg. Az alábbi szabályokat érdemes figyelembe venni:

  • A legtöbb weboldal esetében érdemes a sortávolságot a szövegméret 125 százalékára venni.
  • Mobil-eszközöknél legyen a szövegméret 150 százaléka a sortávolság.
  • A bekezdések között is hagyj megfelelő távolságot a könnyebb áttekinthetőség érdekében!

3. Használj kerek betűtípusokat!

A nagy, kerek betűket sokkal könnyebb olvasni, mint a szűk, sűrű betűtípusokat. A szélesebb betűtípusokkal írt szöveget könnyebben el tudod olvasni, mivel könnyebben elkülöníthetők a betűk. Amikor a gyerekek olvasni és írni tanulnak, akkor tipikusan ilyen betűket használnak, és ezek egy életre beleégnek az agyukba.

4. Használj nagyobb X-magasságú betűket!

A betűk magassága – elsősorban kisbetűknél – alapvetően meghatározza, hogy milyen könnyű a felhasználóknak befogadnia a tartalmaidat. Annál könnyebb a szövegeket olvasni, minél kisebb a különbség a nagybetűid és kisbetűid magassága között. Ezért olyan betűtípusokat érdemes keresned, ahol az x-magasság kétharmada-háromnegyede a nagybetűk magasságának.

5. Használj kevesebb betűtípust!

A túl sok betűtípus használata zavarni fogja az embereket, mert nehezebb befogadni egy ilyen szöveget, de idegesítő is. Ezért elegendő mindössze két betűtípus-családot kiválasztani, és megmaradni ezek használatánál. Ha ez megvan, tervezd meg, hogy miként kellene használni az egyes betűtípusokat. Ebbe beletartozik a szín, a méret és az elhelyezés a designban.

6. Növeld a kontrasztot!

Lehet, hogy bizonyos esetekben jól néz ki a minimális kontraszt a háttér és a szöveg között, de nem felhasználóbarát és megnehezíti az olvasást. Pedig a tartalom teszi különlegessé és fontossá a weboldaladat. Ezért növeld a kontrasztot, így az emberek könnyebben olvassák majd a szövegeidet. Ez az oka annak is, hogy miért a fekete-fehér (illetve világos háttér) párosítás a legelterjedtebb. Minél több a szöveg a weboldaladon, annál fontosabb a megfelelő kontraszt kialakítása. Ha már mereszteni kell a szemed a szövegre, akkor valószínűleg túl kicsi a kontraszt (esetleg túl kicsik a betűk).

Hogyan válaszd ki a betűtípusokat a weboldaladra, és miként kombináld őket?

Már egyetlen betűtípus kiválasztása sem egyszerű dolog, de az igazi kihívás, amikor két-három betűtípust akarsz használni a weboldaladon. Ennek eredménye időnként ijesztő. Íme, a gyors és egyszerű, a kicsit bonyolultabb, végül pedig az egészen komoly munkát igénylő megoldás a problémára.

Induljunk ki abból, hogy miközben egy weboldalon igazából nincs szükség több betűtípus kombinálására – hiszen egyetlen betűtípus használatával is kialakítható a megfelelő hierarchia és átadható az üzenet – mégis nagyon kevés olyan weboldalt találunk, ahol csak egyetlen betűtípus jelenik meg. Ez azért van, mert a logóban általában előfordulnak betűk, melyek egyfajta betűtípussal íródtak, és szinte biztos, hogy az oldalnak van egy szöveges tartalma, ami viszont egy másik betűtípussal (mivel a logónál használt betűk általában nem működnek a kenyérszöveg esetében).

Egy is elég, de három legyen a maximum!

Ökölszabály szerint háromnál több betűtípust nem szabad használni egy weboldalon. Vagyis, ha a logóban kap helyet az egyik, akkor már csak kettőt kombinálhatunk. Általában ezek közül az egyik a kenyérszövegnek jut, a másik pedig a címsoroknak, hogy kellően kiemelkedjenek, amikor a felhasználó átfutja az oldalunkat.

Persze a címsor kiemelhető akár színnel vagy mérettel, így nem muszáj ehhez egy másik betűtípust felhasználni. Arról nem is beszélve, hogy egy betűtípusnak mérete is van, egy újabb http-lekérést jelent, vagyis az oldal betöltését lassítja. Így összességében elmondható, hogy minél kevesebb betűtípust tudunk használni, annál jobb.

Hogyan válaszd ki az első betűtípust?

Az első betűtípus kiválasztása nem mindig rajtunk múlik, hiszen sokszor a márka irányelvei vagy más keretek határozzák meg. Bizonyos esetekben pedig felmerülnek kényszerek, például a kevés hely miatt valamilyen sűrített megoldást kell találni, esetleg a sok jogi szöveg miatt kis méretben is könnyen olvasható betűtípust. Ugyanakkor, ha mégis a tiéd a választás, akkor a kenyérszöveg betűtípusának meghatározásával kezdd a munkát.

A kenyérszöveg esetében a legfontosabb szempont az olvashatóság lesz, ilyenkor egyéb megfontolások, mint az egyediség, egyéniség még nem nagyon merülnek fel. Érdemes egyébként olyan jól ismert és már többször használt, bevált betűtípust választani, mely biztosan nem okoz meglepetést. Ez sokkal jobb megoldás, mint ha minden egyes webdesign esetén új betűtípussal kísérleteznénk.

Hogyan válassz második betűtípust?

A második betűtípus választásakor kezd a helyzet bonyolódni. A második betűtípust ugyanis nem praktikus szempontok alapján kell meghatározni, hanem karaktere alapján. Minden betűtípusnak van egy személyisége, számos jellegzetessége. Érdemes tudni, hogy ha két azonos jellemvonásokkal bíró betűtípust helyezünk egymás mellé, akkor ezek hatása megtöbbszöröződik.

Másrészt azonban a második betűtípusnak összhangban kell lennie az elsővel, hogy kialakuljon egy egységes megjelenés. Ilyenkor a betűtípusok bizonyos paramétereinek meg kell egyezniük. Ennek figyelembe vételével három lehetőségünk van második betűtípust választani:

1. A biztonságos megoldás

Nem túl kreatív megoldás, de biztosan nem nyúlsz mellé, ha egyetlen betűtípusra korlátozod a betűtípusaid számát, és ezen belül csak a méretet, vastagságot, dőlést változtatod. Sok betűtípus esetében találsz többféle típust, ahol a betű vastagsága változik. Nézz csak rá például a Bebas Neue-re. Együtt használhatod például a Bebas Neue Boldot a Bebas Neue Lighttal. Ez a betűtípus csak nagybetűs változatban létezik, így nem feltétlenül jó megoldás, de az eljárás más esetekben is ugyanez.

Egy fokkal izgalmasabb megoldás, amikor egy betűtípus serif változatának létezik egy sans serif változata is, és ezeket kombinálod. Ilyen például a Droid Sans és a Droid Serif. Ezeknek a betűknek a kialakítása közel azonos, a kontraszt minimális, ugyanakkor mégis megéri az extra http-lekérést. Ha nem kezeled magabiztosan az egyes betűtípusokat, akkor ez egy jó opció lehet számodra.

2. Családon belül marad

Ugyanakkor nem csak azonos betűtípusból választhatsz serif és sans serif változatot, hanem eltérő betűtípusok között is. Szintén biztonságos megoldás, ha azonos családon belül keresgélsz, mint amilyen például a Lucida. Az ilyen családokon belül az alapformák – szinte minden esetben, egy-két kivételtől eltekintve – megegyeznek, tehát nem lesz gond a párosítással.

Ugyanakkor eltérő betűtípusoknál is bevetheted a serif és sans serif párosítását, például egymás mellé teszed a Times New Romant és a Calibrit. Ilyenkor azonban már lehetnek gondok az összeillőséggel, de persze az sem feltétlenül gond, ha eltérő karakterű két betűtípus.

3. Kontrasztos karakterek használata

Az ellentétek ugyanis vonzzák egymást, és ez igaz a betűtípusokra is. A túlságosan hasonló betűtípusok unalmasak egymás mellett, így nem is adnak semmit a designodhoz.

Ilyenkor abból indulhatsz ki, hogy ha már választottál egy jól olvasható betűtípust a kenyérszövegnek, akkor választhatsz címsornak egy olyat, amelynek teljesen ellentétes a karaktere. Ez lehet akár nehezen olvasható betűtípus, hiszen itt nem az olvashatóság az elsődleges cél, mint a kenyérszövegnél, hanem a hatás. De párosíthatsz egy könnyű, légies betűtípust egy vaskos, nehéz betűvel, vagy akár egy serifet és egy elegáns, kézzel írt betűtípussal

4. Más stílusú betűtípusok

Az is lehetséges megoldás, hogy nem a betűtípusok karakterei ellentétesek egymással, hanem csak egy-egy jellemvonásuk. Vagyis ilyenkor meghatározzuk az első betűtípusunk fő jellegzetességét, majd keresünk egy olyan betűt, amely csak ebben egyezik meg vele.

Ez nem egyszerű faladat, elég szubjektív is a dolog, ugyanakkor ez a megoldás hozhatja a legmeglepőbb és a legkellemesebb kombinációkat. A különböző betűtípusok, különböző kombinációkban alkalmazva nagyon érdekes és eltérő hatásokat kelthetnek egy már elkészül webdesign esetén.

Harmadik betűtípus?

Ha nem tartalmaz túl sok szöveget a weboldalad, akkor akár két betűtípussal is elboldogulsz (címsor, kenyérszöveg). Ugyanakkor bizonyos esetekben szükséged lehet további betűtípusokra is, de jól teszed, ha háromban maximálod a számukat. Előfordulhat, hogy bizonyos esetekben négy van több betűtípusra is szükséges lehet, ezek azonban kivételes esetek.

Mint sok más dolognál, a visszafogottság a betűtípusok kiválasztása esetén is kifizetődő lehet, különösen azért, mert a betűtípusok kombinálása nem egyszerű munka. De végül is csak egyedül az eredmény számít: néha az a legjobb, ha merünk kockáztatni és egészen meglepő párosokat alkotunk.

Segít a technika

Ha viszont úgy érzed, hogy nem megy a választás, vagy biztosra akarsz menni, akkor ma már számtalan online lehetőség közül választhatsz, melyek megfelelő párosításokat javasolnak.Csak ki kell választanod a fő fontodat, és máris kapod a javaslatot a másodikra. Így működik például a Canva megoldása. Typ.io ugyanakkor különböző font-párosításokat javasol, csak keresgélni kell közöttük. Hasonló javaslatokat itt is találsz, vagy érdemes lehet megpróbálnod a Typespirationt is. A Web Font Blender oldalán viszont szabadon próbálgathatod a különböző párosításokat, melyeket megkapsz kódként is, illetve ha valamelyik megtetszik, mentheted. Érdemes lehet azonban benézni a Pinterestre is, ahol számtalan tippet találsz font-párosításra.

Hogyan válassz betűtípust mobilra?

A betűtípusok kiválasztásának, alkalmazásának és kombinálásának szabályai mobilra optimalizált vagy éppen reszponzív weboldalon sem nagyon térnek el attól, mint amit kizárólag desktopra készült weboldalon alkalmazunk, azonban bizonyos dolgokra nem árt kiemelten figyelni, ha mobilon is megfelelő felhasználói élményt szeretnénk. Egy tipográfia annál jobb, minél kevesebb erőfeszítésbe kerül a felhasználónak elolvasnia a szöveget. A szemnek és az agynak keveset kelljen dolgoznia ahhoz, hogy befogadja azt. Az okostelefonok nagyobb kihívást jelentenek ilyen szempontból, mert a kijelző kicsi, a hely szűkös, a fényviszonyok nem mindig optimálisak.

Legyen olvasható!

Ha egyetlen szabályt sem fogadsz meg az itt felsoroltak közül, azt az egyet mindenképpen tartsd be, hogy a szöveged olyan betűtípusokkal írd, amelyek könnyen olvashatók. Ha ugyanis a felhasználók számára kihívást jelent egy-egy weboldal szöveges tartalmának az elolvasása, akkor azt a szöveget egyszerűen nem fogják elolvasni.

A mobileszközök kijelzői kicsik és igen változó minőségűek, eltérő mértékben tükröződnek, fényerejük nem egyforma. A mobileszközök kijelzőit tehát nehezebb olvasni, mint egy laptopét a félárnyékos szobában. A betűtípust és annak méretét, színét gondosan kell kiválasztani, megfelelően össze kell hangolni a háttérrel.

A tér

Egy betű nem csak az azt megrajzoló vonalakból áll, hanem az általa elfoglalt térből, ahogy a szavak és a mondatok is. Mobilra tervezett oldalnál különös figyelmet kell fordítani a térre, és annak hierarchiájára. Például arra, hogy a betűk közötti távolság mennyivel kisebb, mint a szavak közötti, és ennél mennyivel nagyobb a sorok közötti.

A sorok hossza

Általánosan elfogadott, hogy kényelmesen a körülbelül 65 karakteres hosszúságú sorok olvashatók. Ugyanakkor a sor fizikai hossza attól is függ, hogy milyen betűtípusról van szó, a betűk között mekkora a távolság, és persze magától a szövegtől. Mobilon azonban – a szöveg jól olvashatósága mellett – nem fog elférni 65 karakter egy sorban. Mivel azonban az újságokban a keskeny hasábok akár 39 karakteresek is lehetnek, és ezek az évtizedek gyakorlati tesztjei alapján jól olvashatók, így mobilon is ezt lehet alkalmazni.

Sortávolság

A 16 pontos sortávolság egy általában elfogadott méret, de a jó sortávolság nagyban függ attól is, mekkora a sorok hossza. Tehát amennyiben rövidebb sorokról van szó – mint mobilnál -, úgy csökkenthető a sortávolság. Ez azt jelenti, hogy desktopon nagyobb, mobilon szűkebb sortávolságok lesznek optimálisak.

Az optimális betűméret

Minden betűtípusnak megvan az az optimális mérete, amelyiknél a legjobban mutat a kijelzőn és az a pont, amikor a böngészőben alkalmazott élsimítás a legkevésbé torzítja. Ez egyben a legjobb kontrasztot is jelenti, ami különösen fontos mobileszközökön, ahol természetes környezetben igen gyakori a tükröződés.

Igazítás

Egy szöveg normál esetekben balra rendezett vagy sorkizárt. Amikor azonban sorkizárttá tesszük, akkor megváltoznak a távolságok a soron belül. Mobilon a sorkizárt megoldás azért lehet különösen zavaró, mert a sorok eleve rövidebbek, így talán csak néhány szó fér a sorba, vagyis azok furcsán mutatnak nagyon széthúzva. Ezért érdemesebb inkább a balra rendezésnél maradni.

Címsorok

Míg desktopon, nagy képrenyőn teljesen természetes és nem okoz problémát, ha nagyon nagy a különbség a címsorok és és a normál szöveg mérete között, mobilkijelzőn ez már nem mutat jól. Kisebbre kell tehát venni a méretbeli eltérést a különböző címsorok és a normál szöveg mérete között.

Vedd figyelembe a közönséged!

Amikor a betűtípusainkat meghatározzuk, akkor elsősorban a közönségünk igényeit vegyük figyelembe, legyen számukra természetes és barátságos a betűkkel teremtett környezet. A kiválasztott betűtípusok meghatározzák a weboldal hangját, ezektől nem jó később eltérni, mert zavart okozhatnak a felhasználókban.

Alakíts ki kontrasztot!

A kontrasztot sok célból alkalmazzák a webdesignban, az egyik ilyen cél az olvashatóság javítása. Egy erősebb kontraszttal – vagyis fehér alapon fekete betűkkel – könnyebben olvashatóvá válik a szövegünk, míg értelemszerűen minél inkább csökkentjük a kontrasztot a betűk és a háttér között, annál inkább rontunk az olvashatóságon.

Ugyanabból a családból válassz!

Amikor a betűtípusok kombinálásáról van szó, akkor a lehetőségek száma szinte végtelen. Érdemes azonban egyetlen betűtípus családból vagy egy designertől választani különböző betűtípusokat. Ezek ugyanis sokkal harmonikusabban tudnak illeszkedni egymáshoz, és még így is igen széles a választási lehetőség.

Korlátozd a betűtípusok számát!

Ahogy a fentebb linkelt cikkben is olvashattátok, a betűtípusok számát érdemes bizonyos keretek között tartani. A legtöbb szakértő azt javasolja, hogy kettő vagy legfeljebb három betűtípust használj csak a weboldaladon. Persze akadhatnak esetek, amikor ennél több betűtípusnak is helye van a designban, de ez általában a fókusz hiányára utal.

A betűtípusok nem csak az oldal vizuális megjelenésére hatnak, hanem annak teljesítményére is. A betűtípusokat ugyanis be kell tölteni, ami idő, akár a szerverünkről, akár egy külső szolgáltatótól történik. Ez akkor lesz különösen fontos, amikor a felhasználók mobiltelefonon, mobilnetet használva töltenek be egy weboldalt. Ilyenkor ugyanis minden tizedmásodperc számít. Ha túl sok betűtípust használunk, akkor azt mind le kell tölteni, ami hosszabbá teszi a weboldal betöltési idejét.

Ne felejtsd el a teszteket!

A szabályok semmit sem érnek, ha az alkalmazásuk segítségével létrehozott weboldalakat nem tesztelitek. Be kell tehát tölteni a weboldalad mobilon is, hogy lásd miként néz ki a szöveged az eszközön. A gyakorlati alkalmazás révén derül ki, hogy szükség van-e további kiigazításokra a betűtípusokon, hogy még hatékonyabb legyen a weboldalad.

Végül 3 jó tanács

1. Használj 12 pontos betűméretet!

A 12 pontos méret tűnik ideálisnak, ha olvashatóságról van szó. Akár nagyobb, akár kisebb a betű mérete, nőni fog az olvasási idő. A Wichita State University nyolc betűtípus esetében vizsgálta a méretek hatását, mégpedig a 10, a 12 és a 14 pontos méretek esetében. Mint kiderítették, a 12 pontos betűméret eredményezte a legnagyobb olvasási sebességet. A gond ezzel csak az, hogy egy 12 pontos betűtípus a különböző méretű és felbontású kijelzőkön más és más méretet jelent centiben mérve.

Mindenestre 12 pontos betűméretet kellene használnunk a kenyérszövegeknél, mivel az olvasók a lehető legkevesebb időt akarják eltölteni szövegek előtt ülve. Ugyanakkor a címeket nyilván nem ugyanekkora betűtípussal fogjuk írni, már csak azért sem, mert ezeknek figyelemfelkeltőnek kell lenniük. Ha viszont azt szeretnénk, ha az olvasók egy szövegen sokat rágódjanak, akkor vegyük kisebbre a betűméretet. Ha viszont olvasóink túlnyomó részt idős emberek, akkor nagyobbra: az idősek a 14 pontos méretet könnyebben és gyorsabban tudják olvasni.

2. Növeld a sorközt!

A sorköz esetében már egészen kis változtatások is komoly különbséget tudnak eredményezni. A sorközök megnövelésével válik kellően szellőssé a szöveg, márpedig kevés olyan ember van, aki a sűrűn egymásra rótt sorok zsúfolságával szeret tartósan szembesülni.

3. Keep it simple, stupid!

Na de akkor milyen betűtípust is válasszunk abból a döbbenetes mennyiségből, ami akár csak egy Microsoft Word dokumentum megírásakor is rendelkezésünkre áll. A legjobb, ha az elterjedt, alapvető fontokat használjuk, míg a különleges, egyedi betűtípusokat megtartjuk a logó számára. Az alapvető betűtípusok esetében olyanokról van szó, mint az Arial, a Verdana, a Trebuchet, vagy például a Georgia.

További javaslat, hogy egy weboldalon belül célszerű mérsékelt számban használni a különböző betűtípusokat. Ha túl sokfélét használunk, az zavarosnak fog tűnni, és tönkreteheti az egész oldal stílusát. Ugyanakkor a felhasznált betűtípusoknak jól is kell illeszkednük egymáshoz, vagyis ha akár kettőt vagy hármat választunk egymás mellé, azoknak is tökéletesen összhangban kell lenniük. Persze a megfelelő betűtípus kiválasztását is érdemes tesztelni. De ez minden más részletére is igaz a weboldalnak.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

  • Farkas Adrienn

    Chiller betűtípushoz keresek kenyérszöveg fontot. Tudnál ajánlani hozzá passzolót?

    • nemethkrisztian

      Szerintünk a “Tinos” betűtípus elképzelhető lenne mellé.

  • Kamilla János

    Szia @nemethkrisztian:disqus , azt szeretném kérdezni, hogy pontosan mikori a cikk és mennyire uptodate! A szakdolgozatomban hivatkoznék rá, de ha pár évnél régebbi akkor sajnos nem jó… Köszönöm előre is, remek cikk!

    • nemethkrisztian

      Üdv, most frissítettem májusban, de fent látod is a dátumot.

  • Nistor Katalin

    De jó cikk, köszönöm !