Keresés
Header Háttér

Webshark Blog

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

2018-09-055 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.

Webshark weboldal készítésEgy 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.

I. Milyen betűtípusok léteznek, és azok miként hatnak 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

A serif betűtípusok eredete még a római korba vezethető vissza. Kialakításukat ezért az határozta meg, hogy a betűket még kőre festették, nem pedig vésték őket. Háromféle típusukat különböztetjük meg:

Régi stílus

Az ide tartozó típusok a 15-16. században, a reneszánsz korában jelentek meg. Jellemzőjük, hogy jól olvashatók és elegáns megjelenésűek. A 16. század végére szélesebbé váltak, és az ívelt serif betűk váltak népszerűvé, mint a Garamond, a Minion, a Goudy Old Style vagy a Bembo.

Régi stílusú serif betűtípusok

Átmeneti stílus

Ezek a 17. században jelentek meg, és mint a nevük is jelzi: a régi és a modern stílus közötti összekötő kapcsot jelentették. Kontrasztjuk függőlegesen erősödött, így nehezebben olvashatók, mint a régi stílusú serif betűk. Olyan betűtípusok tartoznak ide, mint a Times New Roman, a Baskerville vagy a Georgia.

Átmeneti stílusú serif betűtípusok

Modern stílus

A modern stílusú serif betűtípusok a 19. század elején bukkantak fel, és a vékony, illetve vastag vonalak erős kontrasztja jellemző rájuk. Mivel hiányoznak az ívelt vonalak és sarkok, így merev a megjelenésük. Közéjük tartozik a Bodoni vagy a Didot.

Modern stílusú serif betűk

Ami a hatásukat illeti, 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 így nézne ki egy serif betűtípussal, a Heuristicával írva:

serif font

A sans serif

A nevet még Vincent Figgins adta 1832-ben azokra a betűkre, melyek úgymond serif, tehát talp nélküliek. A sans franciául azt jelenti, hogy valami nélkül. Típusai:

Groteszk és neo-groteszk

A 19. század elején megjelent betűtípusnál a groteszk kifejezéssel a serif fontokhoz képest rendezetlen esztétikájukat akarták kiemelni. A szó William Thorogwood nevéhez fűződik, aki megalkotta az első olyan betűtípust, melyben már eleve szerepeltek kisbetűk. Közéjük tartozik az Arial, a Helvetica, a Univers, a Franklin Gothic.

Sans serif groteszk és neo-groteszk betűk

Mértani stílus

Kialakításukat a Bauhaus inspirálta, vagyis a kevesebb több elve. Alapvetően a kontraszt hiánya, a minimalista megjelenés és a mértani esztétika jellemzi őket. Például a “G” betű mindössze két elemből áll: egy ívelt és egy vízszintes vonalból, mely lezárja az ívet, vagy az “a” betű egy körből és egy függőleges vonalból. 1920-1930 között jelentek meg.

Sans serif mértani betűtípusok

Humanista stílus

Ezekre a betűkre a kézírás inspirálta hajlékonyság jellemző. A 20. század elejéig a sans serif betűk nem változtak. Edward Jonhston volt az első, aki a Johnston Sans-szal valami újat hozott, betűit a londoni földalattiban használták. Ennél híresebb lett a Gill Sans, melyet Eric Gill alkotott meg a Monotype Corporation számára. Ez volt az első olyan sans serif, melynek már eredetileg is létezett dőlt betűs változata is. Ehhez a stílushoz tartozik a Verdana, az Optima, a Tahoma.

Humanista stílusú sans serif betűtípusok

A sans serif 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ó.

II. 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.

A méretet tekintve 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. Erre a bejegyzés végén, egy külön fejezetben még visszatérünk!

2. Hagyd lélegezni a szöveget!

Az olvashatóság azonban jelentős mértékben attól is függ, hogy mekkora a távolság, a betűk, a szavak és a sorok között. A white space hiánya rontja az olvashatóságot. Például, ha az egyes szavak túl közel kerülnek egymáshoz, akkor nehezebb őket felismerni. A megfelelő white space révén viszont sokkal kellemesebb lesz a szemnek egy szöveg látványa. Természetesen a túl nagy negatív tér sem jó, hiszen akkor szétesik a szöveg.

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úfoltságával szeret tartósan szembesülni. 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áld ki a hierarchiát!

Egy weboldal struktúrájának kialakításához szükség van a megfelelő vizuális hierarchiára. Ez rendezi el az egyes elemeket, így a felhasználók könnyebben fogadják be a tartalmat. A vizuális hierarchia több részből áll. Az egyik részét a szöveg képezi, melynél tipográfiai hierarchiáról beszélünk. Ennek segítségével úgy rendszerezzük a szöveget, hogy eltérően alakítjuk ki a címsorokat, az alcímeket, a kenyérszöveget, a képaláírásokat. Ezek eltérhetnek méretükben, szélességükben, betűcsaládjukban, színükben egymástól.

