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 visszafordulá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:

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.

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.

Frissítés, 2022.08.12.:

A betűtípusok pszichológiája

Egy tanulmány szerint a betűtípusok képesek befolyásolni azt, hogy mit érzünk a velük megírt üzenet kapcsán. A tanulmányt a Monotype végezte, az alkalmazott idegtudománnyal foglalkozó Neurons-szal karöltve. 400 alannyal végezték a kutatást, akiknek különböző szavakat mutattak három eltérő betűtípussal írva.

Ami kiderült, hogy a betűtípusok megítélése elég szubjektív és eltérő hatásuk van a különböző emberekre. Az eltérések egyébként jelentősek voltak, hiszen például az egyik vizsgált betűtípus 13 százalékkal több pozitív választ eredményezett, pedig már az 5-6 százalékos különbség is szignifikánsnak számít. Az eredmények itt láthatók egy grafikonba foglalva:

A Neurons alapító-vezérigazgatója, Thomas Z. Ramsøy szerint pozitívabb érzelmi válaszokat lehet tapasztalni a puhább és könnyebben felismerhető betűtípusoknál, miközben a hegyes és éles betűtípusok negatív érzelmeket váltanak ki.

2018-ban egyébként az ausztrál RMIT egyetem kutatói kifejlesztettek egy olyan betűtípust, mely állításuk szerint fokozta a memóriát azáltal, hogy odafigyelést kívánt, ugyanakkor még olvasható volt. Ezt a hatását viszont később megcáfolták a betűtípusnak. Emellett érdemes megemlíteni, hogy egy másik kutatás azt állapította meg, hogy a legtöbb betűtípus nehezen olvasható az idősek számára, kivéve a Garamond és a Montserrat.

De nézzük, hogy a betűtípusok milyen üzeneteket hordoznak!

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

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

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.

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:

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

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.

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.

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:

3. 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 ö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ő:

Mikor és hogyan használj kézírásos betűtípusokat?

A kézírásos betűtípusok különösen hatékonyak abban, hogy egyéniséget adjanak egy weboldalnak, kiemeljék a többiek közül.

Miért érdemes kézírásos betűtípusokat használni?

A designerek sokszor azért nyúlnak a kézzel írt betűtípusokhoz, hogy adjanak egy kis személyes, emberi jelleget a designnak. A minimalista, illetve a kissé egyforma, sablonokra épülő weboldalak korában kifinomultságot és egyéniséget csempész a weboldalba. Egy kézírásos betűtípus ráadásul önálló esztétikai elemként működik egy minimalista designban.

Tehát ha nincs más eszközöd, hogy kifejezd a különbözőséged a többiektől a weben, akkor jó megoldás lehet valamilyen kézírásos betűtípust bedobni. Az ezekben rejlő apró, finom részletek képesek áthatni az egész designt, egy különleges összképet eredményezve.

Érdemes tudni, hogy amikor logókban vagy a fejlécekben használod a kézírásos betűket, akkor azonnal magukra vonják a figyelmet. De sok esetben éppen ez lenne a cél. Különösen jó megoldás, az írott betűtípusok használata, amikor rajzolt illusztrációk jelennek meg a weboldaladon.

Hogyan érdemes használni őket?

Óvatosan kell azonban alkalmazni őket, különösen azért, mert felkeltik az érdeklődést. A designerek persze sokszor éppen ezért használják őket. Ilyenkor a szöveg többi részének egyszerűnek, letisztultnak, könnyen olvashatónak kell lennie.

Megjelenésük inkább csak a fejlécekben, címsorokban lehet indokolt, esetleg a navigációs paneleknél, CTA-nál vagy a keresésnél jelenhetnek meg. Utóbbiaknál azonban törekedni kell arra, hogy olvasható, használható maradjon a funkció, különben komoly gondot okozhatnak a kézzel írt betűk. Ha figyelsz arra, hogy csak ritkán és átgondoltan használd ezeket a betűket, akkor sokat javíthatnak a weboldalad megjelenésén.

Amikor a weboldaladon kézírásos betűtípus használatát tervezed, próbáld mindig a felhasználó szemével látni az eredményt. A kézírásos betűtípusok nagyon karakteresek, és nem szabad figyelmen kívül hagyni a használhatóságukat sem. Jól olvasható a szöveged az adott betűtípussal? Nem fog gondot okozni a felhasználóknak, amikor meg kell érteniük az üzeneted lényegét? Gyorsan megtalálják azt, amit keresnek?

Ha túlerőlteted ezeket a betűket, akkor az eredmény egy zsúfolt, zavaros weboldal lesz. Természetesen ez is vonzó lehet egy egyedi közönség számára, azonban ha átlagos vagy széles a célközönséged, akkor a moderált használat a javasolt.

Illusztrációkkal kombinálva

A kézírásos betűtípusokat gyakran kombinálják rajzolt illusztrációkkal, amivel még erősebb vizuális hatás érhető el. Az eredmény általában egy erőteljes, színes és izgalmas megjelenés, mely egyedi és vizuálisan vonzó a felhasználók számára.

Ezáltal a weboldal még inkább képes a felhasználók érzelmeire hatni, és az üzenet jobban az adott termékre vagy szándékra szabható. A kézzel rajzolt illusztrációk erős és gyakran meglepő üzenetet hordoznak, képesek választ provokálni az emberekből, mert gondolkodásra késztetik őket.

Ilyenkor azonban figyelni kell arra, hogy a weboldal továbbra is könnyen használható maradjon, és a felhasználók tudják, miként navigálhatnak, hogy megtalálják az információkat. Ez nem könnyű feladat, és kell hozzá a gyakorlat.

Milyen stílusú szövegeket használhatsz?

A scripts betűtípusoknak különböző stílusaik lehetnek, mint a hivatalosnak ható, kalligrafikus betűstílus: az English vagy a Snell Roundhand. A hétköznapi betűk sokkal inkább úgy néznek ki, mint egy szabályos kézírás, ilyen a Black Jack vagy a Zephyr Script. Ha ilyen betűket használsz, akkor valami újat és egy kicsit természetes hangulatot viszel a digitális világba. Egy weboldalon olyan hatást keltenek, mintha visszatérnél a földre.

A designerek általában két-három betűtípust kombinálnak – melyek közül csak az egyik kézírásos -, így erős hatást tudnak kiváltani, persze csak ha jól sikerül a választás. Vannak akik különböző stílusú, hangulatú betűket kevernek, melyek mindegyike egy kicsit más érzést hordoz. Gondosan kell azonban a kombinációkat kialakítani annak érdekében, hogy a weboldal ne keltsen zűrzavaros benyomást. A betűtípusok kiválasztásáról és kombinálásáról itt olvashatsz bővebben.

Milyen típusai vannak a kézírásos betűtípusoknak?

A kézírásos digitális betűtípusokat általában az alapján különböztetjük meg, hogy milyen eszközzel íródnak: toll, ceruza, töltőtoll, kréta, ecset, stb.

Folyóírás

A folyóírásra az jellemző, hogy egy folyamatos vonallal íródik, mivel így gyorsabbá válik az írás, mint ha minden egyes betű után felemelnénk a tollat a papírról. Digitális változatuk is hasonló, jellemzően kifinomult, ívelt betűkről van szó. A folyóírásos betűtípusoké ugyanakkor inkább csak egy általános kategória, melynek nehezen határozható meg az egyéni karaktere, mert annyiféle betűtípus belekerül.

Kalligrafikus betűtípusok

Habár sokak szerint talán nem sokban különbözik egy folyóírásos betűtípustól, a kalligrafikus betűtípusok mégis külön kategóriát képeznek. Ezeknél ugyanis az egyszerű kézírás a művészi igényesség irányába tolódik, melynek eredményeként lenyűgöző és elegáns megjelenést kapunk.

Krétával írt betűk

A krétával írt betűk digitális formái a krétával húzott vonalak poros, szemcsés textúráját próbálják utánozni. Ezen belül persze mindenféle változat megtalálható, így kör vagy négyzet alakú krétával írt, folyamatos vagy szakadozott vonalú. Különösen jó választás kávézók, éttermek, szépségszalonok számára.

Ecsettel írt betűtípusok

Az eredményt befolyásolja, hogy milyen ecsettel készült a betűtípus, de az is, hogy milyen festéket választott a tervező. Mindez rendkívül sok variációt tesz lehetővé az ecsettel írt betűtípusoknál.

Monoline betűk

Ezeket az különbözteti meg más kézírásos betűtípusoktól, hogy a betűk vonalainak vastagsága mindig azonos, akár függőleges, akár vízszintes a vonal.

4. 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?

5. 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ő:

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

7. „Színes” betűk

Talán furcsának tűnik, hogy külön kategóriát képeznek a színes betűk, ennek ellenére létezik, mutatunk is rá néhány példát. Előbb azonban arról, hogy a színes fontok megjelenése az OpenType betűknek köszönhető, és hogy sokan a következő nagy forradalomként tekintenek a színes betűtípusokra a grafikus designban, illetve úgy látják, hogy megváltoztatja annak a módját, ahogyan ma használjuk a tipográfiát.

A színes betűtípusok révén ugyanis még kreatívabbak lehetnek a designerek, kiléphetnek az eddigi komfortzónájukból, amikor címsorokat terveznek.

De mi is az a színes betűtípus? A színes betűtípus, más néven kromatikus betűtípus a betűk egy olyan új típusa, melyek színekkel, textúrákkal, geometrikus formákkal vagy elemekkel teszik izgalmasabbá a betűket. Azáltal jöttek létre, hogy az OpenType (OTF) formátum SVG elemeket kapott, melynek eredményeként a színes betűtípusok megjelennek OpenType-ként, beágyazott OpenType-ként és SVG formátumban.

De mire is gondolunk színes betűtípusként, amit az eddigi fontok nem tudtak? Ilyesmire:

A színes betűtípusokban az a nagyszerű, hogy nem csak színesebbé teszik a szöveget, hanem egyből egy határozott stílust is megjelenítenek. De talán még érdekesebb ez a betűtípus, ami tényleg rendkívül színesre sikerült:

A színek mellett azonban geometrikus elemek is megjelenhetnek, így nem csak színei, hanem egészen egyedi formái is lehetnek a színes betűknek:

Vagy nézzük, hogy milyen lehet színesben egy kézírásos betűtípus! Például olyan mint a Candy:

De a sor még hosszan folytatható:

Talán ez alapján is látszik, hogy milyen határtalan lehetőségek rejlenek a színes betűtípusokban.

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.

Serif és sans serif

A betűtípusok felsorolásánál már említettük a serif és sans serif betűket, azt azonban nem részleteztük, hogy ezeknek milyen hatása van az olvasókra. A legtöbben talán sejtik, hogy a tradicionális betűtípus megbízhatóságot jelez, emellett elegáns és intelligens hatást kelt. Ezért is használják az olyan márkák, melyek büszkék a múltjukra, és legalább néhány évtized azért áll is már mögöttük.

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

Ezzel szemben állnak a sans serif betűk, melyeknél ugyanakkor nem csak arra kell figyelni, hogy milyen hatást keltenek, hanem arra is, hogy általában rosszabbul olvashatók digitális kijelzőkön, mint a serifek. Akadnak viszont közöttük jól olvasható típusok, amire figyelni kell a designnál.

Könnyű betűk

Az úgynevezett könnyű betűtípusokat általában a nőiességgel és a szépséggel azonosítjuk. Elég, ha csak az Avon logójának vékony, kecses vonalaira gondolunk. Nyilvánvaló, hogy a kozmetikai cég azért ilyen betűket választott, mert ezek fejezik ki legjobban a márka nőiességét. Ez persze elsőre talán nem mindenki számára nyilvánvaló, de ha egy kicsit is módosítunk a logón, máris érezhető, hogy változik a hatása. Ebből is látszik, hogy az apró részletek mennyire fontosak.

Lekerekített és szögletes betűk

Kutatások szerint az emberek jobban kedvelik a lekerekített formákat, mint az éles szögeket bezárókat. Miért? A választ valahol a védelmi ösztönöknél kell keresni. A hegyes és szúrós dolgok a természetben vagy akár a tárgyaink között nem biztonságosak. Vágnak, szúrnak, veszélyesek lehetnek. Vagyis fenyegetést jelentenek.

Ez az érzés pedig akkor is megjelenik, ha csak a kijelzőn látjuk őket. A veszély érzését váltják ki, ugyanakkor férfiasságot és tartósságot is jeleznek. Vagyis akkor is remekül használható, ha a designba egy kis izgalmat szeretnénk csempészni. Ezzel azonban óvatosan kell bánni, és csak a megfelelő helyen alkalmazni. Ha a márkáddal inkább puhaságot, nyugalmat, nőiességet, szépséget, kényelmet akarsz kifejezni, akkor lekerekített betűket használj.

Kis- és nagybetűk

A kisbetűs szavak általában együttérzést keltenek, de utalhatnak innovációra is. Tehát kisbetűs szövegek jól használhatók olyan cégeknél, melyek gondoskodnak az emberekről, ugyanakkor használhatók olyan márkáknál is, melyek sok új ötlettel állnak elő.

Könnyebben érthető a dolog, ha mindjárt össze is vetjük a nagybetűs szövegek által keltett hatással. Ezek általában erőt sugároznak, az olyan óriás cégek, mint a BMW, a Nike, a Sony mind nagybetűs logót használnak, hogy hangsúlyozzák erejüket, energiájukat, sikerüket és befolyásukat.

Sűrű és elnyújtott betűk

A sűrűn szedett betűk általában a korlátozott térre, feszültségre, percizitásra utalnak, zsúfoltságot, korlátozottságot jeleznek. Ezzel szemben az elnyújtott betűk nyugalmat és szabad teret fejeznek ki. A széles betűtípusok könnyebbé teszik a designt, és hagyják lélegezni. Általában olyan márkák használják ezeket, melyek az emberek számára pozitív érzést akarnak közvetíteni.

Magas és alacsony betűk

Az alacsony betűk általában stabilitást, szilárdságot, tömeget fejeznek ki, míg a magas betűk könnyűséget és luxust, ezért is jelennek meg luxusmárkáknál oly gyakran. Sokan a magas betűket a növekedéssel, a sikerrel kapcsolják össze.

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.

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

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

Illeszkedjen a márkádhoz és a közönségedhez

Az első dolog, amit a weboldaladon használ betűtípusok kiválasztásánál meg kell fontolni, hogy passzolnak-e a márkádhoz. Meg kell érteni, hogy nem kizárólag annak kell meghatároznia a betűtípus-választás, hogy épp mi a trend a webdesignban, vagy Neked mi tetszik. A márkád és az iparágad leszűkíti a kiválasztható betűtípusok körét.

Ha van már van márkaépítési útmutatód, akkor azt kell követned, és az alapján kell kiválasztanod a megfelelő betűtípusokat. Ez feltehetően tartalmazza az információkat a használható színekről, a logóról és a tipográfiáról.

Másrészt, amikor betűtípus-választásra kerül a sor, mindig érdemes átgondolni, hogy kikből áll az oldal közönsége (bár ez kapcsolódik az iparághoz). A betűk között akadnak barátságos, vicces, komoly, üzleti jellegűek, melyek csak bizonyos hangulatú webdesignba illeszthetők bele. Ha egy betűtípus nem megfelelően illeszkedik, 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.

Legyen személyisége!

Habár nagyon sok tényezőt kell figyelembe venni egy betűtípus kiválasztásakor, semmi sem olyan fontos, mint a betűtípus személyisége. Hiszen minden betűtípus valamilyen hangulatot, érzést közvetít a látogatók irányába.

Amikor személyiségről van szó, akkor két lehetőség közül választhatsz:

• Olyan betűtípust használsz, mely összhangban van azzal, amit az egész webdesignnal közvetíteni szeretnél.
• Egy semleges betűtípust használsz, és a design többi részére bízod a személyiség kialakítását.

Legyél következetes!

Lehet, hogy az elképzeléseidben valami egyedi, figyelemfelhívó betűtípussal írt szöveg él, amire felkapják a fejüket az emberek. De érdemes egy kicsit visszafogottnak lenni, amikor betűtípus választásáról van szó. Megint arról van szó, hogy igazodni kell a márkádhoz, az eddigi megjelenéséhez, az iparágban megszokott designhoz. Ha nem így teszel, az megzavarja az embereket.

Tehát, ha például voltak már nyomtatott anyagaid, vagy egy korábbi weboldalad jól eltalált betűkkel, akkor érdemes azoknál maradni. Ha változtatsz is, akkor is olyan betűtípusokat válassz, melyek hasonlóak a korábban és máshol használtakhoz.

Gondolkodj el a párosításokon és a hierarchián!

Mint arról a későbbiekben szó lesz, egy weboldalon több betűtípust is lehet használni. Ha Te is ezt tervezed, akkor viszont érdemes előre átgondolni, hogy vajon mindkettő „ugyanazt üzeni”, és hogy miként alakul ezek hierarchiája.

A címekbe az elsődleges betűtípusok kerülnek, ezekre irányul a legnagyobb figyelem. Ezeknek kell a leginkább illeszkednie a márkához és a logóhoz. A másodlagos betűtípusok általában a szövegtörzsben jelennek meg, azaz a blogbejegyzések, cikkek, leírások szövegeként. Itt a fő cél az olvashatóság, úgyhogy nem kell figyelemfelhívónak lennie.

Végül pedig használhatsz még egy harmadik betűtípust is, olyan elemeknél, melyekre fel kell hívni a látogatók figyelmét: ilyen lehet például a CTA. Ennek olyan betűnek kellene lennie, mely önmagában képes magát megkülönböztetni a többi, oldalon használt betűtípustól.

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!

Univerzális betűt válassz!

Ez alatt azt értjük, hogy a betűtípus ne csak a weboldaladon mutasson jól, hanem minden olyan felhasználási területen, ahol tervezed a megjelentetését. Így a különböző digitális és offline megjelenéseknél is.

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!

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.

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.

Növeld a kontrasztot!

Itt egyrészt a választott betűtípusok közötti kontrasztról, másrészt a színek kontrasztjáról is szó van.

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 a megfelelő színek, és a kellően vastag betűk választásával, í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 vagy vékonyak a betűk).

Ó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!

Kövesd a trendeket! De óvatosan.

A trendek követése azt jelenti, hogy valami friss és izgalmas dolog jelenik meg a weboldaladon, melyre felkapják a fejüket a látogatók. Ha betűknél próbálsz ilyen irányba elmozdulni, akkor a legjobb, ha a címsoroknál és alcímeknél próbálod ki a divatos betűtípusokat. A szövegtörzsnél ugyanis fontos az olvashatóság, amit nem érdemes feláldozni egy stílusosabbnak tűnő betűtípusért.

Ha egy nagyon trendi vagy extrém betűtípust erőltetsz a szövegtörzsben, akkor az hosszú távon nagyobb kárt okoz, mint amennyi előnyt jelent. Általában a weboldalak viszonylag hosszú távra készülnek, tehát a betűknek is időtállónak kell lenniük.

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.

Frissítve, 2022.08.17.:

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

Ha a variációkat is beleszámítjuk, akkor jelenleg mintegy 834 ezer különböző betűtípus érhető el online. Ebből a kínálatból 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ő.

Néhány általános tanács, amit vegyél figyelembe betűtípusok választásánál

Amikor betűtípust választasz a weboldaladra, a legfontosabb feladat, hogy mérsékeld a lehetőségek körét, mely mint láttuk, elég széles. Ennek ellenére persze a választás és a párosítás alapvetően inkább találgatásnak tűnhet: kiválasztasz egy betűtípust, elhelyezed a designban, megnézed, hogy passzol-e a hozzá, aztán nézed a következő betűtípust. Újra és újra. Mindenesetre az alábbi tanácsok révén egy kicsit egyszerűsítheted a helyzetet.