A világos hierarchia jól olvashatóvá és könnyen átfuthatóvá teszi a szövegeket. Segítségével könnyű kiemelni a fontosabb részeket, hogy felhívjuk ezekre a felhasználók figyelmét.

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).

7. Vedd figyelembe a kontextust és a közönséged!

Amikor betűtípus-választásra kerül a sor, mindig érdemes átgondolni, hogy milyen környezetbe kerül a szöveg, és kikből áll a közönsége. Hiszen, mint már mondtuk, minden betűtípus más érzelmet képes kiváltani. Akadnak közöttük barátságos, vicces, komoly, üzleti jellegű betűk, melyek csak bizony hangulatú webdesignba illeszthetők bele. Ha egy betűtípus nem illeszkedik bele, akkor a közönséged összezavarod.

A legegyszerűbb példa: ha egy vidám betűtípust használsz az üzleti weboldaladon. Ilyenkor a közönség nem fog megbízni benned. Viszont egy fiatalabb közönség számára a hivatalosnak ható betűtípusok unalmasak lehetnek.

8. Óvatosan bánj a színekkel!

Sokak szerint a színeknek semmi keresnivalójuk a tipográfiában, mások szerint viszont elengedhetetlen részét képezik egy jó designnak. Itt alapvetően ízlésbeli vitáról van szó, hiszen színes tipográfia létezik, és ráadásul működni is tud.

A színek érzelmeket válthatnak ki az emberekből, és arra is alkalmasak, hogy felhívják bizonyos részekre a figyelmet. Minden szín üzenetet közvetít a felhasználók felé, mivel hatást gyakorolnak az elméjükre és a viselkedésükre.

Ugyanakkor ezen előnyök kihasználásához alaposan át kell gondolni, hogy mikor és milyen színeket használsz, mert könnyű  színes káosszá tenni a weboldalad a színes betűk révén. Amikor tehát színeket akarsz használni az alábbiakat gondold végig:

  • A színek gyakran rontják az olvashatóságot. Fontos tehát a megfelelő kontraszt a háttér és a betű között.
  • A túl sok szín csak zűrzavaros megjelenést eredményez, és igénytelen megjelenésűvé teszi az oldalad.
  • Ne feledkezz meg a színek harmóniájáraól, ennek figyelembe vételével válaszd ki az egyes színeket!

9. Egyszerűsíts!

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. A túl sok betűtípus használata túlterheli 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. Érdemes csínján bánni a dőlt betűs vagy vastagított részekkel is. Mert ezek ugyan kiemelhetnek fontos részeket, melyekre fel akarod hívni a figyelmet, azonban, ha túl sokat használod őket, akkor inkább zűrzavarosnak fog tűnni a szöveg.

III. 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.

IV. Hogyan használd a betűket mobilon?

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.

Ez azt jelenti, hogy mobilon nehezebb elérni a jó olvashatóságot. A betű mérete semmiképpen sem lehet túl kicsi, ugyanakkor, ha túl nagy, akkor nem sok információ fér ki a kijelzőre. Emellett nagyon oda kell figyelni a kontrasztra, mert napfényben sokszor rosszul látható egy kevésbé kontrasztos szöveg, ugyanakkor az erős kontraszt is zavarhatja a szemet.

Ha biztonsági megoldásra törekszel, akkor használhatod a rendszer által alapértelmezett betűtípust a Google vagy az Apple esetében is. De ha már dolgoztál egy csomót azon, hogy legyen egy egyedi weboldalad, akkor miért döntenél mondjuk a Roboto mellett a mobilos megjelenésnél. Nézzük inkább azokat a kulcsfontosságú tulajdonságokat, melyeknek meg kell felelnie a betűidnek mobilon!

A 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. (A következő fejezetben a betűméretről még lesz szó!)

A cél az, hogy legyen jól 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 méretre vonatkozó ökölszabály az lehetne, hogy használj 16 pixeles betűket a mobil-weboldalakon. Az ennél kisebb betűméret már sokak számára megnehezíti az olvasást, ugyanakkor az ennél sokkal nagyobb betűk is nehezen olvashatóak lesznek. A 16 pixeles méret általában megfelelő lesz a kenyérszövegek számára.