Olyan betűtípust keress, ami minden ékezetes karaktert támogat

Ha magyar nyelvű (is) a weboldalad, akkor ez a kritérium erősen beszűkíti a lehetőségek körét egyes ékezetes karakterek megjelenítése miatt. De ha más nyelveken is meg akarod jeleníteni a weboldalad, akkor azoknál is ellenőrizni kell a megjelenés helyességét. Rendkívül speciális helyzetek adódhatnak az egyes nyelveket tekintve, arról nem is beszélve, hogy akadnak olyan felhasználók, akik a böngésző beépített fordítójával lefordítják az oldalt, és ilyenkor mindjárt megjelenhetnek furcsaságok.

Egyes karakterek közötti különbségek ellenőrzése

Szintén megszűri a választható betűtípusok listáját, ha arra törekszünk, hogy bizonyos betűk és számok jól megkülönböztethetők legyenek. Ilyen az 1-es szám, a kis l és a nagy L betű. Ezek bizonyos minimalista, jellemzően sans serif betűnél eléggé egyformák, gyakorlatilag mindegyik egyetlen függőleges vonal lehet, mint például a Gil Sans esetében. Ez különösen akkor lényeges tényező, ha fontos a számok jó megjelenítése az oldalon, mert mondjuk valami pénzügyi vagy egészségügyi oldalról van szó.

Dekoratív betűtípus mellé mindig semlegest válassz párosításnál!

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 szövegtörzs esetében).

Ö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 szövegtörzsnek 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.

Alapvetően azonban arról van szó, hogy a címsorok kapnak egy betűtípus, illetve egy másikat a szövegtörzs. Előbbi esetében a méret és a kis terjedelem miatt elfogadható lehet egy írott, dekoratív betűtípus – így csak ezek közül kell válogatni -, mely aztán meg is határozza az oldal személyiségét, designját. A másik betű, mely a szövegtörzsben szerepel, egy egyszerű, mindennapi választás lehet, valamilyen sans serif (serif vagy slab serif már ütközhet a dekoratív betűvel).

Használd ki az eltérő betűsúlyokat!

Az előbbiekben már hangsúlyoztuk, hogy nem feltétlenül van szükség többféle betűtípus alkalmazására egy weboldalon. Egy betűtípussal remekül meg lehet oldani a különböző design-igényeket, különösen, ha többféle súlyozás is rendelkezésre áll a betűből, azaz van többféle vastagságú verziója (dőlt betűként is).

Ezek után lássuk, hogy:

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 szövegtörzs betűtípusának meghatározásával kezdd a munkát.

Ezt más néven horgony-betűtípusnak nevezik, mivel ez lesz a referenciapont a betűk méretének, távolságának, kontrasztjának kialakítására. Persze nem csak a szövegtörzs betűtípusa lehet horgony-betűtípus, ugyanakkor mégis célszerű, ha ez az, mert ez teszi ki a szöveg nagy részét az oldalon.

A szövegtörzs esetében a legfontosabb szempont az olvashatóság, ilyenkor egyéb megfontolások, mint az egyediség, egyéniség még nem nagyon merülnek fel. Érdemes 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.

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 erősítik egymás hatását.

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.

Ehhez tisztában kell lenned azzal, hogy a kiválasztott horgony-betűtípusodnak milyen a felépítése és a személyisége. Ehhez tudsz igazodni a második betűtípussal. Ehhez a betű számtalan paraméterét figyelembe veheted, ugyanakkor az egyik legfontosabb ezek közül az úgynevezett x-magasság, illetve a g, az o, az e és az a betűk formája. De már az o is nagyon sokat elárul egy betűtípus geometriájából:

Mindezek 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, de már megjelenik egy kontraszt, úgyhogy 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.

Ezzel a megoldással annyi lehet a probléma, hogy maga a betűtípus nem járul hozzá mondjuk a címsor és a szövegtörzs megkülönböztethetőségéhez, hiszen az olvasó számára egyformának tűnhetnek. A hasonlóság akkor még zavaróbb tud lenni, ha nem azonos betűtípusokat használsz, viszont mégis nagyon közel állnak egymáshoz.

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ül 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.

3. Serif és sans serif párosítás

Az előbb már említettük, de 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. A serif és sans serif párosítás egy elég jól és gyakran használt megoldás, amivel nem lehet nagyot tévedni, ugyanakkor nem feltétlenül jelenti a legjobb választást. Mindenesetre már megfelelő kontrasztot ad. De lépjünk tovább ebbe az irányba!

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

Másrészt a kontrasztos betűtípusok használata a szöveg átfuthatóságát és olvashatóságát is javítja. Az erős kontraszt segít a hierarchia bemutatásában is.

Ilyenkor abból indulhatsz ki, hogy ha már választottál egy jól olvasható betűtípust a szövegtörzsnek, akkor választhatsz címsornak egy olyat, amelynek teljesen ellentétes a karaktere. Például 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

5. Betűtípusok azonos forrásból vagy alkotótól

Amikor a betűtípusokkal dolgozol, akkor fontos tudni egy-egy betűtípus történetét és eredetét. Az azonos alkotótól származó betűtípusok általában jól párosíthatók, mivel azonos stílusúak és felépítésűek. Ilyen például a Joanna és a Gil Sans, melyeket a brit tipográfus, Eric Gill tervezett. Mindkét betűtípus azonos stílusú és felépítésű.

6. 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 vagy a Fontpair 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.

Néhány példa betűtípusok kombinálására

Habár az előbb felsorolt oldalakon találsz javaslatokat fontpárosításokra, most lássunk néhány ingyenes Google betűtípus-párt.

Ha például valamilyen technológiai témájú weboldalad van, akkor jó választás lehet a Montserrat betűtípus, mely modern és jól olvasható betű. Ehhez a geometrikus fonthoz jól passzol például egy Open Sans, Crimson Text, Source Sans Pro vagy a Roboto. Ugyanakkor a Montserratot egyáltalán nem muszáj kombinálni bármi mással, önmagában is jól mutat egy weboldalon.

A Montserrat azonban olyan univerzálisan használható betűtípus, hogy bármely üzleti vagy akár oktatási weboldalon is megállja a helyét. A már említett Open Sans – mint az egyik legnépszerűbb sans serif font – remek választás mellé, amivel egy kicsit barátságosabbá teszed a weboldalad hangulatát. Ugyanakkor az Open Sans fő betűtípus is lehet, mely mellé kiválaszthatod a Playfair Displayt vagy a Poppinst, ami szintén azt üzeni, hogy komoly a céged, de azért megközelíthető.

Amennyiben oktatási témájú a weboldalad, akkor párosíthatod a Montserratot például a Crimson text betűtípussal. Ez a régies stílusú betű ugyanis jól passzol a modern Montserrathoz, és oktatási weboldal esetében a megfelelő üzenetet hordozzák együtt.

Ha elegáns megjelenést szeretnél, akkor a sans serif betűk között érdemes körülnézned, hiszen kifinomultak és egyszerűek. Ha kombinációt vizsgálunk, akkor az Old Standard TT és a Muli például jól mutat együtt, de utóbbihoz nyugodtan hozzáteheted például az Ovo-t is.

Ha viszont egy sport-témájú webáruházad van, akkor nyilván inkább valami energikusabb, de mégis egyszerű fontot szeretnél. Hiszen a cél itt az, hogy már a betűiddel kicsit felpörgesd a közönséget. Ha emellett fontos a jó olvashatóság is, akkor a Teko betűtípus egy jó választás lesz. Használhatod egyből a félkövér változatot, de a betűközökkel is játszhatsz, hogy elérd a maximális hatást. Egyedül is megállj a helyét, de mellépcsaphatod az Ubuntut például.

Ha valami kisvállalkozásod van, mondjuk pékséget üzemeltetsz vagy cukrászdát, akkor a Cormorant például jó megoldás lehet, hiszen egyszerre modern és tradicionális, ami egy pékség esetében jó üzenet. Melléteheted a már említett Mulit vagy akár a Proza Librét. Cukrászdák számára jó választás lehet a Poiret One, mely csábítóan hat a közönségre. Nyugodtan hozzákapcsolhatod az univerzális Open Sanst.

Személyes portfolio bemutatásánál sem kell túlzásokba esni: valamely sans serif félkövér és normál verziója jól működik együtt. Választhatod például az előbb említett Mulit, mely a címsorban és a szövegtörzsben is megállja a helyzét egyszerre. Ugyanakkor melléteheted a Lustria betűtípust is.

Néhány hiba, amit ne kövess el a betűtípusok kombinálásánál

Habár egyetlen font használata mindig biztos megoldás, ugyanakkor unalmas. Ezért előnyös két vagy több betűtípus párosítása. Az viszont tönkre is teheti az egész weboldal designját, ha nem illeszkedik a két betűtípus. Milyen hibák fordulhatnak elő?

Ne használj két kézírásos betűtípust!

Népszerűek mostanában kézírásos betűtípusok, személyesebbé teszik az üzenetet a weboldalon, miközben elegánsak és kifinomultak. Túlzásba azonban nem szabad esni a használatuknál: két kézírásos betűtípust soha nem szabad egyszerre használni, mert túl erős a karakterük.

Ne párosíts nagyon hasonló betűtípusokat!

Két nagyon hasonló betűtípus esetében a különbség alig észrevehető, ami furcsa, kellemetlen hatást eredményez. Ha mégis úgy döntesz, hogy nem akarsz nagyon eltérő betűtípusokat használni, akkor jobb megoldás, ha egyazon betűtípus eltérő verzióit alkalmazod.

Ne használj egyszerre novelty és display betűtípusokat!

Ha egy szövegben valamit ki akarsz emelni, akkor azt megteheted egy figyelemfelhívó betűtípussal. Erre nem alkalmasak a „biztonságos” betűtípusok. Ilyenkor előkerülhetnek az erős karakterű novelty fontok. Arra azonban figyelni kell, hogy ezek nem viselnek el maguk mellett más, hasonlóan erős karakterű betűket, például a display betűk közül válogatva. Az összhatás ilyenkor elborzasztó lesz.

Ne használj eltérő hangulatú betűtípusokat!

Minden betűtípusnak van valamilyen személyisége és hangulata. Ha nem illik össze a két kiválasztott betűtípusé, akkor ne használd, mert zavaró lesz az eredmény.

Ne használj túl sok betűtípust!

Nem lehet elégszer elmondani: ha háromnál több betűtípust használsz, akkor az eredmény egy káosz lesz. Kivételek persze vannak, de ahhoz komoly jártasság kell a tipográfiában.

Nem használod ki a betűméretekben, -vastagságokban és térközökben rejlő lehetőségeket!

Az egyes betűknél a változtatható paraméterek számtalan lehetőséget rejtenek magukban. Lehetővé teszik azt, hogy egyetlen betűtípust használj a weboldaladon, mégse legyen unalmas az összhatás. Ugyanakkor a harmóniát könnyebb elérni.

Megfeledkezel a hierarchiáról!

A webdesignban a felhasználói figyelem irányításának egyik alapvető eszköze a következetes szöveg-hierarchia kialakítása. Az még nem feltétlenül elegendő a megfelelő hierarchia kialakításához, hogy a címsorokat, alcímeket, stb. eltérő betűtípussal írod. Figyelned kell a betű stílusára, karakterére, súlyára, méretére, stb., hogy megfelelő legyen az eredmény. Erről a következő bekezdésben bővebben is írunk.

Túlságosan belemerülsz a designer fontok világába!

A designer fontok ugyan szépek, azonban ahogy minden erős karakterű fonttal, ezekkel is csínján kell bánni. Ne használd őket túl sokat és túl gyakran!

Nem vagy következetes a betűk használatánál!

Előfordulhat, hogy egy-egy weboldal indulásakor a designer két összeillő betűtípussal tervezte meg a szövegeket, azonban az idők során valahogy belekerülnek a weboldalba eltérő tartalmak, funkciók, melyeknél újabb, eltérő betűtípusok jelennek meg. Ezek talán fel sem tűnnek a weboldaltulajdonosnak, hiszen az oldal szerves fejlődése során jelentek meg, ugyanakkor a látogatók számára zavaró hatást keltenek.

Hogyan alakítsd ki a tipográfiai hierarchiát a weboldaladon?

A tipográfiai hierarchia mutatja meg a felhasználónak, hogy mire összpontosítson az oldalon, vagyis, hogy mi a legfontosabb szöveg, és mi az, ami csak segíti ezt. A tipográfiai hierarchia kialakításának több eszköze is van:

• A méret – ami egy könnyen értelmezhető jelzés a felhasználók számára, hiszen: ami nagyobb az fontosabb, ami kisebb, az kevésbé.
• A súly – egy betű lehet vastagabb vagy vékonyabb, ami megint csak elég egyértelműen mutatja, hogy mi a fontos egy szövegben.
• A szín – a színnel már kevésbé szokták kifejezni a hierarchiát, pedig jó lehetőséget kínál rá. Használhatsz ugyanolyan színből világosabb és sötétebb árnyalatokat a hierarchia kifejezésére, illetve egy-egy eltérő szín is kifejezhet a hierarchiában betöltött szerepet. Minél nagyobb a kontraszt a háttér és a betű között, annál feljebb áll a hierarchiában egy adott szöveg.
• A kontraszt – kontrasztot teremthetünk a már említett színekkel, ugyanakkor kialakítható betűméretekkel, súlyokkal és stílusokkal is. Persze egy-két pontos méretkülönbség még nem jelent elegendő kontrasztot, de ha odafigyelsz a méretre, a súlyra és a stílusra, akkor már bármely felhasználó számára egyértelművé válik a kontraszt a szövegtörzs és a címsor között.
• Nagybetűs szövegek – habár a nagybetűvel szedett szövegek használata nem a legjobb olvashatósági szempontból, jól kifejezi a hierarchiát egy-egy nagybetűvel írt címsor vagy alcím.
• Pozíció és elrendezés – a címsor pozicionálása jelentős hatással van arra, hogy egy adott szöveg hol helyezkedik el a hierarchiában. Általában a középre rendezett mondatok kiemelkednek, ahogy a szabályos margótól való bármiféle eltérés is.

Az azonban, hogy ismered az eszközöket, melyek befolyásolják egy-egy szöveg hierarchiában betöltött helyét, még nem jelenti azt, hogy működik a hierarchiába rendezés az általad tervezett oldalon.

Általában a hierarchiának három szintjét használjuk: címsor, alcím és szövegtörzs. Ehhez, ha szükséges, még hozzáadhatók további szintek, például mert idézetek, képaláírások, stb. szerepelnek a szövegben.

Ahhoz pedig, hogy magabiztosan menjen a tipográfiai hierarchia kialakítása, leginkább gyakorlat és tapasztalat kell, hiszen mint látható sok eszköznek a kombinációja lehetséges, melyek finoman képesek megmutatni egy-egy szövegnek a fontosságát.

5 betűtípus, ha biztosra akarsz menni

Akad néhány olyan univerzális betűtípus, mely szinte minden esetben megállhatja a helyét elsődleges betűtípusként, akár webről, akár mobilról van szó.

Open Sans

Az Open Sans egy humanista sans serif betűtípus, melyet Steve Matteson tervezett. Az Open Sans optimalizálva van mind nyomtatott, mind pedig webes megjelenésre. Nagyon jól olvasható betűtípus akár nagy, akár kicsi kijelzőkről legyen szó.

Az Open Sans nagyon sok más betűtípushoz passzol, így a szintén gyakori Monsterrathoz, a Latóhoz, Brandon Groteskhez vagy a Robotóhoz. A kenyérszöveg esetében a legjobb egy 16 px-es méret, míg címsoroknál a 28 px-est érdemes használni.

Roboto

A Robotónak kettős természete van. Egyrészt mechanikus a felépítése és a formája is nagyrészt geometrikus, másrészt viszont barátságos és nyitott ívekkel rendelkezik. A Roboto az alapértelmezett betűtípus az Androidon és a Google-szolgáltatásokban, így valóban nagyon gyakran találkozhatunk vele.

A Roboto is egy sans serif betűtípus, mely jól illik a Roboto Slab, az Open Sans, a Lato vagy a Playfair Display mellé. A szövegtörzsben érdemes egy 21 px-es mérettel kísérletezni.

Helvetica

Szintén egy nagyon elterjedt sans serif betűtípus, melyet még 1957-ben tervezett a svájci betűtervező, Max Miedinger és Eduard Hoffmann. Fontos jellemzője a Helveticának a nagy x-magasság és a betűk közötti szűk távolság, mely sűrű, tömör megjelentés biztosít számára.

A Helvetica jól párosítható olyan betűtípusokkal, mint az FF Tisa, a Georgia, a Roboto vagy a Banton Sans. Címsoroknál 48 px-es, míg szövegtörzsnél 18 px-es betűket érdemes kipróbálni.

Montserrat

Julieta Ulanovskyt a Buenos Aires mellett található Monsterrat régi plakátjai és táblái inspirálták a betűtípus tervezése közben. A geometrikus típusú betű digitális felhasználásra lett tervezve, és kitűnő választás minimalista és modern weboldalakhoz vagy appokhoz.

A Monsterrat előnye, hogy rövid mondatok, például gombok felirataként, csupa nagybetűvel írva is jól működik. Kitűnően párosítható az Open Sans, a Roboto Slab és a Lora betűtípusokkal. Címsoroknál érdemes 30 px-es méretet, míg szövegtörzsnél 16 px-es méretet használni.

Avenir

Az avenir szó franciául jövőt jelent. A geometrikus és sans serif betűtípus 1920-ban került megtervezésre, és fontos jellemzője, hogy a kör jelenti a betűk alapját, mint az Erbar vagy a Future esetében. Az Avenir jól összeillik a Minion, a Georgia és a Helvetica betűkkel. A címsoroknál egy 30 px-es méretet érdemes használni, míg a szövegtörzsnél elegendő lehet a 14 px.

Frissítés, 2022.07.19.:

Hogyan válassz betűtípust, ha fontos az olvashatóság a weboldaladon?

Akad néhány olyan betűtípus, melyek könnyen olvashatónak számítanak. Ide tartozik az egyszerű, nem túl izgalmas sans serif betűk egy része. Ugyanakkor az Adobe-nál megvizsgáltak néhány betűtípust olvashatósági szempontból. A 350 alannyal végzett kutatás olyan betűket vizsgált, mint

• a klasszikus betűtípusok, a Times, a Helvetica vagy a Garamond
• a számítógépes használatra tervezett betűk, mint a Calibri vagy az Arial
• a kifejezetten olvashatóságra tervezett betűtípusok, mint a Noto Sans vagy a Montserrat.

A kutatásban azonban azt állapították meg, hogy az olvashatóság szempontjából nagyon sokat számít a kontextus és a közönség. Ez pedig azt jelenti, hogy betűtípus-választásnál a felhasználóidat kell elsősorban szem előtt tartani.

Ami biztos, hogy a túlságosan „divatos” betűtípusok általában nem jól olvashatók, ugyanakkor egy normális x-magasságú, lekerekített, nem túlságosan összetömörített betűk, szabályos körvonalszélességgel lehet, hogy unalmasnak tűnik, de jól olvasható.

Azt sem szabad elfelejteni, hogy az olvashatóságra nem csak maga a betűtípus, hanem a méret és a térközök is jelentős hatással vannak. Emellett lehet bármilyen jól olvasható egy betűtípus, ha rossz a kontraszt, akkor semmire sem mész vele. A színek ugyan nem részei a betűtípusnak, mégis tönkretehetik a felhasználói élményt. Érdemes ebből a szempontból figyelembe venni a W3C ajánlását, melyről a színkontraszt ismertetésénél bővebben is írtunk.

Sokat segít egyébként az olvashatóság megítélésénél, ha kinyomtatod a weboldalad. Ha papíron is jól olvasható a szöveg, és akár távolabbról is jól látod a betűket, akkor jó lehet a választás. Ha valami papíron nehezen olvasható, az még rosszabbul teljesít kijelzőn.