De mekkora betűvel írd a címsorokat? Hiszen meg kell különböztetned a címeket és a kenyérszöveget. Nem csak azért, hogy felhívd rájuk a figyelmet a mérettel, hanem, mert címsorok használatával javíthatsz a weboldal tartalmának átfuthatóságán. Korábban már napvilágot látott egy vizsgálat az MIT részéről, mely arra a kérdésre adott választ, hogy milyen legyen a szöveg, amit az emberek csak átfutnak. Vagyis alapvetően arra, hogy milyenek legyenek a címsorok. Ezt a tanulmányt és megállapításait részletesebben is idézzük a következő fejezetben. Igaz nem mobilra vonatkozik, és elsősorban a nagybetűs-kisbetűs írásmód hatását vizsgálta, azért iránymutatást ad a címsorokra vonatkozóan.

Amit viszont figyelembe kell venni, hogy míg desktopon, nagy képernyő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. Ugyanakkor nagybetűs írásmódot nyugodtan lehet alkalmazni.

Színek és kontraszt

A szín és a kontraszt mennyiségének meghatározása kritikus tényező a mobil-weboldalaknál. Gondolj csak arra, hogy napfényben, tükröződő kijelző mellett kell azt a szöveget olvashatóvá tenni, amit egyébként egy félhomályos szobában a laptop kijelzőjén vagy egy óriási monitoron remekül el tud olvasni a felhasználó.

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.

A kontrasztra vonatkozóan létezik világos iránymutatás. Ez a Web Content Accessibility Guidelines (WCAG), mely szerint a szöveg és a háttér kontrasztja 4,5 az 1-hez legyen a megfelelő olvashatóság érdekében. Vannak azonban kivételek:

  • Ha a szöveg mérete eléri a 18 pontot vagy vastagon szedetten a 14-et, akkor elég a 3:1-hez.
  • Az olyan szövegnek, mely nem a weboldal aktív részén jelentik meg, nem muszáj ilyen kontraszttal megjelennie.
  • A logón belüli kontraszt meghatározása a designer döntésén múlik.

Hogy a Te weboldalad esetében milyen a kontraszt, ellenőrizhető például a WebAIM eszközének segítségével. Amire figyelj, hogy a böngészőben megjelenő valós színekkel vizsgáld meg a színkontrasztot. Színvizsgáló böngésző-bővítményekkel meg tudod állapítani, hogy milyen színek jelennek meg háttérként és betűként, majd ezeket megadhatod az ellenőrző eszközben.

A sorok hossza

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.

Á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.

Az általános javaslat tehát az, hogy a sorok hossza mobilon valahol 30 és 40 karakter között mozogjon. Ha több vagy ennél kevesebb, az hátrányosan fogja érinteni az olvashatóságot.

Sortávolság

A jó sortávolság nagyban függ attól, mekkora a sorok hossza. Tehát amennyiben rövidebb sorokról van szó – mint mobilnál -, úgy csökkenthető a sortávolság. Vagyis, mivel mobilon rövidebbek a sorok, mint desktopon, ezért mobilon szűkebb sortávolságok lesznek optimálisak.

Annál is inkább, mert ugyanannyi szöveg elolvasásához jóval többet kell görgetni mobilon, mint desktopon. Tehát, ami egy 30-as monitoron elfér, az 3-4 kijelzőnyi csúsztatás mobilon. Ez pedig rengeteg munkát jelent a felhasználók számára, hogy megkapják ugyanazt a tartalmat. Ráadásul egy mobil-munkamenet lényegesen rövidebb, mint egy átlagos desktop-munkamenet.

A sortávolságra vonatkozóan különböző iránymutatások léteznek, de ökölszabályként talán elfogadható, hogy a betűméret 120-150 százaléka legyen. A WCAG-iránymutatás szerint a sorok közötti távolság legyen 1,5, míg a bekezdések közötti távolság 2,5.

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.

Betűtípusok

A betűtípusok számát érdemes bizonyos keretek között tartani, mondjuk kettőnél ne használj többet mobilon. 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.

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.

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.

Egy biztonságos megoldás lehet, ha például a Google által alapértelmezetten használt Robotót vagy az Apple rendszer-betűtípusát, a San Franciscót választod. Ezek persze nem segítenek abban, hogy kiemelkedővé, egyénivé tegyék a weboldalad, ugyanakkor nem is rontják az olvashatóságot.

Célszerű még mobilon megmaradni a serif, sans serif betűknél, és a dekoratív vagy kézírásos betűket inkább a desktop megjelenítésnél használnod. Azt is érdemes ellenőrizni, hogy miként jelenik meg a nagy i, az l és az 1-es. Ha ezek nagyon hasonlók egymáshoz, az gondot okozhat, lassíthatja az olvasást.

Emellett érdemes olyan betűttípusokat használni, melyek jól működnek a weben. Ilyenek az úgynevezett web-biztos betűk, melyekből egy 15-ös listát ezen az oldalon találhatsz. Persze, ezek nem túl izgalmas betűtípusok.

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. Minél rövidebb a szöveged, annál nagyobb betűket használj!

Miközben egyre jellemzőbb, hogy csak néhány másodpercre, pillanatokra kapjuk elő a mobilunkat, vagy nézünk rá az okosóránkra annak érdekében, hogy elolvassuk a rajta megjelenő gyors információkat, kialakult egy olyan designtrend, mely egyre könnyebb, karcsúbb, sőt kisebb betűket használ. Pedig a kettő nem fér meg egymással.

Ahhoz, hogy az úgynevezett mikro-olvasási időszakokat – melyek során rövid szövegeket egyetlen pillantással fogadunk be – segítsd, olyan tartalmat kell készíteni, mely rendkívül könnyen olvasható és megérhető, a legkülönfélébb, gyakran kedvezőtlen külső körülmény között. De hogy néz ki az a szöveg, amelyik megfelel az ilyen típusú olvasásnak?

A vizsgálatok eredményei egyértelműek

Szerencsére egy kutatás már megválaszolta ezt a kérdést – hívta fel a figyelmet a Nielsen Norman Group. Az MIT Agelab/Clear-IP kutatói ugyanis megvizsgálták, hogy milyen betűméret és -szélesség, a nagybetűség-kisbetűség miként befolyásolja az olvasási sebességet. Az résztvevőknek bizonyos karaktersorokat mutattak, melyekről meg kellett állapítaniuk, hogy értelmes szövegek-e vagy sem. A független változók az alábbiak voltak:

  • Szövegméret: kisebb (3mm) és nagyobb (4mm)
  • Nagybetű, kisbetű variáció
  • Szövegszélesség: sűrített vagy normál

Minden esetben a Frutiger betűttípust használták, mely korábban jól teljesített az olvashatósági vizsgálatokon, és természetesen mérték az olvasási időt. Mint kiderült, a nagyobb, szélesebb és nagybetűvel írt szövegek mindig jobban teljesítettek.

Habár azt korábban is már lehetett tudni, hogy a nagyméretű betűk hatékonyabbak az olvashatóságot tekintve, az most derült ki, hogy a kisbetűs írás 26 százalékkal, míg a sűrített 11,2 százalékkal több időt igényel a felhasználóktól. Az eredmények itt láthatók:

A kutatás tehát kimondta, hogy minél nagyobb területet foglalnak el a karakterek, annál könnyebben olvashatók. Legalábbis akkor, ha a szöveg izoláltan jelenik meg. Ez azt jelenti, hogy hosszabb szövegek olvasásánál vagy átfutásánál már más a helyzet. Hosszabb szövegegységeknél a csupa nagybetűvel írt szövegek esetén romlik ugyanis az olvashatóság.

Hogyan alkalmazd a megállapításokat?

Tervezés során könnyű elfelejteni, hogy az emberek nem teljes figyelemmel és nem ideális körülmények között használják majd a termékünket. Gyakran szétszórtak, feszültek, több dolgot is csinálnak egyszerre. Azok a szövegek, melyek nem optimális feltételek között is jól olvashatók, sokat segítenek az embereknek abban, hogy megértsék őket.

A tanulmány alapján levonható következtetések az alábbiak:

  • Használj nagyobb betűméretet minden olyan szövegednél, mely pár szóból áll és egy gyors pillantással elolvasható!
  • Kerüld a csupa kisbetűvel írt szavakat!
  • A címeknél használd a betűk szélesebb és nagyobb verzióit, és kerüld azt az új trendet, mely csupa kisbetűvel írja a címeket!
  • Szintén kerüld a sűrű és keskeny betűket, különösen az olyan mobilalkalmazásoknál, melyeket nem ideális környezetben használhatnak az emberek (mint például a GPS navigáció).
  • Ugyancsak nagyobb betűket használj a jelzéseknél, és kerüld a kisbetűvel írt szavakat!
  • Különösen akkor érdemes kerülnöd a kisbetűk használatát, amikor a betűméret is kicsi, vagy kicsi az úgynevezett x-magassága!

Ugyanakkor persze a kutatás nem válaszol minden felmerülő kérdésre. Valamint érdemes azt is figyelembe venni, hogy nagybetűs írásnál az olvasási sebesség hasonló volt, mint azoknál a kisbetűknél, melyek mérete elérte a nagybetűk méretét. Ráadásul több kutatás is felhívta a figyelmet arra, hogy hosszabb szövegeknél a csupa nagybetűs írásmód már lassítja az olvasást.

Tehát a megállapítások csak olyan szövegeknél érvényesek, melyek egy-két szóból állnak. Azt ugyanis nem vizsgálták, hogy mondatok esetében mi a helyzet, ahogy azt sem, hogy mi történik akkor, ha a szavak nagybetűvel kezdődnek, de kisbetűvel folytatódnak. Ezen túl lehet vizsgálni olvashatósági szempontból a különböző betűtípusokat is, illetve a serif-sans serif különbségeket.