Egy másik fontos dolog, hogy érdemes visszajelzéseket gyűjteni az olvashatóságra vonatkozóan. Persze az Adobe vizsgálatából az is kiderül, hogy az emberek véleménye nem biztos, hogy jó iránytű, de azért a vélemények segítenek kideríteni, hogy egy betűtípus jól működik az oldalon vagy sem. Ez különösen igaz a kézírásos, divatos vagy újszerű betűtípusok használatánál.

Amit általános tanácsként lehet adni könnyen olvasható betűtípus kiválasztásához, az az, hogy lehetőleg

• a gyakori betűtípusok vagy a Google-fontok között keresgélj
• egyszerű betűtípust válassz, normál x-magassággal
• olyan betűt használj, ami a célközönséged számára jól működik: például a fiatalok inkább a sans serif betűket kedvelik, az idősebbek szeretik a serifet és a hagyományosabb megjelenést.

Nincs tehát kifejezetten jó vagy rossz választás, ha olvashatóságról van szó, hiszen figyelembe kell venni az alkalmazást, a használatot. Betűtípus-választásnál mindig gondolni kell a tartalomra, a kontextusra, a célközönségre, hogy megtaláld, mi az, ami működni fog. És persze érdemes tesztelni: kérdezd meg a felhasználókat, hogy mit gondolnak.

Mi az a web-biztos betűtípus? És miért érdemes használni?

A web-biztos betűtípusok olyan betűk, melyeket a böngészők és az operációs rendszerek nagyobb része támogat. Ez azt jelenti, hogy az operációs rendszerek már tartalmazzák ezeket a betűtípusokat, így a felhasználóknak nem kell azokat letölteniük a szerveredről. A web-biztos betűtípusok ezért lehetővé teszik, hogy mindenki számára olvasható legyen a weboldalad olyan megjelenésben, ahogy azt Te megtervezted.

Kérdés persze, hogy a 2020-as években van-e még bármiféle létjogosultságuk ezeknek a web-biztos betűtípusoknak. Itt mindössze azt kell figyelembe venni, hogy ha valamilyen egyedi, helyi vagy külső fél által szolgáltatott betűtípust használsz, akkor annak letöltése lelassítja a weboldaladat. Vagyis a web-biztos betűtípusra váltás gyorsabb weboldalt eredményez. Márpedig a weboldalsebesség fontos tényező, akár a felhasználói élményt, akár a SEO-t tekintjük.

Sokan használják az ingyenesen elérhető Google-betűtípusokat, ezek azonban nem tekinthetők web-biztosnak, hiszen maga az operációs rendszer nem támogatja őket. Ezeket a betűket a Google szolgáltatja és úgynevezett web-betűtípusok. Ez lehet, hogy egy kicsit zavaró megnevezés, de a lényege, hogy a böngészőnek előbb le kell töltenie a fájlt ahhoz, hogy azt megmutassa a felhasználónak.

Ezzel szemben a web-biztos betűtípusok olyan betűk, amelyek az eszközök legnagyobb részén már eleve megtalálhatók. Ezeknél nem okoz problémát a letöltés, mivel szinte minden látogatód operációs rendszere támogatja őket, így csak bele kell kódolnod a weboldalba a CSS segítségével.

Milyen betűk tartoznak közéjük? Felsorolunk néhányat, sok ismerőssel fogsz találkozni:

• Arial – a klasszikus sans serif betű, mely címsoroknál és a szövegtörzsben is használható.
• Baskerville – egy viszonylag vastag serif betű, melyet John Baskerville tervezett 1750-ben. Támogatják mind az Apple, mint a Microsoft újabb rendszerei.
• Bodoni MT / Bodoni 72 – egy serif font, mely elsősorban a szövegtörzsben állja meg a helyét. A Bodoni MT a Microsoft 10-ben és a régebbi verziókban alapértelmezetten elérhető, míg a Bodoni 72 a macOS Sierra és az újabb verziók esetében.
• Calibri – a Microsoft sztenderd sans serif betűje a 2007-es Microsoft Office óta. Modern megjelenésű, lekerekített élekkel, ami barátságosabbá teszi a megjelenését.
• Calisto MT – egy lágyabb serif font a többieknél. Egyébként sztenderd Microsoft betűtípus, ami a macOS-en és iOS-en a Bookman Old Style fontnak felel meg.
• Cambria – egy másik puha serif font, modern beütéssel és jó olvashatósággal.
• Candara – a Microsoft ClearType kollekciójának része ez a sans serif betű, mely macOS és iOS alatt megfelel az Optima Regularnak. Kevésbé modern és hivatalos, mint más sans serif betűk.
• Century Gothic – geometrikus sans serif betűtípus, letisztult és kiegyensúlyozott megjelenéssel. Különösen jól mutat a címsorokban. Eredetileg a Futura konkurenciájának tervezték, mely a Microsoft és Apple operációs rendszereiben is megtalálható.
• Consolas – egy sans serif, melynek minden karaktere azonos szélességű, ezért az i és az l esetében seriffé változik. A clearType Collection része.
• Copperplate Gothic – a gótikus rúnák inspirálták a megjelenését, így nincs kisbetűs variációja.
• Courier New – slab serif betűtípus, mely a Microsoft és az Apple operációs rendszerese esetében is rendelkezésre áll.
• Dejavu Sans – tiszta, egyenes vonalú sans serif betű, mely elsősorban az olyan klasszikus fontokkal versenyez, mint az Arial és a Verdana.
• Didot – az Apple használja, így eszközei legnagyobb részén elérhető.
• Franklin Gothic – szokatlan vastag betűket felvonultató sans serif font, ami úgy néz ki, mint más betűknél a félkövér. Az eredetijét még a XX. század elején tervezték, és jó választás címosorokhoz, viszont a szövegtörzsben nem igazán működik.
• Garamond – puhább, kerekebb, mint a legtöbb sztenderd serif font, például a Times New Roman. A Microsoft és az Apple rendszerei tartalmazzák a saját verzióját.
• Georgia – a Garamond közeli rokona, lekerekített élekkel és barátságos megjelenéssel. A Microsoft tervezte még 1996-ban, és jelenleg is az egyik legelterjedtebb MS betűtípus. Minden Windows és macOS verzió támogatja.
• Gill Sans – éles, tiszta vonalú, modern megjelenésű sans serif betű. A gyenge kontraszt miatt nem alkalmas a szövegtörzs megírására, ugyanakkor a címsorokban megállja a helyét. A legtöbb iOS, macOS és Windows rendszer támogatja.
• Goudy Old Style – egy puha, régies stílusú serif betű. A Windows újabb verziói támogatják.
• Helvetica – talán minden idők leghíresebb betűtípusa, melyről még film is készült. Modern sans serif, melyet a késő XIX. századi svájci és német betűtípusok inspiráltak a XX. század elején. Tiszta vonalak és formák, kiegyensúlyozott megjelenés jellemzi, mely mind a szövegtörzsben, mind a címsorokban jól működik. Az Apple eszközeiben megtalálható, míg a microsoftos megfelelője az Arial.
• Impact – vastag vonalú sans serif, emiatt jól használható címsorokban vagy CTA-knál. 1998-ban az eredeti web-fontok között jelent meg, és mind az Apple, mind a Microsoft támogatja.
• Lucida Bright – a Microsoft számára 1991-ben megtervezett Lucida betűk közé tartozó serif font. Jellemzője a négyzetes, stabil megjelenés. A Windows új verzióiban megtalálható, míg az Apple csak a Lucida Grande sans serifet tartalmazza.
• Lucida Sans – humanista sans serif, mely kiegészíti a Lucida-vonal serif betűit. Ezáltal játékosabb, kevésbé merev, modern. Címsorokhoz és CTA-khoz jó választás.
• Microsoft Sans Serif – a Windows 2000-zel jelent meg, elődje az MS Sans Serif volt. A Helvetica inspirálta, így ez is egy letisztult, professzionális megjelenést biztosító betűtípus, ami tökéletes választás céges oldalak címsorainál. Minden Microsoft eszközön elérhető.
• Optima – egy újabb humanista sans serif, változó szimmetriával. Emiatt majdnem olyan, mintha kézzel írt betűtípus volna, ami szembe megy a tipikus sans serifekkel. Sztenderd Apple font, microsoftos megfelelője a Segoe.
• Palatino – egy régies stílusú serif betűtípus, mely otthonosan képes megjelenni bármely online magazinban. Kevésbé merev, mint a Georgia vagy a Times New Roman, valamint vastagabb, mint az átlagos serif fontok. Emiatt barátságosabb a megjelenése. A Windows és az Apple eszközeinek többségén jelen van.
• Perpetua – egyedi designú serif font, melyet az angol szobrász, Eric Gill tervezett. Kreatív, játékos megjelenésű betű, mely a Windows része. Közeli rokona, a Baskerville az Apple rendszerein található meg.
• Rockwell – négyzetes vagy slab serif betűtípus, rendkívül vastag vonalakkal. Címsorokban és CTA-kban előnyös a használata. A legtöbb újabb Windows rendszer része.
• Segoe UI – a Segoe betűcsalád vezető sans serif fontja. A Microsoft nem csak sok alkalmazásában használja, hanem még termékei marketinganyagaiban is megjelenik. Modern betűtípus, szimmetrikus betűkkel. Az Apple esetében a Helvetica Neue hasonló megjelenésű.
• Tahoma – szintén a Microsoft által készített sans serif, mely vastagabb, mint a Segoe UI. Négyzet alakú pontokat használ a kisbetűknél. Akár szövegtörzsben, akár címsorokban is megjelenhet. A Microsoft és az Apple eszközei is támogatják.
• Trebuchet MS – a Microsoft által fejlesztett sans serif, melyet mind a Microsoft, mint az Apple eszközei támogatnak. A betűk valamivel vékonyabbak, mint a többi sans serif esetében, így jól használható a szövegtörzsben.
• Verdana – még egy Microsofthoz köthető betűtípus még 1996-ból, mely vékony betűi miatt könnyen olvasható, de nem csak a szövegtörzsben, hanem a címsoroknál is működik. Valamennyi Apple és Microsoft eszköz része.

Mik azok a nyílt forráskódú betűk? És miért érdemes használni őket?

A nyílt forráskódú betűk licence szerint azokat bárki használhatja, bármilyen feladathoz, anélkül, hogy fizetnie kellene értük. Nagyon sok nyílt forráskódú betűtípus érkezik az Open Font Lisense-szel, ami jelentős rugalmasságot biztosít a használatnál. A nyílt forráskódú betűk elterjedését a Google Fonts megjelenése segítette jelentős mértékben, ami nagy számú betűt tett ingyenesen elérhetővé a designerek számára.

Melyek a nyílt forráskódú betűtípusok előnyei?

Ingyenes használat

Mint az előbb is már említettük, a nyílt forráskódú betűtípusok egyik legfőbb előnye, hogy ingyenes a használatuk, bármilyen projektről is legyen szó, így kereskedelmi célú felhasználásuk is megengedett.

Nincs gond a licencekkel

A licenc kérdése, illetve annak átadása sokszor gondot jelent az ügynökségek számára, ha ügyfeleknek dolgoznak. A nyílt forráskódú betűtípusok esetében ilyen probléma nincs, vagyis egyszerűbbé teszi a projektek átadását, miközben a költségeket is alacsonyabban tartja.

Jelentős választék

A nyílt forráskódú betűtípusok száma folyamatosan növekszik. A Google Fontosban több mint ezer betűtípus áll már rendelkezésre, és mostanra teljesen megszokottá vált a használatuk a designerek részéről. Más források is folyamatosan növekednek, és nagyon sok független designer kínál nyílt forráskódú betűket.

Ideálisak webes használatra

A nyitott forráskódú betűtípusokat nem kell megvásárolnod vagy bérelned, hogy egy webszerveren használd őket. A Google fontok esetében vannak olyan eszközök és pluginok, melyek segítségével a weboldalad közvetlenül kapcsolódhat a betű kódjához, így pedig könnyebb a használat.

A lényeg itt az, hogy valóban nyitott forráskódú betűtípusokat használj. Akadnak ugyanis olyan szolgáltatások, melyek előfizetéshez kötöttek. Ugyanakkor egy előfizetés lejár, ami érinti a betű elérhetőségét.

Megváltoztathatod őket

Mint minden nyitott forráskód lényege, az hogy megváltoztathatod őket. Akadnak olyan betűtípusok, melyeknek már vannak leágazásai, új verziói. Ilyen például a Raleway. Ez a változtathatóság ösztönzi munkára a designközösség tagjait, így az egyszerű betűtípusok növekedni tudnak.

Sok népszerű betűtípus nyílt forrású

Talán nem is tudod, de a legkeresettebb betűtípusok nagy része nyílt forráskódú. Ide tartozik a Robot, az Inter, a Space Mono, a Work Sans, a Libre Franklin, az Alegreya vagy a Source Sans. Tehát csak azért, mert nyílt forráskódú betűtípust használsz, még nem kell lemondanod arról, hogy a legnépszerűbb betűk közül válogass. Miközben persze sok, kevésbé ismert betűtípus is megtalálható közöttük.

És habár a nyílt forráskódú betűtípusokat sokan lenézik, mégiscsak értékes lehetőséget jelentenek sok designer számára. És ha megtalálod közöttük azt a stílusú betűt, ami jól passzol a weboldaladhoz vagy alkalmazásodhoz, akkor nincs igazán okod arra, hogy ne használd.

Mik azok a változtatható betűtípusok? És miért érdemes használni őket?

Úgy néz ki, hogy a változtatható betűtípusok tekinthetők a legjelentősebb felfedezésnek a webfontok megjelenése óta. Várhatóan egyre nagyobb lesz a hatásuk a webre, és arra, ahogyan a tipográfiát használjuk a webdesignban. Ha még nem tudod, hogy miről is van szó pontosan, akkor segítünk annyit tudunk segíteni, hogy összefoglaltuk a lényeget a Design Shack bejegyzése alapján.

Mik is azok a változtatható betűtípusok?

Biztos találkoztál már azzal a jelenséggel, amikor elkezd betöltődni egy weboldal, de elsőre egy fura betűtípussal írt ronda designt látsz, majd néhány pillanat múlva összeáll az oldal megjelenése. Ennek oka, hogy a betűtípusok betöltése később történik meg, mint az oldal megjelenése, ami egy lassú weboldalnál a felhasználó számára is látható folyamat.

Egy weboldal tervezésénél többféle betűtípust használunk, amibe beletartoznak a vékonyabb és vastagabb betűk, illetve a különféle stílusok, mint például a betűk dőlt verziója. A hagyományos megoldással minden betűtípust külön be kell ágyazni a weboldalba. Amikor a felhasználó számára betöltődik az oldal, akkor először letöltődnek ezek a betűtípusok, majd megjeleníti őket a böngésző, jó esetben még mielőtt láthatóvá válna a felhasználó számára.

Ugyanakkor a betűtípusok betöltése időbe telik, hiszen méretük van, foglalják a szervert és sávszélességet igényelnek, emellett pedig hatással vannak az általános felhasználói élményre.

A változtatható fontok a betűtípusok olyan új típusát jelentik, melyek a CSS erejét használják ki a tengely numerikus értékek mentén történő megváltoztatására. Vagy másképp fogalmazva: a változtatható betűtípusok CSS attribútumokat használnak a betű súlyának, stílusának és más paramétereinek beállításához.

Vagyis ahelyett, hogy különféle fontokat ágyaznánk be a weboldalba, hogy megjelenítsék a különféle stílusokat, mindössze egyetlen betűtípusra van szükség, melynek a stílusát CSS változtatja tág határok között. Ez a megoldás tehát nagyobb kreativitást tesz lehetővé a betűk designjánál, anélkül, hogy az hátrányosan befolyásolná a weboldal teljesítményét.

Hogyan működnek a változtatható betűtípusok?

Amikor a megszokott módon használsz hagyományos betűtípusokat, akkor csekély befolyásod van arra, hogy miként változzon a betűk megjelenése. Vagy legalábbis nem tudod befolyásolni anélkül, hogy ne romlana a betűtípus minősége vagy designja. Arra vagy korlátozva, hogy fix szélességű fontokat használj, melyek persze lehetnek keskeny betűtípusok.

Változtatható betűtípusok esetén viszont szabályozhatod a betű szélességét a CSS attribútumok és numerikus értékek használatával, anélkül, hogy ez hátrányosan befolyásolná a betű designját. Például használhatsz egy olyan egyszerű CSS attribútumot, mint a h2 { font-stretch: 60%; }, mellyel megnyújtod a betűt, így a H2 címsorok egy másfajta megjelenés kapnak, mint a szövegtörzs. Ugyanez vonatkozik a dőlt betűkre, a méretekre és a többi paraméterre.

A változtatható fontok ereje tehát, mint látható, a CSS-ben rejlik. És ez az, ami még reszponzívabbá és hatékonyabbá teszi az erőforrás-igényes, régi megoldáshoz képest. Erre láthatsz egy jó példát a CodePen-nél, ahol bemutatják, hogy miként használhatók egy kreatív designnál a változtatható fontok.

Miért használj változtatható betűket?

Habár az eddigiekből jól látható, hogy milyen előnye van a változtatható betűtípusok használatának, össze lehet foglalni néhány pontba az eddigieket, hogy még világosabb legyen:

• Gyorsabbá válik a weboldal: a beágyazott betűk sokasága nélkül gyorsabban töltődik be a weboldal és kevesebb szerver-erőforrást igényel.
• Kreatív szabadság: a betűtípusok nem korlátozzák a weboldal designját.
• Rugalmasabb design: a nagyobb képlékenység révén korlátok nélkül határozható meg a szélesség, a súly és egyéb paraméterek.
• Javuló felhasználói élmény: minimálissá válik a késés a betű betöltésénél, miközben az operációs rendszerrel is jobb a kompatibilitása.

Hogyan kezdj bele?

A változtatható fontok használatára való átállás a saját weboldaladnál nem különösebben nehéz. A legegyszerűbb a Google Fontok használata, és azok közvetlen beágyazása a weboldal kódjába.

A Google Font API V2 már magába foglalja számos változtatható betűtípus támogatását. Csak válassz ki egyet és tedd be a kódba.

De Te magad is beágyazhatod őket a CSS-en keresztül a “@font-face” használatával. A fontstílusok meghatározására szolgáló attribútumok és tengelyek általában minden változtatható font esetében azonosak. Ugyanakkor néhány font esetén különböznek, ezért érdemes minden betűtípus dokumentációját használni, hogy tudd, miként működik az adott font. 

A változtatható betűtípusok technikai magyarázatairól a Mozilla készített egy jó útmutatót.

Összességében tehát elmondható, hogy a változtatható betűtípusok jelentik a webdesign jövőjét, és néhány év múlva már ezek jelentik a sztenderd választást a weboldalaknál és appoknál. Tehát, ha egy igazán jövőbe mutató designt akarsz, akkor jobb, ha mielőbb használatba veszed a változtatható betűket. 

Tipográfia 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.

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.

Frissítve, 2022.12.23.:

Hogyan használj nagyobb betűméreteket a weboldaladon?

Amikor a betűk méretét kell meghatározni 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.

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.

Ne legyen túl hosszú a címsor!

Ez egy fontos pontja a nagyobb betűméretek alkalmazásának. Már azért is, mert néhány weboldal esetében ki fog derülni, hogy a nagyobb betűméretek azért nem alkalmazhatók, mert vagy túl hosszúak a címsorok, vagy válozó hosszúságuk van. Ilyenek például a blogok, vagy bármely más dinamikusan változó oldal, például a híroldalak.

Nagyméretű betűket tehát elsősorban olyan statikus weboldalakon lehet használni, ahol biztosítható a rövid címsor, amivel jól mutat a kifejezetten nagy betűméret. Ha vannak hosszabb címsoraid, akkor kénytelen leszel kompromisszumot kötni a betűméreteket tekintve.