Összességében azonban ki lehet jelenteni, hogy egy rövid szöveg esetében minél nagyobbak a betűk, annál jobb az olvashatóság. A csupa nagybetűs írásmód azonban nem javasolt a hosszabb szövegeknél, még címeknél és alcímeknél sem.

VI. Mekkora legyen a betűméret a weboldaladon? Nagyobb

A weboldalakon használt betűk méretei változnak: a designerek egyre nagyobb és könnyebben olvasható betűtípusokat használnak. A folyamat a hajtás feletti túlméretezett címsorokkal kezdődött, de elérte a szövegtörzset is. A weboldalak többsége 15-18 pixel méretű betűket használ fő szövegeinél. Néha ugyan már találkozhatunk 20 px-es vagy nagyobb kenyérszövegekkel, de lehet, hogy ennél még mindig lehetne tovább növelni a méretet? Lehet, hogy így hatékonyabb lenne a weboldal? Vagyis, ha Te még mindig 12-14 px-es betűket használsz, akkor ideje lenne tovább lépni.

A kenyérszöveg valószínűleg a weboldalad legfontosabb eleme, még akkor is, ha az emberek csak átfutják, és talán csak a címsorokat olvassák el rajta. Ennek az elemnek a hatékonyságát korlátozzuk Christian Miller szerint azzal, hogy túl kisméretű betűket használunk. Persze itt nem arról van szó, hogy a kisméretű betűk feltétlenül rosszak, hiszen egy 18 pixel méretű betű is olvasható a megfelelő távolságból. Helyük is van a designban, mert vannak olyan pontok a weboldalon, ahol jól alkalmazhatók. Ugyanakkor a kenyérszövegnél jobb választás a nagyobb betűméret.

Egy kis történelem

A jelenleg is használt betűméret még a print korszakból eredeztethető, amikor az írógépeknél használt 12 pt-os betűk tökéletesek voltak. Többek között azért is, mert minél kisebb volt a betű, annál kevesebb papírra volt szükség, így költséget lehetett megtakarítani vele. 1990-ben, a digitális platformok elterjedésével a pont alapú méretezést felváltotta a pixel. Az Apple Mac OS-nál a 12 pontos méretnek a 12 pixeles felet meg 72 ppi-nél. A Microsoft ugyanakkor a 12 pontos betűméretet 16 pixelesként határozta meg 96 ppi mellett.

Az 1990-es és a korai 2000-es évek között a weboldalak szövegmérete 9-14 pixel között változott, mivel a designerek ekkor még úgy gondolták, hogy a 16 pixel egyszerűen túl nagy, hiszen 12 pixeles méretet használtak a Macjeiken. 2011-ben a reszponzív oldalak elterjedésével jutottunk el oda, hogy a nagyobb felbontású kijelzők miatt a 16 px-es betűméret vált az elfogadott minimummá.

Miért nem nagyobbak a szövegméretek?

Ennek oka elsősorban az elvárásokban keresendő. Vagyis a webdesignerek abból indulnak ki, hogy adott méretű szövegeket szoktak meg az emberek a weben, és ha mindenki egy bizonyos méretet használ, akkor ők miért térnének el ettől?

A mobile first megközelítésnél a szövegeket a mobilok kijelzőjére optimalizálják, ami 15-18 pixeles méretet jelent. Ami rendben is lenne mobilon, azonban ugyanez a méret marad a nagyobb eszközöknél is, mint a laptopok, asztali gépek, vagy okostévék. A designerek nem bonyolítják a dolgokat azzal, hogy nagyobb szövegméreteket alkalmazzanak a nagyobb kijelzőkön.

Ráadásul a nagyobb szövegméretek sok designer szerint túlságosan nehézkesnek vagy gyerekesnek tűnnek. Pedig nem a méret az, ami miatt erre következtethetünk, hanem a betűtípus hibája. A betű kialakítása az, ami befolyásolja a képünket a szövegről. Nagyon sok olyan betűtípus van, ami egész egyszerűen nem néz ki jól nagy méretben.

További problémát jelent, hogy a kibetűzhetőséget összekeverjük az olvashatósággal. Tehát attól, hogy egy szöveg betűi jól láthatók, még nem jelenti azt, hogy könnyen is olvashatók. Utóbbi egy lépéssel tovább megy, hiszen figyelembe veszi azt az erőfeszítést, melyet a szöveg elolvasása érdekében kell megtennie a felhasználónak.