Ezután a szövegtörzs betűméretét 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 szövegtörzsben, mivel ez nagyobb helyet foglal 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.

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.

Display betűtípus-változatot használj!

A display betűk olyan betűk, melyeket nagyméretű megjelenésre terveztek címsoroknál, nem pedig szövegtörzsre. Tehát, amikor csak lehet, nagyméretű betűknél display fontokat használj a normál betűttípus-változatok helyett.

Állíts be két töréspontot!

A nagy betűtípusok esetén a legjobb, ha reszponzív és fluid tipográfiát használsz egyszerre. Legalább két töréspontot állíts be annak érdekében, hogy a nagyméretű szövegek jól jelenjenek meg minden kijelzőméretnél. Az egyik a kisebb kijelzőkre, a másik a nagyobbakra vonatkozzon. Ha nem használsz töréspontot, és azzal együtt nem állítasz be korlátot, akkor a szövegek végtelen méretűre is nőhetnek, ami elég furcsa lesz nagyméretű kijelzőkön.

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.

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!

Akadálymentesség

A nagyméretű betűtípusoknál nem kell nagyon aggódni az akadálymentesség miatt, vagy hogy nem változik annak megfelelően a címsorok mérete, ahogy a böngészőben átállítja a felhasználó a betűméretet (alapvetően nagyobbra, hogy jobban lássa). A betűk ugyanis már eleve nagyok, így elegendő az esztétikára figyelni.

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.

Mekkora betűtávolságokat használj?

A betűtávolság azért fontos, mert befolyásolhatja az olvashatóságot. Sokan összekeverik az alámetszés fogalmával (kerning), de a kettő nem ugyanaz: míg a betűtávolság az egész szövegre vonatkozik és a CSS-sel változtatható, addig az alámetszés két adott betű közötti optimális távolságról szól, tehát a betűtípus-tervezők terepe.

A betűtávolsággal óvatosan kell bánni, mert sem a túl kicsi, sem a túl nagy betűtávolság nem jó (még ha azt is gondolod, hogy jól néz ki), rontja ugyanis az olvashatóságot.

Ha jól tervezett betűkészletet használsz, akkor az jól van beállítva, és nincs szükség jelentősebb módosításokra. Ugyanakkor vannak olyan esetek, amikor mégis érdemes hozzányúlni az alapértelmezett beállításhoz.

A betűtávolságot például érdemes korrigálni, ha csupa nagybetűt használsz egy szövegben. A nagybetűt ugyanis arra tervezték, hogy egy mondat vagy egy szó elején álljon. Ha viszont egymás mellé helyezed őket, akkor túl szorosan fognak állni. A jobb olvashatóság érdekében ezért itt érdemes növelni a távolságot.

Szintén egyensúlytalanság jelenhet meg a címsorokban, ahol olykor óriásira nőnek a betűk. A megfelelő távolság azonban minden betűtípus és méret esetében más és más, így általános érvényű szabályt nehéz mondani, de durva megközelítéssel az alábbi számokat érdemes figyelembe venni:

H1 — 96px — -1.5%
H2 — 60px — -0.5%
H3 — 48px — 0%
H4 — 34px — 0.25%
H5 — 24px — 0%
H6 — 20px — 0.15%
Alcím — 16px — 0.15%

Ezek persze minden egyedi esetben változhatnak.

A normál szövegtörzsnél is adódhatnak gondok, és habár sokan azt mondják, hogy itt nem érdemes hozzányúlni az eleve beállított távolsághoz, néha jelentős javulást érhetünk el, ha a túl szűkre szabott távolságot növeljük. Ez persze nem érvényes minden betűtípusra, így érdemes kísérletezni, hogy adott betűkészlet esetében mi az optimális. Általában elmondható, hogy minél kisebb a betűméret, annál nagyobbra kell növelni a betűtávolságot, de ez nem minden betűkészlet esetében szükséges.

Végül érdemes megemlíteni, hogy a sötét háttérre írt világos betűknél is valószínűleg érdemes hozzányúlni a betűtávolsághoz, mégpedig növelni, hogy olvashatóbb legyen. A sötét módban ugyanis jellemző, hogy romlik a szöveg olvashatósága, így minden eszközt ki kell használni a javítására.

Óvatosan használd a vékony betűket!

Már jó ideje trend a webdesignban, hogy egyre könnyebb, vékonyabb, karcsúbb betűtípusokat használnak a designerek. Ezek a betűk kellemesek, látványosak, modernnek hatnak, akad azonban egy nagy problémájuk: bizonyos esetekben rendkívül rosszul olvashatók.

Mielőtt a problémára és a megoldásra rátérnénk, vessünk egy pillantás arra, hogy mégis, minek köszönhetik nagy népszerűségüket a vékony és könnyű betűtípusok? Ennek három fő oka van:

• A szöveg stílusa sokkal kifinomultabbnak látszik.
• Jó kontraszt alakítható ki a szövegtörzs és a címsorok között.
• Modern, minimalista megjelenést hoznak az oldalba.

Ugyanakkor problémát is okozhatnak a könnyű betűtípusok. Ez pedig elsősorban a kontrasztnál jelentkezik.

A fenti szöveg Roboto Thinnel lett írva. Mi itt a probléma?

• Ha túl kicsire vesszük a betűméretet, akkor nehezen olvashatóvá válik a szöveg. A megoldás: a kellően nagy betűméret.
• A helyzetet tovább rontja, ha a háttér nem teljesen fehér, azaz jobban oda kell figyelni a háttér és a betűszín kontrasztjára, mint a normál betűknél.
• Mobileszközökön még fokozottabban jelentkezik a probléma, vagyis ami asztali monitoron még rendben lévőnek tűnik, mobilon nem biztos, hogy működni fog, ezért tesztelni kell.

És van egy további tényező is, amit a könnyű betűtípusoknál figyelembe kell venni:

nem szabad őket túl gyakran használni.

Fontos megtalálni az egyensúlyt, mert ha mindent vékony betűkkel írsz a weboldaladon, akkor elveszítik a különlegességüket. Kombináld tehát egy másik, de normális, regular betűtípussal a light vagy thin betűtípussal írt címsorokat. Így kialakul közöttük a kellő kontraszt, és a vékony betű nem veszti el egyediségét, erejét.

Honnan szerezheted be a betűtípusokat a weboldaladra?

A neten találsz egy rakás weboldalt, ahonnan le tudsz tölteni betűtípusokat, csak épp nehéz eldönteni, hogy melyik forrást használd inkább. Annak érdekében, hogy megkönnyítsük számodra a választást, felsorolunk néhány weboldalt, melyeken jó minőségű betűtípusokat találhatsz akár személyes, akár üzleti célokra.

Google Fonts

Az egyik legfontosabb forrás, ha betűt keresel, a Google Fonts. Ez a legnépszerűbb és leggyakrabban használt oldal erre a célra a világon. Nyitott forrású könyvtár, melyben 980 betűtípust találhatsz, melyek 135 nyelven használhatók. És persze mindegyik ingyenesen letölthető.

Kereshetsz benne a szabadszavas keresővel, vagy a kategóriákat használva, ahol külön végignézheted a serif, sans serif, kézírásos, stb. betűtípusokat. Olyan keresési paramétert is beállíthatsz, ami a nyelvre vonatkozik, így magyar nyelven használható betűtípusokat is könnyen szűrheted. De azt is lehetővé teszi, hogy megnézd, hogyan fog kinézni a szöveged az adott betűtípussal.

Ha megtaláltad a betűtípust, akkor a jobb felső sarokban lévő + jellel tudod kiválasztani, majd az ablakon belül a jobb alsó sarokban látod a kódot, amit be kell illesztened a weboldaladra. Itt választhatod ki azt a nyelvet is, amire szükséged van.

Font Squirrel

A Font Squirrelen is ingyenes fontokat találsz, melyek egy része üzleti célra felhasználható. Alatta ikonok láthatók, amelyik ezek közül sötét, az a jelzett célra használható céges weboldalakon, ha világos, akkor nem. És habár a fontok ingyenesek, érdemes elolvasni mindegyiknél a leírást, ha használni kívánsz egy betűtípust.

Ami különlegessé teszi a Font Squirrellt, az a betűtípus beazonosító funkció, mely egy betűről készült fotó alapján keres egy hozzá hasonlót.

Fontspace

A Fontspace-en jelenleg 64 ezer ingyenes betűtípust találsz, és a címkék segítségével keresve könnyen megtalálod az igényeidnek megfelelő fontot. Arra figyelj, hogy a betűk között akad olyan, amely csak személyes használatra engedélyezett, de ha bejelölöd az „only 100% free” lehetőséget, akkor csak a teljesen ingyenesen felhasználható fontokat mutatja. Ha kiválasztottál egy betűt, akkor nem kell megnyitnod vagy bejelentkezned, csak rákattintani a letöltés ikonra.

Befonts

A Befontson találsz személyes és üzleti felhasználás esetén ingyenes betűtípusokat. Ha rákattintasz valamelyikre, akkor látod a licenc-információkat. A jobb felső sarokban találod a kategóriákat, melyek közül válogathatsz, de kulcsszó alapján is kereshetsz.

További lehetőségek

• DaFont
• FFonts
• Free Script Fonts
• FontsArena
• Pinspiry Fonts

Hogyan állapítsd meg egy szövegnél, hogy azt milyen betűtípussal írták? (FRISSÍTÉS, 2023.09.01.)

Amikor látunk egy nyomtatott szöveget vagy nézelődünk a weben, találkozhatunk olyan betűtípusokkal, melyeket mi is szívesen használnánk, akár a weboldalunkon, akár más szöveges anyagainkban. De hogyan állapítsuk meg, hogy az adott felületen milyen betűtípust látunk?

Keresd meg a kódban!