Sokan azért csökkentik egy weboldal betűméretét, hogy azzal megkíméljék a görgetéstől a felhasználókat, pedig a görgetés teljesen természetes viselkedés a web használatánál: az emberek számítanak arra, hogy egy weboldalnál görgetniük kell. Még akkor is sokszor görgetnek lefelé, amikor egy weboldal a hajtásnál véget ér, mert azt hiszik, hogy további tartalmakat találnak. A szöveg könnyű olvashatósága viszont sokkal fontosabb, mint a görgetés mennyisége.

A betűméretek mozdíthatatlanságához hozzájárulnak egyébként a keretrendszerek, mint például a Bootstrap, ahol a 3-as verziónál az alapértelmezett méret a kenyérszövegeknél 14 px , illetve 16 px a 4-esnél.

De miért is kellene nagyobbra venni a betűket?

A nagyobb betűméretek javítják a weboldal-élményt, hatékonyabbak. Már a 18 px-ről 20 px-re történő növekedés is javulást eredményez nem csak a design, hanem a felhasználói élmény tekintetében is. Hogy miért?

Távolabbról is használható

A designereknek vannak feltételezései azzal kapcsolatban, hogy egy felhasználó egy adott kijelzőméretet milyen távolságból szemlél. Egy kis kijelzőméretnél messze nincs olyan mozgásterünk, mint mondjuk egy nagyképernyős okostévénél. Egy mobilnál vagy egy laptopnál alapvető, hogy nincs messzebb, mint a karunk hossza, de már a nagyobb monitoros asztali gépeknél sem biztos ez a távolság. A felhasználó akár el is feküdhet egy fotelben, miközben a monitor valahol az íróasztal mélyén helyezkedik el.

Minél nagyobb a kijelzőméret, annál kevésbé megjósolható, hogy milyen távolságból akarja azt használni a tulajdonosa. Márpedig a nagyobb távolságoknál javul a felhasználói élmény, ha nagyobbra vesszük a weboldal elemeit, és kihasználjuk a rendelkezésünkre álló felületet.

Javul az olvashatóság

Az emberek mindössze 28 százalékát olvassák el egy weboldalnak, és rendszerint csak átfutják a tartalmat. Ennek oka elsősorban a nagy mennyiségű tartalom, ami a weben fogadja őket, valamint a korlátozott mennyiségű idő, ami a rendelkezésükre áll. Kevesen vannak, akik alaposan elolvassák egy weboldal szövegét, mivel az jelentős erőfeszítést igényel.

Ugyanakkor egy nagyobb betűméret minden felhasználó-típus számára kedvező, mert javítja az olvashatóságot. Hiszen miközben az idősebb felhasználók gyengébb látásuk miatt igénylik a nagyobb betűméreteket, addig a fiatalok azért, mert türelmetlenek, és inkább csak átfutják a szövegeket.

És minél jobb egy weboldal olvashatósága, annál nagyobb a valószínűsége annak, hogy az emberek el is fogják olvasni a rajta szereplő tartalmakat. Hiszen a nagyobb szövegek befogadása kevesebb koncentrációt igényel.

Javítja a használhatóságot

Az emberek számára az egyszerre befogadható információ mennyisége korlátozott. Minél tovább tart valaminek a megértése, annál gyengébb a teljesítményünk. Ezért kell olyan úgy felépíteni a weboldalt, hogy azon csökkentsük az információ sűrűségét. Ez azt is jelenti, hogy egyszerre kevesebb szöveget kell a felhasználók elé tenni. Minél kisebb a zsúfoltság, annál kisebb a kognitív terhelés, ami pedig javuló használhatóságot eredményez.

Erősíti a hatást

Minél nagyobb méretű egy címsor, annál erősebb érzelmi kapcsolatot alakít ki az olvasójával. Ugyanez igaz azonban a kenyérszövegre is. Az üzenetek ezáltal hangosabbak, magabiztosabbak és meggyőzőbbek lesznek.

Ráadásul a nagyobb betűméreteknél olyan részei is megjelennek a betűnek, amelyek kis méretnél láthatatlanok maradtak. Ilyenkor látszik igazán, hogy mi a különbség egy jó és egy rossz betűtípus között.

Hogyan válts nagyobb betűméretekre?

Amikor a betűk méretét határozod meg a weboldaladhoz, akkor fontos felismerni, hogy nincs olyan méret, ami minden helyzetben megfelelő lenne. Ezért nem lehet azt mondani, hogy használj 20 px-es vagy 24 px-es betűméretet. Hiszen számít a betűtípus designja, a háttér színe, a kijelzőméretek.

A legegyszerűbb a címsoroktól indulni

Talán nem a legjobb, de a legkönnyebb kiindulási pont, ha először a címsoraidnál kezdesz alkalmazni nagyobb betűméreteket, melyek felkeltik a látogatók figyelmét. Ezek is persze akkor tudnak működni, ha a címsor nem túl bonyolult vagy hosszú.