Ez a legnehezebb megoldás egy betűtípus meghatározására, és ez igényli a legtöbb munkát. Sokkal egyszerűbb mondjuk egy online eszközt vagy böngészőbővítményt alkalmazni, ugyanakkor nem árt tudni, hogyan lehet kinyerni a kódból az információt.

Ehhez annyit kell tenned, hogy jobb gombbal kattintasz a szövegre, majd a felbukkanó menüben a vizsgálat opciót választod. Ilyenkor minden böngészőn belül megjelenik egy ablak a weboldal kódjával. A kódban a font-family részt kell megkeresned, ahol a betűtípus nevét is megtalálod. Akad olyan böngésző, például a Firefox, ahol külön listában látod az adott oldalon használt betűtípusokat, de a Chrome CSS áttekintésében is található egy betűtípus-lista.

Használj böngészőbővítményt!

Egyszerűbb megoldás a betűtípus-azonosító böngészőbővítmények használata, csak telepítened kell egyet. Ezekből elég sokat találsz, úgyhogy itt van néhány tipp, melyiket érdemes használni:

• WhatFont (Chrome és Safari)
• Fontanello
• Fonts Ninja (Chrome)
• FontFinder (Friefox és Chrome)
• Rapid FontFinder (Chrome)

Online eszközök

Ha nem akarsz böngészőbővítményt telepíteni, mert egyébként is csak ritkán használnád az eszközt, akkor online megoldásokkal is azonosíthatsz betűtípusokat. Ezeknél általában fel kell tölteni a betű képét, majd az eszköz megállapítja a betűtípust. Ennek a megoldásnak az az előnye, hogy nem csak webes szövegeknél tudod azonosítani a betűtípust. Ugyanakkor a feltöltött képnek jó minőségűnek, kellően kontrasztosnak kell lennie a megfelelő eredmény elérése érdekében. Néhány online eszköz:

• What The Font
• Font Squirrel
• Font Spring Matcherator
• What Font Is
• Identifont

Merre tart a webes tipográfia?

Egyre nagyobbak, egyre változatosabbak, egyre látványosabbak a weboldalakon használt betűk. Továbbra is ezek a trendek, de mondjuk részletesen.

Körvonalas betűk

Talán a brutalizmussal összefüggésben, de egyre nagyobb teret hódítanak a webdesignban a körvonalas betűk. Ráadásul ezek a betűk óriásira nőttek és nagy tereket foglalnak el.

Animáció a betűknél

Ha már egyre több animációval találkozunk a weboldalakon, akkor miért pont a betűk maradnának ki ebből? A szövegekinteraktívvá válnak, reagálnak a felhasználókra. A technológia ugyanis most már lehetővé teszi, és ezt ki is használják a designerek.

Rugalmasság és változtatható betűk

A változtatható betűk jelentős és jótékony változást hoztak a webdesignba, terjedésük megállíthatatlan.

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.

Mindenféle serif

Habár mindig is jelen voltak a weben, de néhány éve 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 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. Hiszen egy serifet bedobva a sans serif szövegünk mellé, máris kontrasztot hoztunk létre.

Betűk színátmenetekkel

Természetesen a népszerű gradiensek is megjelennek a betűknél, overlayként ráhúzva a szövegre. És habár könnyű elrontani a színátmenetek használatát, hozzáértő kezekben nagyszerű lehet a hatás: garantáltan magához vonzza a tekintetet.

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.

Nagyobb betűméretek a szövegtörzsben

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.

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.

Kézírásos szövegek

Erejük az eredetiségükben rejlik, már ha magunk hozunk létre kézírásos betűtípusokat. Ráadásul egy kézírásos betűtípussal erősebb kapcsolat hozható létre a weboldal és olvasója között, mint a nyomtatott betűkkel. Ezért is marad örök trend a kézírásos betű, és nem csak a nőies, kifinomult weboldalaknál.

The post Hogyan válassz betűtípusokat a weboldaladra? (Frissítve, 2023.09.01.) appeared first on Webshark Blog.

Egy jól megválasztott betűtípus teljesen egyedi hangulatot kölcsönöz weboldaladnak, még teljesebb vizuális élménnyel szolgál látogatóidnak és megfelelően reprezentálja márkádat és szolgáltatásaidat. A betűtípus szerepe honlapodon és termékeden jóval nagyobb, mint gondolnád, különösen azért, mert kiválasztani a fontok küzül a megfelelőt meglehetősen trükkös és összetett feladat.

A betűtípusok 3 fő kategóriája:

• alapértelmezett
• ingyenes
• fizetős

Rendszer betűtípusok

Először tehát az alapértelmezett rendszer betűtípusokról lesz szó. Ilyenek az Arial és a Times New Roman, amelyek bármely PC-n, vagy MAC-en az operációs rendszerben elérhetők.

A webes fejlesztőkről általánosságban elmondható, hogy egyenesen rajonganak ezekért a fontokért. Szeretik őket, mert a különböző böngészőkön és számítógépeken ugyan úgy jelennek meg. Alapvetően csak erre a néhány „webbiztos” fontra támaszkodhatnak a honlapok tervezésénél, amelyek minden platformon ugyan úgy néznek ki.

Ezért, ha egy olyan betűtípust szeretnél, amely kifejezőbb és túlmutat a szupermegbízható Arial-on, akkor kisebb kutatómunkát kell végezned különböző gyűjtőoldalakon, hogy megtaláld a minden szempontból megfelelő jelöltet. Fontos eldöntened, hogy egy ingyenes font megfelel e weboldalad igényeinek, vagy prémium font-ban gondolkodsz, ami persze pénzbe kerül.

Ingyenes betűtípusok

Ahogy az alábbi képen is láthatod, az ingyenes betűtípusok minősége merőben eltérőek egymástól:

Amennyiben egyedi betűtípust szeretnél honlapodra, a Google ingyenes font készlete remek megoldást jelenthet. Több száz minőségi betűtípus közül válogathatsz, amelyeknek egyik legnagyobb előnye, hogy nem kell tesztelned a különböző böngészőkben (mivel mindenhol ugyanúgy jelennek meg), a másik, hogy a betűtípusokat nem kell a saját szervereden tárolni, erről a Google gondoskodik.

A mérleg másik oldalán több tucat weboldal kínál olyan ingyenesen letölthető fontokat, amelyek nem ütik meg a mínőségi küszöbértéket.

Ezeknek java része rosszul megtervezett és igénytelen, amelyek egyáltalán nem alkalmasak terméked, vagy szolgáltatásod népszerűsítésére.

Viszont, ha egy Google font mellé teszed le a voksod, még mindig szembesülthetsz azzal a problémáva, hogy „csonka” a kiválaszott betűtípus család.

Egy teljes értékű betűtípus család tartalmazza az alábbiakat: normal (normál), bold (vastag), italic (dőlt), serif (talpas), sans serif (talpatlan). Ha nem áll rendelkezésre a teljes font család, a tervezési lehetőségek korlátozottak lesznek, különösen a marketing anyagaid elkészítése során, ami gyakran megkívánja a fontok különböző variációit.

Az ingyenes betűtípusok további hátrányai:

Nagy népszerűség. A betűtípus, amiről azt hitted egyedi és agyba-főbe reklámozod vele termékeidet, vagy szolgáltatásaidat sokkal népszerűbb mint hitted, igazi celeb a neten? Így nem éppen alkalmas arra, hogy megkülönböztesd vele termékedet.

Ékezetek. Nem mindegyik betűtípus tudja kezelni az ékezetes betűket. Ugyan a betűtípusoknál van egy olyan “Pop out” gomb, amellyel megnézhetjük az adott betűtípus karakterkészletét, ez sajnos sok esetben eltér a tényleges felhasználáskor kapott megjelenítési módtól.

Beállítási hibák. Előfordulhat, hogy nem megfelelőek a beállítások, ami rossz szóköz távolságot eredményez bizonyos betűk között. Például a kisbetűs y lehetetlenül távol kerül az o-tól, miközben az m agyonnyomja az n betűt.

Ennek ellenére, az ingyenes betűtípusok is rengeteg minőségi potenciált kínálnak. Bemutatunk néhány logót, amit a Webshark ingyenes betűtípus segítségével készített:

Fizetős, prémium betűtípus

A fizetős betűtípusok kétségtelenül kíváló alternatívát nyújtanak az ingyenesekkel szemben.

A fizetős betűtípusokat ugyanis profi tipográfusok és designer-ek tervezik azzal a céllal, hogy eladják. Ennek eredményeként a fizetős betűtípusok minősége jóval magasabb minőségi szabványoknak tesz eleget és a teljes betűtípuscsaládot tartalmazzák.

Az egyetlen felmerülő probléma…kitaláltad már? Bizony, bizony, ezek pénzbe kerülnek. Úgy tűnhet, hogy a tipográfusok élnek-halnak a szakmájukért, de ahhoz azért nem elég fanatikusak, hogy ingyen dolgozzanak.

A jövő font forradalma

Ez valójában csak egy sanda gyanú, ami ezúttal a fizetős betűtípusokat illeti. Emlékszel? A post elején említettem a rendszer fontokat. A közeli jövőben ezek ki fognak egészülni a legnépszerűbb webes fontokkal is.

Ennek érdekében, számos rendkívűl lelkes fizetős font készítője azon fáradozik, hogy nagy népszerűségre tegyenek szert fontjaik a neten és ezáltal bekerüljenek a következő webes szabványba a rendszer fontok közé. Ez lehetőséget nyújt a font-keresők számára is, hogy egy megosztásért cserébe – twitteren, facebook-on, vagy egyéb közösségi oldalakon – megszerezzék a liszenszet.

Figyeld ezeket a közösségi megosztásokon alapuló lehetőségeket, hogy megszerezz egy tisztességes fizetős-fontot ingyen!

Te milyen ingyenes, vagy fizetős fontot használsz weboldaladon? Írd meg hozzászólásban!

Ha tetszett a cikk, ne hagyd komment és megosztás nélkül! Hasznos volt a bejegyzés? Lájkolj, vagy +1. Köszönjük!

The post Melyik a nyerő betűtípus weboldaladon? appeared first on Webshark Blog.