Nagyméretű betűvel írt címsor

Első nekifutásra állíts be egy akkora betűméretet, amit már kényelmetlenül nagynak érzel. Eztán kezdd el kicsit csökkenteni egészen addig, amíg nem illeszkedik bele a designba.

Kezdetnek megteszi egy legalább 80 pontos betű, de növeld addig, amíg meg nem tölti a kijelzőt. Használj relatív méretet a végső designnál, mert ez minden eszközön megfelelő megjelenést biztosít.

Ezután a kenyérszöveget tervezd meg!

Ha már sikeresen megbarátkoztál egy nagyméretű címsorral, akkor tervezd meg, hogy mekkora betűméretet használsz majd a fő szövegeidnél. Hiszen ez az elem foglalja a legnagyobb helyet a weboldalon, és megjelenése mindenképpen hatással lesz a weboldal többi részére. Ez különösen igaz a nagyobb kenyérszövegeknél, mivel ezek nagyobb helyet foglalnak el.

Ha jelenleg 16 pontosnál kisebb betűt használsz, akkor mindenképpen nagyobb méretre kell váltanod. Az ennél kisebb betűk mobilon nem olvashatók. A cél azonban az, hogy mobilon is kényelmes legyen a szövegeid olvasása úgy, hogy egy normális távolságra tartja a felhasználó magától az okostelefont. Ha közelíteni kell a szemükhöz a mobilt, amikor a weboldaladra érnek, akkor túl kicsi a betű.

Célszerű itt egy nagyon jól olvasható betűtípust választani. Ha keskenyebb a betűtípus, akkor ne félj tovább növelni a méretét. Az olyan oldalakon, melyek túlnyomó részét szövegek alkotják – tehát hosszan olvasnak a felhasználók – mindenképpen 18-as vagy 20-as betűtípusokat kellene használni, de a Mediumon például 21-es a betűméret.

Példa a betűméretre a szövegtörzsnél

Olyan betűtípust válassz, ami jól méretezhető!

Nem minden betűtípus működik jól nagyobb méreteknél. Némelyik határozottnak és élesnek tűnik kis méretnél, de kínosnak és rosszul tervezettnek látszik, amikor nagyobb a mérete. Ilyen betűtípus például az Arial vagy a Georgia, melyeknél a részletek kevésbé kidolgozottak azért, hogy 14 px-es méretnél is jól olvashatók legyenek. Az ilyen szöveg-betűtípusokat 6-14 pontos, vagy 8-18 pixeles méretre tervezték, de 24-26 px-nél már nem mutatnak jól.

A serif betűtípusoknál viszont előfordul, hogy míg jól használhatók nagyobb méreteknél, csökkentve a méretüket, kisebb kijelzőkön olvashatatlanná válnak. Az olyan serif betűtípusok, mint az Equity, a Franziska, a Leitura News, a Merriweather, a Miller, a PT Serif vagy a Tisa jól használhatók nagyobb méreteknél.

Azt is érdemes megjegyezni, hogy a mostanában tervezett betűtípusok jobban használhatók a reszponzív weboldalaknál, mint azok a betűk, amelyek még a print-korszakban születtek. Néhány modern serif betűtípus például rendkívül jól használható az eltérő méretű kijelzőkön. A lényeg tehát az, hogy a kiválasztott betűtípust meg kell vizsgálni kicsi és nagy méreteknél is, még mielőtt alkalmaznád a weboldalon.

Ne a betűméret értékére hagyatkozz!

Mivel a különböző betűtípusok nagy eltéréseket mutatnak azonos méret mellett, ezért a szemünkre hagyatkozva kell eldönteni, hogy mi a megfelelő méret, nem pedig a betűméretre vagy pedig arra, hogy egy más betűtípus egy más weboldalon jól működött az adott méret mellett.

Ráadásul az észlelt méret annak színétől és a háttér színétől is függ, így érdemes a már megválasztott színeket is figyelembe venni a méret meghatározásánál, illetve a különféle szín-elképzeléseknél külön meghatározni a megfelelő méreteket. A megfelelő kiindulási pont azonban már ne a 16 px-es méret legyen, hanem a 20-as. A 16 px-es méretet érdemes megtartani a nagyon kismértetű mobilok kijelzőjére.

Nem elég csak a betűméretet változtatni

Ha már megvagy a betűk megfelelő méretezésével, akkor tovább kell lépni, és a teljes hierarchiát át kell gondolnod. Hiszen ahogy a szövegtörzs betűmérete növekszik, úgy válhat szükségessé más méretek változtatása. Ha nem így teszel, akkor nem lesz egyértelmű az egyes szövegek hierarchiája az olvasók számára.

Egyértelmű a hierarchia a betűméretek alapján

Optimalizáld a betű-térközt!

Megnövelt betűméretnél a betűk közötti térköz növelésére is szükség lehet a jobb olvashatóság és az esztétika érdekében. A különböző betűtípusok különböző térközt igényelnek. Egy szöveg-betűtípusnál például a térköz csökkentésére lehet szükség, hiszen a betűméret növelése miatt túl nagy lehet a távolság. Ugyanakkor óvatosnak kell lenni a változtatásokkal, mivel könnyen ronthatunk a helyzeten. Ráadásul nem is minden betűtípusnál van szükség a változtatásra.

Optimalizáld a sorhosszt és távolságot!

Robert Bringhurst szerint az optimális sorhossz 55-75 karakter között változik. A túl hosszú sorok olvasásánál elfárad a szem, mert keresni kell minden sor kezdetét. Ugyanakkor, ha egy sor túl rövid, akkor olyan szavakat vagy mondatokat kell megtörni, melyek szorosan összetartoznak. A sorhossz mindig a betű nagyságának függvénye.

Josef Müller-Brockmann szerint egy hasáb szélességének mindig arányosnak kell lennie a betű méretével. Tehát, ha növeled a betűméretet, akkor a hasábnak is szélesebbnek kell lennie, hogy megmaradjon az optimális sorhossz. A lényeg tehát az, hogy a tipográfia határozza meg a hasáb szélességét, nem pedig fordítva. Ugyanígy a sortávolság is a betűméret függvénye.

Kezdetnek próbálkozz egy 1,5-szeres, vagyis 150 százalékos sortávolsággal. Ha kicsit szorosnak érzed, akkor ne félj tovább növelni. Ha a háttér és a szöveg között erős kontraszt van, akkor nagyobb sortávolságra lehet szükség. Tehát, ha fekete háttéren fehér a szöveged, akkor merészebben növeld a sortávolságot!

VII. Merre tart a webes tipográfia 2018-ban?

Az elmúlt években a technológia fejlődése lehetővé tette, hogy a designerek egyre kreatívabban használják a betűket a weboldalakon. Ennek az eredménye, hogy egyre több és szebb betűtípust láthatunk, miközben egyre nagyobb számban jelennek meg ikonok, emojik, animációk, kiemelések, hogy tovább nyomatékosítsák a szöveg mondanivalóját.

1. Hero fontok és látványos betűk térhódítása

Az egyik legmarkánsabb trend mostanában: a látványos betűtípusok megjelenése, melyek karaktert adnak a szövegnek és letaszítják az első helyről a képeket, melyek eddig a weboldalak legfőbb designelemeként jelentek meg. A tipográfia kreatív használata válik a legfontosabbá, háttérbe szorítva a nagy háttérképeket és videókat, melyek egyébként is problémákat okoznak mobilos böngészésnél.

2. Visszatér a serif

Habár soha nem tűntek el teljesen, mindig is jelen voltak a weben, de a trendi weboldalakon nem nagyon találtál ilyen betűket. Egy-két kivételtől eltekintve persze, melyek ezáltal különböztek a többiektől. A mainstream azonban a biztonságos választásnak tekintett sans serif betűket használta. A helyzet azonban változik, és ahogy látványosabbá válnak a betűk a weboldalon, úgy jelennek meg ezzel párhuzamosan a serif betűk is.

3. Expresszív tipográfia széttöredezett rácsszerkezetben

A tipográfia kreatív használatához tartozik az is, hogy egyre több 3D-s és illusztrált megjelenéssel találkozhatunk, miközben egyre élőbbek is lesznek a szövegek az animációknak köszönhetően. Ez azzal is jár, hogy fokozatosan távolodunk a szigorú rácsszerkezettől.

4. Nagyobb betűméretek a kenyérszövegben

Természetesen a weboldalon használt betűk nem csak vizuális szempontból fontosak, kifejezik egy termék karakterét, és meghatározzák a kommunikáció hangját. A kenyérszöveg pedig annyira fontossá válik, hogy majdnem akkora méretben jelenik meg, mint a címek.

5. Dinamikusabbá váló szövegek

Ma már mindenféle vizuális megoldás megjelenik a szövegekben: ikonok, emojik, piktogramok, színes alapok, keretek, a hagyományos aláhúzás és dőlt betűk mellett. De akár az is elképzelhető, hogy egyetlen mondaton belül megjelenjenek serif és sans serif betűkkel írt szavak, ezáltal kiemelést biztosítva egyes szövegrészeknek. A szövegek így dinamikusabbakká válnak, a kombinációk száma pedig végtelen.

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 !