![\"Webshark](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/01\/Webshark-weboldalk\u00e9sz\u00edt\u00e9s-02.jpg\")
<\/a><\/figure><\/div>\n\n\nEgy bet\u0171t\u00edpusnak nem csak annyi a feladata egy weboldalon vagy egy applik\u00e1ci\u00f3ban, hogy j\u00f3l n\u00e9zzen ki. K\u00f6nnyen olvashat\u00f3v\u00e1, gyorsan \u00e1ttekinthet\u0151v\u00e9 kell tennie a sz\u00f6veget, mik\u00f6zben stabil vizu\u00e1lis kapcsolatot teremt a tartalommal.<\/p>\n\n\n\n
A ClickLaboratory egyik esettanulm\u00e1nyb\u00f3l<\/a> kider\u00fcl, hogy egy \u00e1ltaluk optimaliz\u00e1lt weboldaln\u00e1l puszt\u00e1n a bet\u0171t\u00edpus megv\u00e1ltoztat\u00e1s\u00e1val 10 sz\u00e1zal\u00e9kkal cs\u00f6kkentett\u00e9k a visszafordul\u00e1si ar\u00e1nyt, 19 sz\u00e1zal\u00e9kkal a kil\u00e9p\u00e9si ar\u00e1nyt, 24 sz\u00e1zal\u00e9kkal n\u00f6velt\u00e9k az egy l\u00e1togat\u00e1s sor\u00e1n megtekintett oldalak sz\u00e1m\u00e1t, m\u00edg a konverzi\u00f3t 133 sz\u00e1zal\u00e9kkal emelt\u00e9k meg.<\/p>\n\n\n\n Ennyit v\u00e1ltoztattak a tipogr\u00e1fi\u00e1n:<\/p>\n\n\n Ahogy a k\u00e9pen is l\u00e1that\u00f3, a Test Font eset\u00e9ben nagyobb lett a bet\u0171 m\u00e9rete \u00e9s v\u00e1ltozott a bet\u0171t\u00edpus. Ez alapj\u00e1n akkor \u00e9rdemes foglalkozni a bet\u0171t\u00edpus k\u00e9rd\u00e9s\u00e9vel? \u00dagy t\u0171nik, hogy igen.<\/p>\n\n\n\n A k\u00fcl\u00f6nb\u00f6z\u0151 bet\u0171t\u00edpusok k\u00fcl\u00f6nf\u00e9le \u00e9rzelmeket v\u00e1ltanak ki az emberekb\u0151l, amikor r\u00e1juk pillantanak. Egy bet\u0171t\u00edpus \u00e1ltal kiv\u00e1ltott \u00e9rzelem \u00e9s az olvashat\u00f3s\u00e1g k\u00e9t k\u00fcl\u00f6n dolog. \u00cdgy van ez p\u00e9ld\u00e1ul a j\u00f3l ismert Disney log\u00f3val, mely alig-alig olvashat\u00f3 bet\u0171kb\u0151l \u00e1ll, ennek ellen\u00e9re, mint eg\u00e9szet, k\u00f6nnyen befogadjuk, \u00e9s egyfajta \u00e9rzelmi hat\u00e1st v\u00e1lt ki az emberekben. Ha ugyanazt a sz\u00f6veget m\u00e1s \u00e9s m\u00e1s bet\u0171t\u00edpussal \u00edrjuk, akkor m\u00e1s \u00e9s m\u00e1s hat\u00e1st v\u00e1ltunk ki, \u00e9s \u00edgy m\u00e1s benyom\u00e1s alakul ki r\u00f3lunk, v\u00e1ltozik az egy\u00e9nis\u00e9g\u00fcnk. <\/p>\n\n\n Friss\u00edt\u00e9s, 2022.08.12.:<\/em><\/p>\n\n\n\n Egy tanulm\u00e1ny szerint a bet\u0171t\u00edpusok k\u00e9pesek befoly\u00e1solni azt, hogy mit \u00e9rz\u00fcnk a vel\u00fck meg\u00edrt \u00fczenet kapcs\u00e1n. A tanulm\u00e1nyt a Monotype v\u00e9gezte, az alkalmazott idegtudom\u00e1nnyal foglalkoz\u00f3 Neurons-szal kar\u00f6ltve. 400 alannyal v\u00e9gezt\u00e9k a kutat\u00e1st, akiknek k\u00fcl\u00f6nb\u00f6z\u0151 szavakat mutattak h\u00e1rom elt\u00e9r\u0151 bet\u0171t\u00edpussal \u00edrva.<\/p>\n\n\n\n Ami kider\u00fclt, hogy a bet\u0171t\u00edpusok meg\u00edt\u00e9l\u00e9se el\u00e9g szubjekt\u00edv \u00e9s elt\u00e9r\u0151 hat\u00e1suk van a k\u00fcl\u00f6nb\u00f6z\u0151 emberekre. Az elt\u00e9r\u00e9sek egy\u00e9bk\u00e9nt jelent\u0151sek voltak, hiszen p\u00e9ld\u00e1ul az egyik vizsg\u00e1lt bet\u0171t\u00edpus 13 sz\u00e1zal\u00e9kkal t\u00f6bb pozit\u00edv v\u00e1laszt eredm\u00e9nyezett, pedig m\u00e1r az 5-6 sz\u00e1zal\u00e9kos k\u00fcl\u00f6nbs\u00e9g is szignifik\u00e1nsnak sz\u00e1m\u00edt. Az eredm\u00e9nyek itt l\u00e1that\u00f3k egy grafikonba foglalva:<\/p>\n\n\n A Neurons alap\u00edt\u00f3-vez\u00e9rigazgat\u00f3ja, Thomas Z. Rams\u00f8y szerint pozit\u00edvabb \u00e9rzelmi v\u00e1laszokat lehet tapasztalni a puh\u00e1bb \u00e9s k\u00f6nnyebben felismerhet\u0151 bet\u0171t\u00edpusokn\u00e1l, mik\u00f6zben a hegyes \u00e9s \u00e9les bet\u0171t\u00edpusok negat\u00edv \u00e9rzelmeket v\u00e1ltanak ki.<\/p>\n\n\n\n 2018-ban egy\u00e9bk\u00e9nt az ausztr\u00e1l RMIT egyetem kutat\u00f3i kifejlesztettek egy olyan bet\u0171t\u00edpust, mely \u00e1ll\u00edt\u00e1suk szerint fokozta a mem\u00f3ri\u00e1t az\u00e1ltal, hogy odafigyel\u00e9st k\u00edv\u00e1nt, ugyanakkor m\u00e9g olvashat\u00f3 volt. Ezt a hat\u00e1s\u00e1t viszont k\u00e9s\u0151bb megc\u00e1folt\u00e1k<\/a> a bet\u0171t\u00edpusnak. Emellett \u00e9rdemes megeml\u00edteni, hogy egy m\u00e1sik kutat\u00e1s<\/a> azt \u00e1llap\u00edtotta meg, hogy a legt\u00f6bb bet\u0171t\u00edpus nehezen olvashat\u00f3 az id\u0151sek sz\u00e1m\u00e1ra, kiv\u00e9ve a Garamond \u00e9s a Montserrat. <\/p>\n\n\n\n De n\u00e9zz\u00fck, hogy a bet\u0171t\u00edpusok milyen \u00fczeneteket hordoznak!<\/p>\n\n\n\n A serif bet\u0171t\u00edpusok eredete m\u00e9g a r\u00f3mai korba vezethet\u0151 vissza. Kialak\u00edt\u00e1sukat ez\u00e9rt az hat\u00e1rozta meg, hogy a bet\u0171ket m\u00e9g k\u0151re festett\u00e9k, nem pedig v\u00e9st\u00e9k \u0151ket. H\u00e1romf\u00e9le t\u00edpusukat k\u00fcl\u00f6nb\u00f6ztetj\u00fck meg:<\/p>\n\n\n\n Az ide tartoz\u00f3 t\u00edpusok a 15-16. sz\u00e1zadban, a renesz\u00e1nsz kor\u00e1ban jelentek meg. Jellemz\u0151j\u00fck, hogy j\u00f3l olvashat\u00f3k \u00e9s eleg\u00e1ns megjelen\u00e9s\u0171ek. A 16. sz\u00e1zad v\u00e9g\u00e9re sz\u00e9lesebb\u00e9 v\u00e1ltak, \u00e9s az \u00edvelt serif bet\u0171k v\u00e1ltak n\u00e9pszer\u0171v\u00e9, mint a Garamond, a Minion, a Goudy Old Style vagy a Bembo.<\/p>\n\n\n Ezek a 17. sz\u00e1zadban jelentek meg, \u00e9s mint a nev\u00fck is jelzi: a r\u00e9gi \u00e9s a modern st\u00edlus k\u00f6z\u00f6tti \u00f6sszek\u00f6t\u0151 kapcsot jelentett\u00e9k. Kontrasztjuk f\u00fcgg\u0151legesen er\u0151s\u00f6d\u00f6tt, \u00edgy nehezebben olvashat\u00f3k, mint a r\u00e9gi st\u00edlus\u00fa serif bet\u0171k. Olyan bet\u0171t\u00edpusok tartoznak ide, mint a Times New Roman, a Baskerville vagy a Georgia.<\/p>\n\n\n A modern st\u00edlus\u00fa serif bet\u0171t\u00edpusok a 19. sz\u00e1zad elej\u00e9n bukkantak fel, \u00e9s a v\u00e9kony, illetve vastag vonalak er\u0151s kontrasztja jellemz\u0151 r\u00e1juk. Mivel hi\u00e1nyoznak az \u00edvelt vonalak \u00e9s sarkok, \u00edgy merev a megjelen\u00e9s\u00fck. K\u00f6z\u00e9j\u00fck tartozik a Bodoni vagy a Didot.<\/p>\n\n\n Ami a hat\u00e1sukat illeti, ha tiszteletre m\u00e9lt\u00f3nak \u00e9s megb\u00edzhat\u00f3nak akarunk l\u00e1tszani m\u00e1r a bet\u0171t\u00edpusunkkal is, akkor v\u00e1lasszunk egy serif bet\u0171t. Olyan fogalmak kapcsolhat\u00f3k az ilyen bet\u0171t\u00edpusokhoz, mint a tisztess\u00e9g, a stabilit\u00e1s, a hagyom\u00e1ny, ugyanakkor kiss\u00e9 merev \u00e9s r\u00e9gim\u00f3di. A Webshark \u00edgy n\u00e9zne ki egy serif bet\u0171t\u00edpussal, a Heuristic\u00e1val \u00edrva:<\/p>\n\n\n A nevet m\u00e9g Vincent Figgins adta 1832-ben azokra a bet\u0171kre, melyek \u00fagymond serif, teh\u00e1t talp n\u00e9lk\u00fcliek. A sans franci\u00e1ul azt jelenti, hogy valami n\u00e9lk\u00fcl. T\u00edpusai:<\/p>\n\n\n\n A 19. sz\u00e1zad elej\u00e9n megjelent bet\u0171t\u00edpusn\u00e1l a groteszk kifejez\u00e9ssel a serif fontokhoz k\u00e9pest rendezetlen eszt\u00e9tik\u00e1jukat akart\u00e1k kiemelni. A sz\u00f3 William Thorogwood nev\u00e9hez f\u0171z\u0151dik, aki megalkotta az els\u0151 olyan bet\u0171t\u00edpust, melyben m\u00e1r eleve szerepeltek kisbet\u0171k. K\u00f6z\u00e9j\u00fck tartozik az Arial, a Helvetica, a Univers, a Franklin Gothic.<\/p>\n\n\n Kialak\u00edt\u00e1sukat a Bauhaus inspir\u00e1lta, vagyis a kevesebb t\u00f6bb elve. Alapvet\u0151en a kontraszt hi\u00e1nya, a minimalista megjelen\u00e9s \u00e9s a m\u00e9rtani eszt\u00e9tika jellemzi \u0151ket. P\u00e9ld\u00e1ul a „G” bet\u0171 mind\u00f6ssze k\u00e9t elemb\u0151l \u00e1ll: egy \u00edvelt \u00e9s egy v\u00edzszintes vonalb\u00f3l, mely lez\u00e1rja az \u00edvet, vagy az „a” bet\u0171 egy k\u00f6rb\u0151l \u00e9s egy f\u00fcgg\u0151leges vonalb\u00f3l. 1920-1930 k\u00f6z\u00f6tt jelentek meg.<\/p>\n\n\n Ezekre a bet\u0171kre a k\u00e9z\u00edr\u00e1s inspir\u00e1lta hajl\u00e9konys\u00e1g jellemz\u0151. A 20. sz\u00e1zad elej\u00e9ig a sans serif bet\u0171k nem v\u00e1ltoztak. Edward Jonhston volt az els\u0151, aki a Johnston Sans-szal valami \u00fajat hozott, bet\u0171it a londoni f\u00f6ldalattiban haszn\u00e1lt\u00e1k. Enn\u00e9l h\u00edresebb lett a Gill Sans, melyet Eric Gill alkotott meg a Monotype Corporation sz\u00e1m\u00e1ra. Ez volt az els\u0151 olyan sans serif, melynek m\u00e1r eredetileg is l\u00e9tezett d\u0151lt bet\u0171s v\u00e1ltozata is. Ehhez a st\u00edlushoz tartozik a Verdana, az Optima, a Tahoma.<\/p>\n\n\n A sans serif letisztult \u00e9s egyszer\u0171 bet\u0171t\u00edpusok csal\u00e1dja, melyek modernebbnek hatnak, mint a serif bet\u0171k. Nem rejtegetnek semmit, azt fejezik ki – egyenesen \u00e9s t\u00e1rgyilagosan -, amir\u0151l a sz\u00f6veg sz\u00f3l. Nem v\u00e9letlen, hogy a digit\u00e1lis vil\u00e1gban ezekkel tal\u00e1lkozhatunk leggyakrabban. Ennek ellen\u00e9re k\u00e9tf\u00e9le sans serif bet\u0171t\u00edpus is elt\u00e9r\u0151 \u00e9rzelmeket v\u00e1lthat ki, m\u00e1s hat\u00e1st kelt. A Websharkot \u00edrhatjuk \u00edgy is sans seriffel:<\/p>\n\n\n Sokan az eleganci\u00e1t, a kecsess\u00e9get pr\u00f3b\u00e1lj\u00e1k kifejezni, amikor valamilyen k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpust v\u00e1lasztanak. \u00c9s val\u00f3ban, az emberekben is ezt az \u00e9rz\u00e9st keltik, de emellett szem\u00e9lyesnek, kreat\u00edvnak \u00e9s szeretetet sug\u00e1rz\u00f3nak t\u0171nnek. Mindez azonban ritk\u00e1n van \u00f6sszhangban azzal, amit egy c\u00e9g szeretne sug\u00e1rozni mag\u00e1r\u00f3l. A Webshark eset\u00e9ben p\u00e9ld\u00e1ul \u00edgy hatna, ami ugye egy weboldalak fejleszt\u00e9s\u00e9vel foglalkoz\u00f3 c\u00e9gn\u00e9l nem lenne t\u00fal meggy\u0151z\u0151:<\/p>\n\n\n A k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusok k\u00fcl\u00f6n\u00f6sen hat\u00e9konyak abban, hogy egy\u00e9nis\u00e9get adjanak egy weboldalnak, kiemelj\u00e9k a t\u00f6bbiek k\u00f6z\u00fcl.<\/p>\n\n\n\n A designerek sokszor az\u00e9rt ny\u00falnak a k\u00e9zzel \u00edrt bet\u0171t\u00edpusokhoz, hogy adjanak egy kis szem\u00e9lyes, emberi jelleget a designnak. A minimalista, illetve a kiss\u00e9 egyforma, sablonokra \u00e9p\u00fcl\u0151 weboldalak kor\u00e1ban kifinomults\u00e1got \u00e9s egy\u00e9nis\u00e9get csemp\u00e9sz a weboldalba. Egy k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpus r\u00e1ad\u00e1sul \u00f6n\u00e1ll\u00f3 eszt\u00e9tikai elemk\u00e9nt m\u0171k\u00f6dik egy minimalista designban.<\/p>\n\n\n\n Teh\u00e1t ha nincs m\u00e1s eszk\u00f6z\u00f6d, hogy kifejezd a k\u00fcl\u00f6nb\u00f6z\u0151s\u00e9ged a t\u00f6bbiekt\u0151l a weben, akkor j\u00f3 megold\u00e1s lehet valamilyen k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpust bedobni. Az ezekben rejl\u0151 apr\u00f3, finom r\u00e9szletek k\u00e9pesek \u00e1thatni az eg\u00e9sz designt, egy k\u00fcl\u00f6nleges \u00f6sszk\u00e9pet eredm\u00e9nyezve.<\/p>\n\n\n\n \u00c9rdemes tudni, hogy amikor log\u00f3kban vagy a fejl\u00e9cekben haszn\u00e1lod a k\u00e9z\u00edr\u00e1sos bet\u0171ket, akkor azonnal magukra vonj\u00e1k a figyelmet. De sok esetben \u00e9ppen ez lenne a c\u00e9l. K\u00fcl\u00f6n\u00f6sen j\u00f3 megold\u00e1s, az \u00edrott bet\u0171t\u00edpusok haszn\u00e1lata, amikor rajzolt illusztr\u00e1ci\u00f3k jelennek meg a weboldaladon.<\/p>\n\n\n \u00d3vatosan kell azonban alkalmazni \u0151ket, k\u00fcl\u00f6n\u00f6sen az\u00e9rt, mert felkeltik az \u00e9rdekl\u0151d\u00e9st. A designerek persze sokszor \u00e9ppen ez\u00e9rt haszn\u00e1lj\u00e1k \u0151ket. Ilyenkor a sz\u00f6veg t\u00f6bbi r\u00e9sz\u00e9nek egyszer\u0171nek, letisztultnak, k\u00f6nnyen olvashat\u00f3nak kell lennie.<\/p>\n\n\n\n Megjelen\u00e9s\u00fck ink\u00e1bb csak a fejl\u00e9cekben, c\u00edmsorokban lehet indokolt, esetleg a navig\u00e1ci\u00f3s panelekn\u00e9l, CTA-n\u00e1l vagy a keres\u00e9sn\u00e9l jelenhetnek meg. Ut\u00f3bbiakn\u00e1l azonban t\u00f6rekedni kell arra, hogy olvashat\u00f3, haszn\u00e1lhat\u00f3 maradjon a funkci\u00f3, k\u00fcl\u00f6nben komoly gondot okozhatnak a k\u00e9zzel \u00edrt bet\u0171k. Ha figyelsz arra, hogy csak ritk\u00e1n \u00e9s \u00e1tgondoltan haszn\u00e1ld ezeket a bet\u0171ket, akkor sokat jav\u00edthatnak a weboldalad megjelen\u00e9s\u00e9n.<\/p>\n\n\n\n Amikor a weboldaladon k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpus haszn\u00e1lat\u00e1t tervezed, pr\u00f3b\u00e1ld mindig a felhaszn\u00e1l\u00f3 szem\u00e9vel l\u00e1tni az eredm\u00e9nyt. A k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusok nagyon karakteresek, \u00e9s nem szabad figyelmen k\u00edv\u00fcl hagyni a haszn\u00e1lhat\u00f3s\u00e1gukat sem. J\u00f3l olvashat\u00f3 a sz\u00f6veged az adott bet\u0171t\u00edpussal? Nem fog gondot okozni a felhaszn\u00e1l\u00f3knak, amikor meg kell \u00e9rteni\u00fck az \u00fczeneted l\u00e9nyeg\u00e9t? Gyorsan megtal\u00e1lj\u00e1k azt, amit keresnek?<\/p>\n\n\n\n Ha t\u00faler\u0151lteted ezeket a bet\u0171ket, akkor az eredm\u00e9ny egy zs\u00fafolt, zavaros weboldal lesz. Term\u00e9szetesen ez is vonz\u00f3 lehet egy egyedi k\u00f6z\u00f6ns\u00e9g sz\u00e1m\u00e1ra, azonban ha \u00e1tlagos vagy sz\u00e9les a c\u00e9lk\u00f6z\u00f6ns\u00e9ged, akkor a moder\u00e1lt haszn\u00e1lat a javasolt.<\/p>\n\n\n A k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusokat gyakran kombin\u00e1lj\u00e1k rajzolt illusztr\u00e1ci\u00f3kkal<\/a>, amivel m\u00e9g er\u0151sebb vizu\u00e1lis hat\u00e1s \u00e9rhet\u0151 el. Az eredm\u00e9ny \u00e1ltal\u00e1ban egy er\u0151teljes, sz\u00ednes \u00e9s izgalmas megjelen\u00e9s, mely egyedi \u00e9s vizu\u00e1lisan vonz\u00f3 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Ez\u00e1ltal a weboldal m\u00e9g ink\u00e1bb k\u00e9pes a felhaszn\u00e1l\u00f3k \u00e9rzelmeire hatni, \u00e9s az \u00fczenet jobban az adott term\u00e9kre vagy sz\u00e1nd\u00e9kra szabhat\u00f3. A k\u00e9zzel rajzolt illusztr\u00e1ci\u00f3k er\u0151s \u00e9s gyakran meglep\u0151 \u00fczenetet hordoznak, k\u00e9pesek v\u00e1laszt provok\u00e1lni az emberekb\u0151l, mert gondolkod\u00e1sra k\u00e9sztetik \u0151ket.<\/p>\n\n\n\n Ilyenkor azonban figyelni kell arra, hogy a weboldal tov\u00e1bbra is k\u00f6nnyen haszn\u00e1lhat\u00f3 maradjon, \u00e9s a felhaszn\u00e1l\u00f3k tudj\u00e1k, mik\u00e9nt navig\u00e1lhatnak, hogy megtal\u00e1lj\u00e1k az inform\u00e1ci\u00f3kat. Ez nem k\u00f6nny\u0171 feladat, \u00e9s kell hozz\u00e1 a gyakorlat.<\/p>\n\n\n A scripts bet\u0171t\u00edpusoknak k\u00fcl\u00f6nb\u00f6z\u0151 st\u00edlusaik lehetnek, mint a hivatalosnak hat\u00f3, kalligrafikus bet\u0171st\u00edlus: az English vagy a Snell Roundhand. A h\u00e9tk\u00f6znapi bet\u0171k sokkal ink\u00e1bb \u00fagy n\u00e9znek ki, mint egy szab\u00e1lyos k\u00e9z\u00edr\u00e1s, ilyen a Black Jack vagy a Zephyr Script. Ha ilyen bet\u0171ket haszn\u00e1lsz, akkor valami \u00fajat \u00e9s egy kicsit term\u00e9szetes hangulatot viszel a digit\u00e1lis vil\u00e1gba. Egy weboldalon olyan hat\u00e1st keltenek, mintha visszat\u00e9rn\u00e9l a f\u00f6ldre.<\/p>\n\n\n\n A designerek \u00e1ltal\u00e1ban k\u00e9t-h\u00e1rom bet\u0171t\u00edpust kombin\u00e1lnak – melyek k\u00f6z\u00fcl csak az egyik k\u00e9z\u00edr\u00e1sos -, \u00edgy er\u0151s hat\u00e1st tudnak kiv\u00e1ltani, persze csak ha j\u00f3l siker\u00fcl a v\u00e1laszt\u00e1s. Vannak akik k\u00fcl\u00f6nb\u00f6z\u0151 st\u00edlus\u00fa, hangulat\u00fa bet\u0171ket kevernek, melyek mindegyike egy kicsit m\u00e1s \u00e9rz\u00e9st hordoz. Gondosan kell azonban a kombin\u00e1ci\u00f3kat kialak\u00edtani annak \u00e9rdek\u00e9ben, hogy a weboldal ne keltsen z\u0171rzavaros benyom\u00e1st. A bet\u0171t\u00edpusok kiv\u00e1laszt\u00e1s\u00e1r\u00f3l \u00e9s kombin\u00e1l\u00e1s\u00e1r\u00f3l<\/a> itt olvashatsz b\u0151vebben.<\/p>\n\n\n\n A k\u00e9z\u00edr\u00e1sos digit\u00e1lis bet\u0171t\u00edpusokat \u00e1ltal\u00e1ban az alapj\u00e1n k\u00fcl\u00f6nb\u00f6ztetj\u00fck meg, hogy milyen eszk\u00f6zzel \u00edr\u00f3dnak: toll, ceruza, t\u00f6lt\u0151toll, kr\u00e9ta, ecset, stb. <\/p>\n\n\n\n A foly\u00f3\u00edr\u00e1sra az jellemz\u0151, hogy egy folyamatos vonallal \u00edr\u00f3dik, mivel \u00edgy gyorsabb\u00e1 v\u00e1lik az \u00edr\u00e1s, mint ha minden egyes bet\u0171 ut\u00e1n felemeln\u00e9nk a tollat a pap\u00edrr\u00f3l. Digit\u00e1lis v\u00e1ltozatuk is hasonl\u00f3, jellemz\u0151en kifinomult, \u00edvelt bet\u0171kr\u0151l van sz\u00f3. A foly\u00f3\u00edr\u00e1sos bet\u0171t\u00edpusok\u00e9 ugyanakkor ink\u00e1bb csak egy \u00e1ltal\u00e1nos kateg\u00f3ria, melynek nehezen hat\u00e1rozhat\u00f3 meg az egy\u00e9ni karaktere, mert annyif\u00e9le bet\u0171t\u00edpus beleker\u00fcl.<\/p>\n\n\n\n Hab\u00e1r sokak szerint tal\u00e1n nem sokban k\u00fcl\u00f6nb\u00f6zik egy foly\u00f3\u00edr\u00e1sos bet\u0171t\u00edpust\u00f3l, a kalligrafikus bet\u0171t\u00edpusok m\u00e9gis k\u00fcl\u00f6n kateg\u00f3ri\u00e1t k\u00e9peznek. Ezekn\u00e9l ugyanis az egyszer\u0171 k\u00e9z\u00edr\u00e1s a m\u0171v\u00e9szi ig\u00e9nyess\u00e9g ir\u00e1ny\u00e1ba tol\u00f3dik, melynek eredm\u00e9nyek\u00e9nt leny\u0171g\u00f6z\u0151 \u00e9s eleg\u00e1ns megjelen\u00e9st kapunk. <\/p>\n\n\n\n A kr\u00e9t\u00e1val \u00edrt bet\u0171k digit\u00e1lis form\u00e1i a kr\u00e9t\u00e1val h\u00fazott vonalak poros, szemcs\u00e9s text\u00far\u00e1j\u00e1t pr\u00f3b\u00e1lj\u00e1k ut\u00e1nozni. Ezen bel\u00fcl persze mindenf\u00e9le v\u00e1ltozat megtal\u00e1lhat\u00f3, \u00edgy k\u00f6r vagy n\u00e9gyzet alak\u00fa kr\u00e9t\u00e1val \u00edrt, folyamatos vagy szakadozott vonal\u00fa. K\u00fcl\u00f6n\u00f6sen j\u00f3 v\u00e1laszt\u00e1s k\u00e1v\u00e9z\u00f3k, \u00e9ttermek, sz\u00e9ps\u00e9gszalonok sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Az eredm\u00e9nyt befoly\u00e1solja, hogy milyen ecsettel k\u00e9sz\u00fclt a bet\u0171t\u00edpus, de az is, hogy milyen fest\u00e9ket v\u00e1lasztott a tervez\u0151. Mindez rendk\u00edv\u00fcl sok vari\u00e1ci\u00f3t tesz lehet\u0151v\u00e9 az ecsettel \u00edrt bet\u0171t\u00edpusokn\u00e1l.<\/p>\n\n\n\n Ezeket az k\u00fcl\u00f6nb\u00f6zteti meg m\u00e1s k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusokt\u00f3l, hogy a bet\u0171k vonalainak vastags\u00e1ga mindig azonos, ak\u00e1r f\u00fcgg\u0151leges, ak\u00e1r v\u00edzszintes a vonal. <\/p>\n\n\n\n Ezek azok a bet\u0171t\u00edpusok, melyek nagyobb m\u00e9retekn\u00e9l, 14 pt felett kezdenek \u00e9rv\u00e9nyes\u00fclni, enn\u00e9l kisebb m\u00e9retben nem is \u00e9rdemes pr\u00f3b\u00e1lkozni vel\u00fck. Viszont ezekkel lehet tal\u00e1n a legkomolyabb \u00e9rzelmi hat\u00e1st kiv\u00e1ltani a k\u00f6z\u00f6ns\u00e9gben, vagyis az adja a leger\u0151teljesebb karaktert a weboldalunknak, c\u00e9g\u00fcnknek. M\u00e1r ha siker\u00fcl a megfelel\u0151t kiv\u00e1lasztani. Legt\u00f6bbsz\u00f6r bar\u00e1ts\u00e1gosak, vid\u00e1mak, \u00e9s k\u00f6nnyen megragadj\u00e1k az emberek figyelm\u00e9t, ugyanakkor t\u00fal hars\u00e1nyak, \u00edgy \u00f3vatosan kell b\u00e1nni vel\u00fck. Mi lenne a benyom\u00e1sod a Websharkr\u00f3l, ha \u00edgy n\u00e9zne ki a log\u00f3nk?<\/p>\n\n\n Igaz\u00e1n progressz\u00edv, futurisztikus \u00e9s egyben s\u00edlusos bet\u0171t\u00edpusok, intelligenci\u00e1t sug\u00e1roznak. Azt mutatj\u00e1k, hogy a c\u00e9g nem csak itt \u00e9s most van jelen, hanem a j\u00f6v\u0151be tekint, dikt\u00e1lja a trendeket. A modern bet\u0171t\u00edpusok azokat a lehet\u0151s\u00e9geket t\u00fckr\u00f6zik, melyet a holnap hozhat el. Ugyanakkor hidegnek \u00e9s nagyon \u201ctechnikai\u201d jelleg\u0171nek hatnak, mintha csak egy sci-fib\u0151l l\u00e9pn\u00e9nek el\u0151:<\/p>\n\n\n Megk\u00fcl\u00f6nb\u00f6ztethet\u00fcnk m\u00e9g \u00fagynevezett dekorat\u00edv bet\u0171t\u00edpusokat, melyek er\u0151sen stiliz\u00e1ltak, messze \u00e1llnak a h\u00e9tk\u00f6znapit\u00f3l, ugyanakkor j\u00e1t\u00e9koss\u00e1got visznek a designba. A k\u00f6z\u00f6ns\u00e9get megnyugtatj\u00e1k fesztelen, bar\u00e1ts\u00e1gos kisug\u00e1rz\u00e1sukkal. Ugyanakkor minden egyes bet\u0171t\u00edpust egy\u00e9nileg kell meg\u00edt\u00e9lni, mert l\u00e9nyeges k\u00fcl\u00f6nbs\u00e9geket hordoznak, annak ellen\u00e9re, hogy egy csal\u00e1dba tartoznak. Amikor k\u00f6z\u00fcl\u00fck akarunk v\u00e1lasztani, akkor nagyon vesz\u00e9lyes terepre t\u00e9ved\u00fcnk, \u00fagyhogy \u00f3vatosnak kell lenni vel\u00fck, \u00e9s el\u0151re tudni kell, hogy a k\u00f6z\u00f6ns\u00e9g\u00fcnk \u00e9rteni fogja-e, amit ki szeretn\u00e9nk fejezni.<\/p>\n\n\n Tal\u00e1n furcs\u00e1nak t\u0171nik, hogy k\u00fcl\u00f6n kateg\u00f3ri\u00e1t k\u00e9peznek a sz\u00ednes bet\u0171k, ennek ellen\u00e9re l\u00e9tezik, mutatunk is r\u00e1 n\u00e9h\u00e1ny p\u00e9ld\u00e1t. El\u0151bb azonban arr\u00f3l, hogy a sz\u00ednes fontok megjelen\u00e9se az OpenType bet\u0171knek k\u00f6sz\u00f6nhet\u0151, \u00e9s hogy sokan a k\u00f6vetkez\u0151 nagy forradalomk\u00e9nt tekintenek a sz\u00ednes bet\u0171t\u00edpusokra a grafikus designban<\/strong>, illetve \u00fagy l\u00e1tj\u00e1k, hogy megv\u00e1ltoztatja annak a m\u00f3dj\u00e1t, ahogyan ma haszn\u00e1ljuk a tipogr\u00e1fi\u00e1t. <\/p>\n\n\n\n A sz\u00ednes bet\u0171t\u00edpusok r\u00e9v\u00e9n ugyanis m\u00e9g kreat\u00edvabbak lehetnek a designerek, kil\u00e9phetnek az eddigi komfortz\u00f3n\u00e1jukb\u00f3l, amikor c\u00edmsorokat terveznek.<\/p>\n\n\n\n De mi is az a sz\u00ednes bet\u0171t\u00edpus? A sz\u00ednes bet\u0171t\u00edpus, m\u00e1s n\u00e9ven kromatikus bet\u0171t\u00edpus a bet\u0171k egy olyan \u00faj t\u00edpusa, melyek sz\u00ednekkel, text\u00far\u00e1kkal, geometrikus form\u00e1kkal vagy elemekkel teszik izgalmasabb\u00e1 a bet\u0171ket<\/strong>. Az\u00e1ltal j\u00f6ttek l\u00e9tre, hogy az OpenType (OTF) form\u00e1tum SVG elemeket kapott, melynek eredm\u00e9nyek\u00e9nt a sz\u00ednes bet\u0171t\u00edpusok megjelennek OpenType-k\u00e9nt, be\u00e1gyazott OpenType-k\u00e9nt \u00e9s SVG form\u00e1tumban.<\/p>\n\n\n\n De mire is gondolunk sz\u00ednes bet\u0171t\u00edpusk\u00e9nt, amit az eddigi fontok nem tudtak? Ilyesmire:<\/p>\n\n\n\n A sz\u00ednes bet\u0171t\u00edpusokban az a nagyszer\u0171, hogy nem csak sz\u00ednesebb\u00e9 teszik a sz\u00f6veget, hanem egyb\u0151l egy hat\u00e1rozott st\u00edlust is megjelen\u00edtenek. De tal\u00e1n m\u00e9g \u00e9rdekesebb ez a bet\u0171t\u00edpus, ami t\u00e9nyleg rendk\u00edv\u00fcl sz\u00ednesre siker\u00fclt:<\/p>\n\n\n\n A sz\u00ednek mellett azonban geometrikus elemek is megjelenhetnek, \u00edgy nem csak sz\u00ednei, hanem eg\u00e9szen egyedi form\u00e1i is lehetnek a sz\u00ednes bet\u0171knek:<\/p>\n\n\n\n Vagy n\u00e9zz\u00fck, hogy milyen lehet sz\u00ednesben egy k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpus! P\u00e9ld\u00e1ul olyan mint a Candy:<\/p>\n\n\n\n De a sor m\u00e9g hosszan folytathat\u00f3:<\/p>\n\n\n\n Tal\u00e1n ez alapj\u00e1n is l\u00e1tszik, hogy milyen hat\u00e1rtalan lehet\u0151s\u00e9gek rejlenek a sz\u00ednes bet\u0171t\u00edpusokban.<\/p>\n\n\n\n A bet\u0171t\u00edpus befoly\u00e1solja az \u00e9rz\u00e9kel\u00e9s\u00fcnket, azt hogy milyen k\u00e9pet alak\u00edtunk ki egy weboldalr\u00f3l, hogyan alakul a c\u00e9g imidzse.<\/p>\n\n\n A bet\u0171t\u00edpusok felsorol\u00e1s\u00e1n\u00e1l m\u00e1r eml\u00edtett\u00fck a serif \u00e9s sans serif bet\u0171ket, azt azonban nem r\u00e9szletezt\u00fck, hogy ezeknek milyen hat\u00e1sa van az olvas\u00f3kra. A legt\u00f6bben tal\u00e1n sejtik, hogy a tradicion\u00e1lis bet\u0171t\u00edpus megb\u00edzhat\u00f3s\u00e1got jelez, emellett eleg\u00e1ns \u00e9s intelligens hat\u00e1st kelt. Ez\u00e9rt is haszn\u00e1lj\u00e1k az olyan m\u00e1rk\u00e1k, melyek b\u00fcszk\u00e9k a m\u00faltjukra, \u00e9s legal\u00e1bb n\u00e9h\u00e1ny \u00e9vtized az\u00e9rt \u00e1ll is m\u00e1r m\u00f6g\u00f6tt\u00fck.<\/p>\n\n\n\n \n2012-ben a New York Times egyik szerz\u0151je, Errol Morris egy tanulm\u00e1nyban<\/a>\n vizsg\u00e1lta meg az egyes bet\u0171t\u00edpusok \u201cmegb\u00edzhat\u00f3s\u00e1g\u00e1t\u201d. Ehhez \u00edrt egy \ncikket, melyben arr\u00f3l volt sz\u00f3, hogy vajon kell-e agg\u00f3dnunk amiatt, hogy\n a F\u00f6ldet elpuszt\u00edtja egy meteorit becsap\u00f3d\u00e1sa. A l\u00e9nyege az volt, hogy a\n meteoritok nem jelentenek sz\u00e1mottev\u0151 fenyeget\u00e9st r\u00e1nk n\u00e9zve. Ezut\u00e1n \nMorris azt k\u00e9rdezte meg az olvas\u00f3kr\u00f3l, hogy igaznak vagy hamisnak \ngondolj\u00e1k-e ezt az \u00e1ll\u00edt\u00e1st. A k\u00eds\u00e9rlet az volt a dologban, hogy hatf\u00e9le\n bet\u0171t\u00edpust haszn\u00e1lt, egyik olvas\u00f3 az egyikkel \u00edrt sz\u00f6veget kapott, egy \nm\u00e1sik a m\u00e1sikkal. Mint kider\u00fclt, azok az olvas\u00f3k tal\u00e1lt\u00e1k a legnagyobb \nar\u00e1nyban igaznak az \u00e1ll\u00edt\u00e1st, akik Baskerville bet\u0171t\u00edpussal \u00edrt sz\u00f6veget\n kaptak, ami egy igen kifinomult serif bet\u0171t\u00edpus. De \u00e1ltal\u00e1ban a serif \nbet\u0171kkel \u00edrt sz\u00f6veget megb\u00edzhat\u00f3bbnak \u00edt\u00e9lt\u00e9k.\n\n<\/p>\n\n\n\n Egy\u00e9bk\u00e9nt a serif megb\u00edzhat\u00f3s\u00e1g\u00e1t igazolta vissza az is, amikor f\u0151iskolai dolgozatokra adott \u00e9rdemjegyeket vizsg\u00e1ltak, annak f\u00e9ny\u00e9ben, hogy azokat milyen bet\u0171t\u00edpussal \u00edrt\u00e1k. Mint kider\u00fclt, a Terbuchet – ami egy sans-serif bet\u0171t\u00edpus – kapta a legrosszabb min\u0151s\u00edt\u00e9st, m\u00edg a k\u00e9t serif bet\u0171t\u00edpus (a Times New Roman \u00e9s a Georgia) jobban teljes\u00edtett. Vagyis, ha szeretn\u00e9nk nem csak megb\u00edzhat\u00f3ak lenni, hanem annak is l\u00e1tszani, akkor haszn\u00e1ljunk serif bet\u0171ket a landing page-\u00fcnk\u00f6n \u00e9s a call to action sz\u00f6vegeinkn\u00e9l, k\u00fcl\u00f6n\u00f6sen, ha a hihet\u0151s\u00e9gen m\u00falik a konverzi\u00f3.<\/p>\n\n\n\n Ezzel szemben \u00e1llnak a sans serif bet\u0171k, melyekn\u00e9l ugyanakkor nem csak arra kell figyelni, hogy milyen hat\u00e1st keltenek, hanem arra is, hogy \u00e1ltal\u00e1ban rosszabbul olvashat\u00f3k digit\u00e1lis kijelz\u0151k\u00f6n, mint a serifek. Akadnak viszont k\u00f6z\u00f6tt\u00fck j\u00f3l olvashat\u00f3 t\u00edpusok, amire figyelni kell a designn\u00e1l.<\/p>\n\n\n\n Az \u00fagynevezett k\u00f6nny\u0171 bet\u0171t\u00edpusokat \u00e1ltal\u00e1ban a n\u0151iess\u00e9ggel \u00e9s a sz\u00e9ps\u00e9ggel azonos\u00edtjuk. El\u00e9g, ha csak az Avon log\u00f3j\u00e1nak v\u00e9kony, kecses vonalaira gondolunk. Nyilv\u00e1nval\u00f3, hogy a kozmetikai c\u00e9g az\u00e9rt ilyen bet\u0171ket v\u00e1lasztott, mert ezek fejezik ki legjobban a m\u00e1rka n\u0151iess\u00e9g\u00e9t. Ez persze els\u0151re tal\u00e1n nem mindenki sz\u00e1m\u00e1ra nyilv\u00e1nval\u00f3, de ha egy kicsit is m\u00f3dos\u00edtunk a log\u00f3n, m\u00e1ris \u00e9rezhet\u0151, hogy v\u00e1ltozik a hat\u00e1sa. Ebb\u0151l is l\u00e1tszik, hogy az apr\u00f3 r\u00e9szletek mennyire fontosak.<\/p>\n\n\n\n Kutat\u00e1sok szerint az emberek jobban kedvelik a lekerek\u00edtett form\u00e1kat, mint az \u00e9les sz\u00f6geket bez\u00e1r\u00f3kat. Mi\u00e9rt? A v\u00e1laszt valahol a v\u00e9delmi \u00f6szt\u00f6n\u00f6kn\u00e9l kell keresni. A hegyes \u00e9s sz\u00far\u00f3s dolgok a term\u00e9szetben vagy ak\u00e1r a t\u00e1rgyaink k\u00f6z\u00f6tt nem biztons\u00e1gosak. V\u00e1gnak, sz\u00farnak, vesz\u00e9lyesek lehetnek. Vagyis fenyeget\u00e9st jelentenek.<\/p>\n\n\n\n Ez az \u00e9rz\u00e9s pedig akkor is megjelenik, ha csak a kijelz\u0151n l\u00e1tjuk \u0151ket. A vesz\u00e9ly \u00e9rz\u00e9s\u00e9t v\u00e1ltj\u00e1k ki, ugyanakkor f\u00e9rfiass\u00e1got \u00e9s tart\u00f3ss\u00e1got is jeleznek. Vagyis akkor is remek\u00fcl haszn\u00e1lhat\u00f3, ha a designba egy kis izgalmat szeretn\u00e9nk csemp\u00e9szni. Ezzel azonban \u00f3vatosan kell b\u00e1nni, \u00e9s csak a megfelel\u0151 helyen alkalmazni. Ha a m\u00e1rk\u00e1ddal ink\u00e1bb puhas\u00e1got, nyugalmat, n\u0151iess\u00e9get, sz\u00e9ps\u00e9get, k\u00e9nyelmet akarsz kifejezni, akkor lekerek\u00edtett bet\u0171ket haszn\u00e1lj.<\/p>\n\n\n\n A kisbet\u0171s szavak \u00e1ltal\u00e1ban egy\u00fctt\u00e9rz\u00e9st keltenek, de utalhatnak innov\u00e1ci\u00f3ra is. Teh\u00e1t kisbet\u0171s sz\u00f6vegek j\u00f3l haszn\u00e1lhat\u00f3k olyan c\u00e9gekn\u00e9l, melyek gondoskodnak az emberekr\u0151l, ugyanakkor haszn\u00e1lhat\u00f3k olyan m\u00e1rk\u00e1kn\u00e1l is, melyek sok \u00faj \u00f6tlettel \u00e1llnak el\u0151.<\/p>\n\n\n\n K\u00f6nnyebben \u00e9rthet\u0151 a dolog, ha mindj\u00e1rt \u00f6ssze is vetj\u00fck a nagybet\u0171s sz\u00f6vegek \u00e1ltal keltett hat\u00e1ssal. Ezek \u00e1ltal\u00e1ban er\u0151t sug\u00e1roznak, az olyan \u00f3ri\u00e1s c\u00e9gek, mint a BMW, a Nike, a Sony mind nagybet\u0171s log\u00f3t haszn\u00e1lnak, hogy hangs\u00falyozz\u00e1k erej\u00fcket, energi\u00e1jukat, siker\u00fcket \u00e9s befoly\u00e1sukat.<\/p>\n\n\n\n A s\u0171r\u0171n szedett bet\u0171k \u00e1ltal\u00e1ban a korl\u00e1tozott t\u00e9rre, fesz\u00fclts\u00e9gre, percizit\u00e1sra utalnak, zs\u00fafolts\u00e1got, korl\u00e1tozotts\u00e1got jeleznek. Ezzel szemben az elny\u00fajtott bet\u0171k nyugalmat \u00e9s szabad teret fejeznek ki. A sz\u00e9les bet\u0171t\u00edpusok k\u00f6nnyebb\u00e9 teszik a designt, \u00e9s hagyj\u00e1k l\u00e9legezni. \u00c1ltal\u00e1ban olyan m\u00e1rk\u00e1k haszn\u00e1lj\u00e1k ezeket, melyek az emberek sz\u00e1m\u00e1ra pozit\u00edv \u00e9rz\u00e9st akarnak k\u00f6zvet\u00edteni.<\/p>\n\n\n\n Az alacsony bet\u0171k \u00e1ltal\u00e1ban stabilit\u00e1st, szil\u00e1rds\u00e1got, t\u00f6meget fejeznek ki, m\u00edg a magas bet\u0171k k\u00f6nny\u0171s\u00e9get \u00e9s luxust, ez\u00e9rt is jelennek meg luxusm\u00e1rk\u00e1kn\u00e1l oly gyakran. Sokan a magas bet\u0171ket a n\u00f6veked\u00e9ssel, a sikerrel kapcsolj\u00e1k \u00f6ssze. <\/p>\n\n\n\n A kiv\u00e1laszt\u00e1sn\u00e1l figyelembe kell venni, hogy nem csak az sz\u00e1m\u00edt, hogy egy-egy bet\u0171t\u00edpus melyik csal\u00e1dba tartozik, hiszen a k\u00f6z\u00f6ns\u00e9g\u00fcnkre az is hat\u00e1ssal van, hogy mennyire ismerik m\u00e1r az adott bet\u0171t\u00edpust. Min\u00e9l t\u00f6bbsz\u00f6r tal\u00e1lkoztak m\u00e1r vele, ann\u00e1l jobban megb\u00edznak benned, illetve az \u00fczenetben, amit k\u00f6zvet\u00edteni akarsz fel\u00e9j\u00fck.<\/p>\n\n\n\n Ez az oka annak, hogy b\u00e1r megsz\u00e1ml\u00e1lhatatlan bet\u0171t\u00edpus k\u00f6z\u00fcl v\u00e1laszthatunk, a tervez\u0151k majdnem mindig ugyanazon p\u00e1r t\u00edpus k\u00f6z\u00fcl v\u00e1logatnak. Nem musz\u00e1j persze nek\u00fcnk is mindig Helvetic\u00e1val \u00edrni, ugyanakkor aj\u00e1nlott olyan bet\u0171t\u00edpust v\u00e1lasztani, melyet mondjuk a Helvetica inspir\u00e1lt, teh\u00e1t eg\u00e9szen hasonl\u00f3 hozz\u00e1, m\u00e9gsem ugyanaz.<\/p>\n\n\n\n Mindez, amir\u0151l besz\u00e9lt\u00fcnk, els\u0151sorban a log\u00f3k bet\u0171ire, esetleg c\u00edmekre, leadekre igaz, teh\u00e1t nem a teljes sz\u00f6vegre. A keny\u00e9rsz\u00f6veg sokszor olvashatatlann\u00e1 v\u00e1lik a nagyon eredeti, szokatlan bet\u0171t\u00edpusokt\u00f3l, vagyis nem aj\u00e1nlott \u0151ket hossz\u00fa sz\u00f6vegek eset\u00e9ben alkalmazni.<\/p>\n\n\n\n Akad n\u00e9h\u00e1ny olyan alapvet\u0151 szab\u00e1ly, melyet mindenk\u00e9ppen \u00e9rdemes betartanod:<\/p>\n\n\n\n Az els\u0151 dolog, amit a weboldaladon haszn\u00e1l bet\u0171t\u00edpusok kiv\u00e1laszt\u00e1s\u00e1n\u00e1l meg kell fontolni, hogy passzolnak-e a m\u00e1rk\u00e1dhoz. Meg kell \u00e9rteni, hogy nem kiz\u00e1r\u00f3lag annak kell meghat\u00e1roznia a bet\u0171t\u00edpus-v\u00e1laszt\u00e1s, hogy \u00e9pp mi a trend a webdesignban, vagy Neked mi tetszik. A m\u00e1rk\u00e1d \u00e9s az ipar\u00e1gad lesz\u0171k\u00edti a kiv\u00e1laszthat\u00f3 bet\u0171t\u00edpusok k\u00f6r\u00e9t.<\/p>\n\n\n\n Ha van m\u00e1r van m\u00e1rka\u00e9p\u00edt\u00e9si \u00fatmutat\u00f3d, akkor azt kell k\u00f6vetned, \u00e9s az alapj\u00e1n kell kiv\u00e1lasztanod a megfelel\u0151 bet\u0171t\u00edpusokat. Ez feltehet\u0151en tartalmazza az inform\u00e1ci\u00f3kat a haszn\u00e1lhat\u00f3 sz\u00ednekr\u0151l, a log\u00f3r\u00f3l \u00e9s a tipogr\u00e1fi\u00e1r\u00f3l.<\/p>\n\n\n\n M\u00e1sr\u00e9szt, amikor bet\u0171t\u00edpus-v\u00e1laszt\u00e1sra ker\u00fcl a sor, mindig \u00e9rdemes \u00e1tgondolni, hogy kikb\u0151l \u00e1ll az oldal k\u00f6z\u00f6ns\u00e9ge (b\u00e1r ez kapcsol\u00f3dik az ipar\u00e1ghoz). A bet\u0171k k\u00f6z\u00f6tt akadnak bar\u00e1ts\u00e1gos, vicces, komoly, \u00fczleti jelleg\u0171ek, melyek csak bizonyos hangulat\u00fa webdesignba illeszthet\u0151k bele. Ha egy bet\u0171t\u00edpus nem megfelel\u0151en illeszkedik, akkor a k\u00f6z\u00f6ns\u00e9ged \u00f6sszezavarod.<\/p>\n\n\n\n A legegyszer\u0171bb p\u00e9lda: ha egy vid\u00e1m bet\u0171t\u00edpust haszn\u00e1lsz az \u00fczleti weboldaladon. Ilyenkor a k\u00f6z\u00f6ns\u00e9g nem fog megb\u00edzni benned. Viszont egy fiatalabb k\u00f6z\u00f6ns\u00e9g sz\u00e1m\u00e1ra a hivatalosnak hat\u00f3 bet\u0171t\u00edpusok unalmasak lehetnek.<\/p>\n\n\n\n Hab\u00e1r nagyon sok t\u00e9nyez\u0151t kell figyelembe venni egy bet\u0171t\u00edpus kiv\u00e1laszt\u00e1sakor, semmi sem olyan fontos, mint a bet\u0171t\u00edpus szem\u00e9lyis\u00e9ge. Hiszen minden bet\u0171t\u00edpus valamilyen hangulatot, \u00e9rz\u00e9st k\u00f6zvet\u00edt a l\u00e1togat\u00f3k ir\u00e1ny\u00e1ba. <\/p>\n\n\n\n Amikor szem\u00e9lyis\u00e9gr\u0151l van sz\u00f3, akkor k\u00e9t lehet\u0151s\u00e9g k\u00f6z\u00fcl v\u00e1laszthatsz:<\/p>\n\n\n\n Lehet, hogy az elk\u00e9pzel\u00e9seidben valami egyedi, figyelemfelh\u00edv\u00f3 bet\u0171t\u00edpussal \u00edrt sz\u00f6veg \u00e9l, amire felkapj\u00e1k a fej\u00fcket az emberek. De \u00e9rdemes egy kicsit visszafogottnak lenni, amikor bet\u0171t\u00edpus v\u00e1laszt\u00e1s\u00e1r\u00f3l van sz\u00f3. Megint arr\u00f3l van sz\u00f3, hogy igazodni kell a m\u00e1rk\u00e1dhoz, az eddigi megjelen\u00e9s\u00e9hez, az ipar\u00e1gban megszokott designhoz. Ha nem \u00edgy teszel, az megzavarja az embereket.<\/p>\n\n\n\n Teh\u00e1t, ha p\u00e9ld\u00e1ul voltak m\u00e1r nyomtatott anyagaid, vagy egy kor\u00e1bbi weboldalad j\u00f3l eltal\u00e1lt bet\u0171kkel, akkor \u00e9rdemes azokn\u00e1l maradni. Ha v\u00e1ltoztatsz is, akkor is olyan bet\u0171t\u00edpusokat v\u00e1lassz, melyek hasonl\u00f3ak a kor\u00e1bban \u00e9s m\u00e1shol haszn\u00e1ltakhoz.<\/p>\n\n\n\n Mint arr\u00f3l a k\u00e9s\u0151bbiekben sz\u00f3 lesz, egy weboldalon t\u00f6bb bet\u0171t\u00edpust is lehet haszn\u00e1lni. Ha Te is ezt tervezed, akkor viszont \u00e9rdemes el\u0151re \u00e1tgondolni, hogy vajon mindkett\u0151 „ugyanazt \u00fczeni”, \u00e9s hogy mik\u00e9nt alakul ezek hierarchi\u00e1ja. <\/p>\n\n\n\n A c\u00edmekbe az els\u0151dleges bet\u0171t\u00edpusok ker\u00fclnek, ezekre ir\u00e1nyul a legnagyobb figyelem. Ezeknek kell a legink\u00e1bb illeszkednie a m\u00e1rk\u00e1hoz \u00e9s a log\u00f3hoz. A m\u00e1sodlagos bet\u0171t\u00edpusok \u00e1ltal\u00e1ban a sz\u00f6vegt\u00f6rzsben jelennek meg, azaz a blogbejegyz\u00e9sek, cikkek, le\u00edr\u00e1sok sz\u00f6vegek\u00e9nt. Itt a f\u0151 c\u00e9l az olvashat\u00f3s\u00e1g, \u00fagyhogy nem kell figyelemfelh\u00edv\u00f3nak lennie.<\/p>\n\n\n\n V\u00e9g\u00fcl pedig haszn\u00e1lhatsz m\u00e9g egy harmadik bet\u0171t\u00edpust is, olyan elemekn\u00e9l, melyekre fel kell h\u00edvni a l\u00e1togat\u00f3k figyelm\u00e9t: ilyen lehet p\u00e9ld\u00e1ul a CTA. Ennek olyan bet\u0171nek kellene lennie, mely \u00f6nmag\u00e1ban k\u00e9pes mag\u00e1t megk\u00fcl\u00f6nb\u00f6ztetni a t\u00f6bbi, oldalon haszn\u00e1lt bet\u0171t\u00edpust\u00f3l.<\/p>\n\n\n\n Az olvashat\u00f3s\u00e1g jav\u00edt\u00e1sa \u00e9rdek\u00e9ben ker\u00fcld az olvashatatlan bet\u0171t\u00edpusokat, mint amilyenek p\u00e9ld\u00e1ul a k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusok. Ez al\u00f3l csak n\u00e9h\u00e1ny kiv\u00e9teles esetben \u00e9rdemes elt\u00e9rni, \u00e9s ilyenkor lehet d\u00edszesebb bet\u0171t\u00edpusokat haszn\u00e1lni. A legjobban olvashat\u00f3 bet\u0171t\u00edpusok jellemz\u0151en nem vonj\u00e1k magukra a figyelmet, majdhogynem l\u00e1thatatlanok, egyszer\u0171en csak m\u0171k\u00f6dnek.<\/p>\n\n\n\n A m\u00e9retet tekintve a 12 pontos m\u00e9ret t\u0171nik ide\u00e1lisnak, ha olvashat\u00f3s\u00e1gr\u00f3l van sz\u00f3. Ak\u00e1r nagyobb, ak\u00e1r kisebb a bet\u0171 m\u00e9rete, n\u0151ni fog az olvas\u00e1si id\u0151. A Wichita State University nyolc bet\u0171t\u00edpus eset\u00e9ben vizsg\u00e1lta<\/a> a m\u00e9retek hat\u00e1s\u00e1t, m\u00e9gpedig a 10, a 12 \u00e9s a 14 pontos m\u00e9retek eset\u00e9ben.<\/p>\n\n\n\n Mint kider\u00edtett\u00e9k, a 12 pontos bet\u0171m\u00e9ret eredm\u00e9nyezte a legnagyobb olvas\u00e1si sebess\u00e9get. A gond ezzel csak az, hogy egy 12 pontos bet\u0171t\u00edpus a k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9ret\u0171 \u00e9s felbont\u00e1s\u00fa kijelz\u0151k\u00f6n m\u00e1s \u00e9s m\u00e1s m\u00e9retet jelent centiben m\u00e9rve. Erre a bejegyz\u00e9s v\u00e9g\u00e9n, egy k\u00fcl\u00f6n fejezetben m\u00e9g visszat\u00e9r\u00fcnk!<\/p>\n\n\n\n Ez alatt azt \u00e9rtj\u00fck, hogy a bet\u0171t\u00edpus ne csak a weboldaladon mutasson j\u00f3l, hanem minden olyan felhaszn\u00e1l\u00e1si ter\u00fcleten, ahol tervezed a megjelentet\u00e9s\u00e9t. \u00cdgy a k\u00fcl\u00f6nb\u00f6z\u0151 digit\u00e1lis \u00e9s offline megjelen\u00e9sekn\u00e9l is. <\/p>\n\n\n\n Az olvashat\u00f3s\u00e1g azonban jelent\u0151s m\u00e9rt\u00e9kben att\u00f3l is f\u00fcgg, hogy mekkora a t\u00e1vols\u00e1g, a bet\u0171k, a szavak \u00e9s a sorok k\u00f6z\u00f6tt. A white space<\/a> hi\u00e1nya rontja az olvashat\u00f3s\u00e1got. P\u00e9ld\u00e1ul, ha az egyes szavak t\u00fal k\u00f6zel ker\u00fclnek egym\u00e1shoz, akkor nehezebb \u0151ket felismerni. A megfelel\u0151 white space r\u00e9v\u00e9n viszont sokkal kellemesebb lesz a szemnek egy sz\u00f6veg l\u00e1tv\u00e1nya. Term\u00e9szetesen a t\u00fal nagy negat\u00edv t\u00e9r sem j\u00f3, hiszen akkor sz\u00e9tesik a sz\u00f6veg.<\/p>\n\n\n\n A sork\u00f6z eset\u00e9ben m\u00e1r eg\u00e9szen kis v\u00e1ltoztat\u00e1sok is komoly k\u00fcl\u00f6nbs\u00e9get tudnak eredm\u00e9nyezni. A sork\u00f6z\u00f6k megn\u00f6vel\u00e9s\u00e9vel v\u00e1lik kell\u0151en szell\u0151ss\u00e9 a sz\u00f6veg, m\u00e1rpedig kev\u00e9s olyan ember van, aki a s\u0171r\u0171n egym\u00e1sra r\u00f3tt sorok zs\u00fafolts\u00e1g\u00e1val szeret tart\u00f3san szembes\u00fclni. A sort\u00e1vols\u00e1g k\u00fcl\u00f6n\u00f6sen fontos t\u00e9nyez\u0151 mobilos megjelen\u00e9sn\u00e9l, ahol maxim\u00e1lis sort\u00e1vols\u00e1gokat \u00e9rdemes kialak\u00edtani a k\u00f6nny\u0171 olvashat\u00f3s\u00e1g \u00e9rdek\u00e9ben.<\/p>\n\n\n\n A sorok t\u00e1vols\u00e1g\u00e1t a sz\u00f6veg m\u00e9rete, a sz\u00f6vegek mennyis\u00e9ge, a bet\u0171k st\u00edlusa, a kijelz\u0151 sz\u00e9less\u00e9ge hat\u00e1rozza meg. Az al\u00e1bbi szab\u00e1lyokat \u00e9rdemes figyelembe venni:<\/p>\n\n\n\n A nagy, kerek bet\u0171ket sokkal k\u00f6nnyebb olvasni, mint a sz\u0171k, s\u0171r\u0171 bet\u0171t\u00edpusokat. A sz\u00e9lesebb bet\u0171t\u00edpusokkal \u00edrt sz\u00f6veget k\u00f6nnyebben el tudod olvasni, mivel k\u00f6nnyebben elk\u00fcl\u00f6n\u00edthet\u0151k a bet\u0171k. Amikor a gyerekek olvasni \u00e9s \u00edrni tanulnak, akkor tipikusan ilyen bet\u0171ket haszn\u00e1lnak, \u00e9s ezek egy \u00e9letre bele\u00e9gnek az agyukba.<\/p>\n\n\n\n A bet\u0171k magass\u00e1ga – els\u0151sorban kisbet\u0171kn\u00e9l – alapvet\u0151en meghat\u00e1rozza, hogy milyen k\u00f6nny\u0171 a felhaszn\u00e1l\u00f3knak befogadnia a tartalmaidat. Ann\u00e1l k\u00f6nnyebb a sz\u00f6vegeket olvasni, min\u00e9l kisebb a k\u00fcl\u00f6nbs\u00e9g a nagybet\u0171id \u00e9s kisbet\u0171id magass\u00e1ga k\u00f6z\u00f6tt. Ez\u00e9rt olyan bet\u0171t\u00edpusokat \u00e9rdemes keresned, ahol az x-magass\u00e1g k\u00e9tharmada-h\u00e1romnegyede a nagybet\u0171k magass\u00e1g\u00e1nak.<\/p>\n\n\n\n Itt egyr\u00e9szt a v\u00e1lasztott bet\u0171t\u00edpusok k\u00f6z\u00f6tti kontrasztr\u00f3l, m\u00e1sr\u00e9szt a sz\u00ednek kontrasztj\u00e1r\u00f3l is sz\u00f3 van. <\/p>\n\n\n\n Lehet, hogy bizonyos esetekben j\u00f3l n\u00e9z ki a minim\u00e1lis kontraszt a h\u00e1tt\u00e9r \u00e9s a sz\u00f6veg k\u00f6z\u00f6tt, de nem felhaszn\u00e1l\u00f3bar\u00e1t \u00e9s megnehez\u00edti az olvas\u00e1st. Pedig a tartalom teszi k\u00fcl\u00f6nlegess\u00e9 \u00e9s fontoss\u00e1 a weboldaladat. Ez\u00e9rt n\u00f6veld a kontrasztot a megfelel\u0151 sz\u00ednek, \u00e9s a kell\u0151en vastag bet\u0171k v\u00e1laszt\u00e1s\u00e1val, \u00edgy az emberek k\u00f6nnyebben olvass\u00e1k majd a sz\u00f6vegeidet.<\/p>\n\n\n\n Ez az oka annak is, hogy mi\u00e9rt a fekete-feh\u00e9r (illetve vil\u00e1gos h\u00e1tt\u00e9r) p\u00e1ros\u00edt\u00e1s a legelterjedtebb. Min\u00e9l t\u00f6bb a sz\u00f6veg a weboldaladon, ann\u00e1l fontosabb a megfelel\u0151 kontraszt kialak\u00edt\u00e1sa. Ha m\u00e1r mereszteni kell a szemed a sz\u00f6vegre, akkor val\u00f3sz\u00edn\u0171leg t\u00fal kicsi a kontraszt (esetleg t\u00fal kicsik vagy v\u00e9konyak a bet\u0171k).<\/p>\n\n\n\n Sokak szerint a sz\u00edneknek semmi keresnival\u00f3juk a tipogr\u00e1fi\u00e1ban, m\u00e1sok szerint viszont elengedhetetlen r\u00e9sz\u00e9t k\u00e9pezik egy j\u00f3 designnak. Itt alapvet\u0151en \u00edzl\u00e9sbeli vit\u00e1r\u00f3l van sz\u00f3, hiszen sz\u00ednes tipogr\u00e1fia l\u00e9tezik, \u00e9s r\u00e1ad\u00e1sul m\u0171k\u00f6dni is tud.<\/p>\n\n\n\n A sz\u00ednek \u00e9rzelmeket v\u00e1lthatnak ki az emberekb\u0151l, \u00e9s arra is alkalmasak, hogy felh\u00edvj\u00e1k bizonyos r\u00e9szekre a figyelmet. Minden sz\u00edn \u00fczenetet k\u00f6zvet\u00edt a felhaszn\u00e1l\u00f3k fel\u00e9, mivel hat\u00e1st gyakorolnak az elm\u00e9j\u00fckre \u00e9s a viselked\u00e9s\u00fckre.<\/p>\n\n\n\n Ugyanakkor ezen el\u0151ny\u00f6k kihaszn\u00e1l\u00e1s\u00e1hoz alaposan \u00e1t kell gondolni, hogy mikor \u00e9s milyen sz\u00edneket haszn\u00e1lsz, mert k\u00f6nny\u0171 sz\u00ednes k\u00e1ossz\u00e1 tenni a weboldalad a sz\u00ednes bet\u0171k r\u00e9v\u00e9n. Amikor teh\u00e1t sz\u00edneket akarsz haszn\u00e1lni az al\u00e1bbiakat gondold v\u00e9gig:<\/p>\n\n\n\n A trendek k\u00f6vet\u00e9se azt jelenti, hogy valami friss \u00e9s izgalmas dolog jelenik meg a weboldaladon, melyre felkapj\u00e1k a fej\u00fcket a l\u00e1togat\u00f3k. Ha bet\u0171kn\u00e9l pr\u00f3b\u00e1lsz ilyen ir\u00e1nyba elmozdulni, akkor a legjobb, ha a c\u00edmsorokn\u00e1l \u00e9s alc\u00edmekn\u00e9l pr\u00f3b\u00e1lod ki a divatos bet\u0171t\u00edpusokat. A sz\u00f6vegt\u00f6rzsn\u00e9l ugyanis fontos az olvashat\u00f3s\u00e1g, amit nem \u00e9rdemes fel\u00e1ldozni egy st\u00edlusosabbnak t\u0171n\u0151 bet\u0171t\u00edpus\u00e9rt.<\/p>\n\n\n\n Ha egy nagyon trendi vagy extr\u00e9m bet\u0171t\u00edpust er\u0151ltetsz a sz\u00f6vegt\u00f6rzsben, akkor az hossz\u00fa t\u00e1von nagyobb k\u00e1rt okoz, mint amennyi el\u0151nyt jelent. \u00c1ltal\u00e1ban a weboldalak viszonylag hossz\u00fa t\u00e1vra k\u00e9sz\u00fclnek, teh\u00e1t a bet\u0171knek is id\u0151t\u00e1ll\u00f3nak kell lenni\u00fck. <\/p>\n\n\n\n Na de akkor milyen bet\u0171t\u00edpust is v\u00e1lasszunk abb\u00f3l a d\u00f6bbenetes mennyis\u00e9gb\u0151l, ami ak\u00e1r csak egy Microsoft Word dokumentum meg\u00edr\u00e1sakor is rendelkez\u00e9s\u00fcnkre \u00e1ll. A legjobb, ha az elterjedt, alapvet\u0151 fontokat haszn\u00e1ljuk, m\u00edg a k\u00fcl\u00f6nleges, egyedi bet\u0171t\u00edpusokat megtartjuk a log\u00f3 sz\u00e1m\u00e1ra. Az alapvet\u0151 bet\u0171t\u00edpusok eset\u00e9ben olyanokr\u00f3l van sz\u00f3, mint az Arial, a Verdana, a Trebuchet, vagy p\u00e9ld\u00e1ul a Georgia.<\/p>\n\n\n\n Tov\u00e1bbi javaslat, hogy egy weboldalon bel\u00fcl c\u00e9lszer\u0171 m\u00e9rs\u00e9kelt sz\u00e1mban haszn\u00e1lni a k\u00fcl\u00f6nb\u00f6z\u0151 bet\u0171t\u00edpusokat. Ha t\u00fal sokf\u00e9l\u00e9t haszn\u00e1lunk, az zavarosnak fog t\u0171nni, \u00e9s t\u00f6nkreteheti az eg\u00e9sz oldal st\u00edlus\u00e1t. A t\u00fal sok bet\u0171t\u00edpus haszn\u00e1lata t\u00falterheli az embereket, mert nehezebb befogadni egy ilyen sz\u00f6veget, de ideges\u00edt\u0151 is. Ez\u00e9rt elegend\u0151 mind\u00f6ssze k\u00e9t bet\u0171t\u00edpus-csal\u00e1dot kiv\u00e1lasztani, \u00e9s megmaradni ezek haszn\u00e1lat\u00e1n\u00e1l. \u00c9rdemes cs\u00ednj\u00e1n b\u00e1nni a d\u0151lt bet\u0171s vagy vastag\u00edtott r\u00e9szekkel is. Mert ezek ugyan kiemelhetnek fontos r\u00e9szeket, melyekre fel akarod h\u00edvni a figyelmet, azonban, ha t\u00fal sokat haszn\u00e1lod \u0151ket, akkor ink\u00e1bb z\u0171rzavarosnak fog t\u0171nni a sz\u00f6veg.<\/p>\n\n\n\n Friss\u00edtve, 2022.08.17.:<\/em><\/p>\n\n\n\n Ha a vari\u00e1ci\u00f3kat is belesz\u00e1m\u00edtjuk, akkor jelenleg mintegy 834 ezer<\/a> k\u00fcl\u00f6nb\u00f6z\u0151 bet\u0171t\u00edpus \u00e9rhet\u0151 el online. Ebb\u0151l a k\u00edn\u00e1latb\u00f3l m\u00e1r egyetlen bet\u0171t\u00edpus kiv\u00e1laszt\u00e1sa sem egyszer\u0171 dolog, de az igazi kih\u00edv\u00e1s, amikor k\u00e9t-h\u00e1rom bet\u0171t\u00edpust akarsz haszn\u00e1lni a weboldaladon. Ennek eredm\u00e9nye id\u0151nk\u00e9nt ijeszt\u0151.<\/p>\n\n\n\n Amikor bet\u0171t\u00edpust v\u00e1lasztasz a weboldaladra, a legfontosabb feladat, hogy m\u00e9rs\u00e9keld a lehet\u0151s\u00e9gek k\u00f6r\u00e9t, mely mint l\u00e1ttuk, el\u00e9g sz\u00e9les. Ennek ellen\u00e9re persze a v\u00e1laszt\u00e1s \u00e9s a p\u00e1ros\u00edt\u00e1s alapvet\u0151en ink\u00e1bb tal\u00e1lgat\u00e1snak t\u0171nhet: kiv\u00e1lasztasz egy bet\u0171t\u00edpust, elhelyezed a designban, megn\u00e9zed, hogy passzol-e a hozz\u00e1, azt\u00e1n n\u00e9zed a k\u00f6vetkez\u0151 bet\u0171t\u00edpust. \u00dajra \u00e9s \u00fajra. Mindenesetre az al\u00e1bbi tan\u00e1csok r\u00e9v\u00e9n egy kicsit egyszer\u0171s\u00edtheted a helyzetet.<\/p>\n\n\n\n Ha magyar nyelv\u0171 (is) a weboldalad, akkor ez a krit\u00e9rium er\u0151sen besz\u0171k\u00edti a lehet\u0151s\u00e9gek k\u00f6r\u00e9t egyes \u00e9kezetes karakterek megjelen\u00edt\u00e9se miatt. De ha m\u00e1s nyelveken is meg akarod jelen\u00edteni a weboldalad, akkor azokn\u00e1l is ellen\u0151rizni kell a megjelen\u00e9s helyess\u00e9g\u00e9t. Rendk\u00edv\u00fcl speci\u00e1lis helyzetek ad\u00f3dhatnak az egyes nyelveket tekintve, arr\u00f3l nem is besz\u00e9lve, hogy akadnak olyan felhaszn\u00e1l\u00f3k, akik a b\u00f6ng\u00e9sz\u0151 be\u00e9p\u00edtett ford\u00edt\u00f3j\u00e1val leford\u00edtj\u00e1k az oldalt, \u00e9s ilyenkor mindj\u00e1rt megjelenhetnek furcsas\u00e1gok.<\/p>\n\n\n\n Szint\u00e9n megsz\u0171ri a v\u00e1laszthat\u00f3 bet\u0171t\u00edpusok list\u00e1j\u00e1t, ha arra t\u00f6reksz\u00fcnk, hogy bizonyos bet\u0171k \u00e9s sz\u00e1mok j\u00f3l megk\u00fcl\u00f6nb\u00f6ztethet\u0151k legyenek. Ilyen az 1-es sz\u00e1m, a kis l \u00e9s a nagy L bet\u0171. Ezek bizonyos minimalista, jellemz\u0151en sans serif bet\u0171n\u00e9l el\u00e9gg\u00e9 egyform\u00e1k, gyakorlatilag mindegyik egyetlen f\u00fcgg\u0151leges vonal lehet, mint p\u00e9ld\u00e1ul a Gil Sans eset\u00e9ben. Ez k\u00fcl\u00f6n\u00f6sen akkor l\u00e9nyeges t\u00e9nyez\u0151, ha fontos a sz\u00e1mok j\u00f3 megjelen\u00edt\u00e9se az oldalon, mert mondjuk valami p\u00e9nz\u00fcgyi vagy eg\u00e9szs\u00e9g\u00fcgyi oldalr\u00f3l van sz\u00f3. <\/p>\n\n\n\n Induljunk ki abb\u00f3l, hogy mik\u00f6zben egy weboldalon igaz\u00e1b\u00f3l nincs sz\u00fcks\u00e9g t\u00f6bb bet\u0171t\u00edpus kombin\u00e1l\u00e1s\u00e1ra – hiszen egyetlen bet\u0171t\u00edpus haszn\u00e1lat\u00e1val is kialak\u00edthat\u00f3 a megfelel\u0151 hierarchia \u00e9s \u00e1tadhat\u00f3 az \u00fczenet – m\u00e9gis nagyon kev\u00e9s olyan weboldalt tal\u00e1lunk, ahol csak egyetlen bet\u0171t\u00edpus jelenik meg. Ez az\u00e9rt van, mert a log\u00f3ban \u00e1ltal\u00e1ban el\u0151fordulnak bet\u0171k, melyek egyfajta bet\u0171t\u00edpussal \u00edr\u00f3dtak, \u00e9s szinte biztos, hogy az oldalnak van egy sz\u00f6veges tartalma, ami viszont egy m\u00e1sik bet\u0171t\u00edpussal (mivel a log\u00f3n\u00e1l haszn\u00e1lt bet\u0171k \u00e1ltal\u00e1ban nem m\u0171k\u00f6dnek a sz\u00f6vegt\u00f6rzs eset\u00e9ben).<\/p>\n\n\n\n \u00d6k\u00f6lszab\u00e1ly szerint h\u00e1romn\u00e1l t\u00f6bb bet\u0171t\u00edpust nem szabad haszn\u00e1lni egy weboldalon. Vagyis, ha a log\u00f3ban kap helyet az egyik, akkor m\u00e1r csak kett\u0151t kombin\u00e1lhatunk. \u00c1ltal\u00e1ban ezek k\u00f6z\u00fcl az egyik a sz\u00f6vegt\u00f6rzsnek jut, a m\u00e1sik pedig a c\u00edmsoroknak, hogy kell\u0151en kiemelkedjenek, amikor a felhaszn\u00e1l\u00f3 \u00e1tfutja az oldalunkat.<\/p>\n\n\n\n Persze a c\u00edmsor kiemelhet\u0151 ak\u00e1r sz\u00ednnel vagy m\u00e9rettel, \u00edgy nem musz\u00e1j ehhez egy m\u00e1sik bet\u0171t\u00edpust felhaszn\u00e1lni. Arr\u00f3l nem is besz\u00e9lve, hogy egy bet\u0171t\u00edpusnak m\u00e9rete is van, egy \u00fajabb http-lek\u00e9r\u00e9st jelent, vagyis az oldal bet\u00f6lt\u00e9s\u00e9t lass\u00edtja. \u00cdgy \u00f6sszess\u00e9g\u00e9ben elmondhat\u00f3, hogy min\u00e9l kevesebb bet\u0171t\u00edpust tudunk haszn\u00e1lni, ann\u00e1l jobb.<\/p>\n\n\n\n Alapvet\u0151en azonban arr\u00f3l van sz\u00f3, hogy a c\u00edmsorok kapnak egy bet\u0171t\u00edpus, illetve egy m\u00e1sikat a sz\u00f6vegt\u00f6rzs. El\u0151bbi eset\u00e9ben a m\u00e9ret \u00e9s a kis terjedelem miatt elfogadhat\u00f3 lehet egy \u00edrott, dekorat\u00edv bet\u0171t\u00edpus – \u00edgy csak ezek k\u00f6z\u00fcl kell v\u00e1logatni -, mely azt\u00e1n meg is hat\u00e1rozza az oldal szem\u00e9lyis\u00e9g\u00e9t, designj\u00e1t. A m\u00e1sik bet\u0171, mely a sz\u00f6vegt\u00f6rzsben szerepel, egy egyszer\u0171, mindennapi v\u00e1laszt\u00e1s lehet, valamilyen sans serif (serif vagy slab serif m\u00e1r \u00fctk\u00f6zhet a dekorat\u00edv bet\u0171vel).<\/p>\n\n\n\n Az el\u0151bbiekben m\u00e1r hangs\u00falyoztuk, hogy nem felt\u00e9tlen\u00fcl van sz\u00fcks\u00e9g t\u00f6bbf\u00e9le bet\u0171t\u00edpus alkalmaz\u00e1s\u00e1ra egy weboldalon. Egy bet\u0171t\u00edpussal remek\u00fcl meg lehet oldani a k\u00fcl\u00f6nb\u00f6z\u0151 design-ig\u00e9nyeket, k\u00fcl\u00f6n\u00f6sen, ha t\u00f6bbf\u00e9le s\u00falyoz\u00e1s is rendelkez\u00e9sre \u00e1ll a bet\u0171b\u0151l, azaz van t\u00f6bbf\u00e9le vastags\u00e1g\u00fa verzi\u00f3ja (d\u0151lt bet\u0171k\u00e9nt is).<\/p>\n\n\n\n Ezek ut\u00e1n l\u00e1ssuk, hogy:<\/p>\n\n\n\n Az els\u0151 bet\u0171t\u00edpus kiv\u00e1laszt\u00e1sa nem mindig rajtunk m\u00falik, hiszen sokszor a m\u00e1rka ir\u00e1nyelvei vagy m\u00e1s keretek hat\u00e1rozz\u00e1k meg. Bizonyos esetekben pedig felmer\u00fclnek k\u00e9nyszerek, p\u00e9ld\u00e1ul a kev\u00e9s hely miatt valamilyen s\u0171r\u00edtett megold\u00e1st kell tal\u00e1lni, esetleg a sok jogi sz\u00f6veg miatt kis m\u00e9retben is k\u00f6nnyen olvashat\u00f3 bet\u0171t\u00edpust. Ugyanakkor, ha m\u00e9gis a ti\u00e9d a v\u00e1laszt\u00e1s, akkor a sz\u00f6vegt\u00f6rzs bet\u0171t\u00edpus\u00e1nak meghat\u00e1roz\u00e1s\u00e1val kezdd a munk\u00e1t<\/strong>.<\/p>\n\n\n\n Ezt m\u00e1s n\u00e9ven horgony-bet\u0171t\u00edpusnak<\/strong> nevezik, mivel ez lesz a referenciapont a bet\u0171k m\u00e9ret\u00e9nek, t\u00e1vols\u00e1g\u00e1nak, kontrasztj\u00e1nak kialak\u00edt\u00e1s\u00e1ra. Persze nem csak a sz\u00f6vegt\u00f6rzs bet\u0171t\u00edpusa lehet horgony-bet\u0171t\u00edpus, ugyanakkor m\u00e9gis c\u00e9lszer\u0171, ha ez az, mert ez teszi ki a sz\u00f6veg nagy r\u00e9sz\u00e9t az oldalon.<\/p>\n\n\n\n A sz\u00f6vegt\u00f6rzs eset\u00e9ben a legfontosabb szempont az olvashat\u00f3s\u00e1g<\/strong>, ilyenkor egy\u00e9b megfontol\u00e1sok, mint az egyedis\u00e9g, egy\u00e9nis\u00e9g m\u00e9g nem nagyon mer\u00fclnek fel. \u00c9rdemes olyan j\u00f3l ismert \u00e9s m\u00e1r t\u00f6bbsz\u00f6r haszn\u00e1lt, bev\u00e1lt bet\u0171t\u00edpust v\u00e1lasztani<\/strong>, mely biztosan nem okoz meglepet\u00e9st. <\/p>\n\n\n\n A m\u00e1sodik bet\u0171t\u00edpus v\u00e1laszt\u00e1sakor kezd a helyzet bonyol\u00f3dni. A m\u00e1sodik bet\u0171t\u00edpust ugyanis nem praktikus szempontok alapj\u00e1n kell meghat\u00e1rozni<\/strong>, hanem karaktere alapj\u00e1n. Minden bet\u0171t\u00edpusnak van egy szem\u00e9lyis\u00e9ge, sz\u00e1mos jellegzetess\u00e9ge. \u00c9rdemes tudni, hogy ha k\u00e9t azonos jellemvon\u00e1sokkal b\u00edr\u00f3 bet\u0171t\u00edpust helyez\u00fcnk egym\u00e1s mell\u00e9, akkor ezek er\u0151s\u00edtik egym\u00e1s hat\u00e1s\u00e1t.<\/p>\n\n\n\n A m\u00e1sodik bet\u0171t\u00edpusnak \u00f6sszhangban kell lennie az els\u0151vel<\/strong>, hogy kialakuljon egy egys\u00e9ges megjelen\u00e9s. Ilyenkor a bet\u0171t\u00edpusok bizonyos param\u00e9tereinek meg kell egyezni\u00fck<\/strong>.<\/p>\n\n\n\n Ehhez tiszt\u00e1ban kell lenned azzal, hogy a kiv\u00e1lasztott horgony-bet\u0171t\u00edpusodnak milyen a fel\u00e9p\u00edt\u00e9se \u00e9s a szem\u00e9lyis\u00e9ge. Ehhez tudsz igazodni a m\u00e1sodik bet\u0171t\u00edpussal. Ehhez a bet\u0171 sz\u00e1mtalan param\u00e9ter\u00e9t figyelembe veheted, ugyanakkor az egyik legfontosabb ezek k\u00f6z\u00fcl az \u00fagynevezett x-magass\u00e1g<\/strong>, illetve a g, az o, az e \u00e9s az a bet\u0171k form\u00e1ja. De m\u00e1r az o is nagyon sokat el\u00e1rul egy bet\u0171t\u00edpus geometri\u00e1j\u00e1b\u00f3l:<\/p>\n\n\n\n Mindezek figyelembe v\u00e9tel\u00e9vel h\u00e1rom lehet\u0151s\u00e9g\u00fcnk van m\u00e1sodik bet\u0171t\u00edpust v\u00e1lasztani:<\/p>\n\n\n\n Nem t\u00fal kreat\u00edv megold\u00e1s, de biztosan nem ny\u00falsz mell\u00e9, ha egyetlen bet\u0171t\u00edpusra korl\u00e1tozod a bet\u0171t\u00edpusaid sz\u00e1m\u00e1t, \u00e9s ezen bel\u00fcl csak a m\u00e9retet, vastags\u00e1got, d\u0151l\u00e9st v\u00e1ltoztatod. Sok bet\u0171t\u00edpus eset\u00e9ben tal\u00e1lsz t\u00f6bbf\u00e9le t\u00edpust, ahol a bet\u0171 vastags\u00e1ga v\u00e1ltozik. N\u00e9zz csak r\u00e1 p\u00e9ld\u00e1ul a Bebas Neue-re<\/a>. Egy\u00fctt haszn\u00e1lhatod p\u00e9ld\u00e1ul a Bebas Neue Boldot a Bebas Neue Lighttal. Ez a bet\u0171t\u00edpus csak nagybet\u0171s v\u00e1ltozatban l\u00e9tezik, \u00edgy nem felt\u00e9tlen\u00fcl j\u00f3 megold\u00e1s, de az elj\u00e1r\u00e1s m\u00e1s esetekben is ugyanez.<\/p>\n\n\n\n Egy fokkal izgalmasabb megold\u00e1s, amikor egy bet\u0171t\u00edpus serif v\u00e1ltozat\u00e1nak l\u00e9tezik egy sans serif v\u00e1ltozata is, \u00e9s ezeket kombin\u00e1lod<\/strong>. Ilyen p\u00e9ld\u00e1ul a Droid Sans \u00e9s a Droid Serif. Ezeknek a bet\u0171knek a kialak\u00edt\u00e1sa k\u00f6zel azonos, de m\u00e1r megjelenik egy kontraszt<\/strong>, \u00fagyhogy meg\u00e9ri az extra http-lek\u00e9r\u00e9st. Ha nem kezeled magabiztosan az egyes bet\u0171t\u00edpusokat, akkor ez egy j\u00f3 opci\u00f3 lehet sz\u00e1modra.<\/p>\n\n\n\n Ezzel a megold\u00e1ssal annyi lehet a probl\u00e9ma, hogy maga a bet\u0171t\u00edpus nem j\u00e1rul hozz\u00e1 mondjuk a c\u00edmsor \u00e9s a sz\u00f6vegt\u00f6rzs megk\u00fcl\u00f6nb\u00f6ztethet\u0151s\u00e9g\u00e9hez, hiszen az olvas\u00f3 sz\u00e1m\u00e1ra egyform\u00e1nak t\u0171nhetnek. A hasonl\u00f3s\u00e1g akkor m\u00e9g zavar\u00f3bb tud lenni, ha nem azonos bet\u0171t\u00edpusokat haszn\u00e1lsz, viszont m\u00e9gis nagyon k\u00f6zel \u00e1llnak egym\u00e1shoz.<\/p>\n\n\n\n Ugyanakkor nem csak azonos bet\u0171t\u00edpusb\u00f3l v\u00e1laszthatsz serif \u00e9s sans serif v\u00e1ltozatot, hanem elt\u00e9r\u0151 bet\u0171t\u00edpusok k\u00f6z\u00fcl is. Szint\u00e9n biztons\u00e1gos megold\u00e1s, ha azonos csal\u00e1don bel\u00fcl keresg\u00e9lsz<\/strong>, mint amilyen p\u00e9ld\u00e1ul a Lucida<\/a>. Az ilyen csal\u00e1dokon bel\u00fcl az alapform\u00e1k – szinte minden esetben, egy-k\u00e9t kiv\u00e9telt\u0151l eltekintve – megegyeznek, teh\u00e1t nem lesz gond a p\u00e1ros\u00edt\u00e1ssal.<\/p>\n\n\n\n Az el\u0151bb m\u00e1r eml\u00edtett\u00fck, de elt\u00e9r\u0151 bet\u0171t\u00edpusokn\u00e1l is bevetheted a serif \u00e9s sans serif p\u00e1ros\u00edt\u00e1s\u00e1t<\/strong>, p\u00e9ld\u00e1ul egym\u00e1s mell\u00e9 teszed a Times New Romant \u00e9s a Calibrit. A serif \u00e9s sans serif p\u00e1ros\u00edt\u00e1s egy el\u00e9g j\u00f3l \u00e9s gyakran haszn\u00e1lt megold\u00e1s<\/strong>, amivel nem lehet nagyot t\u00e9vedni, ugyanakkor nem felt\u00e9tlen\u00fcl jelenti a legjobb v\u00e1laszt\u00e1st. Mindenesetre m\u00e1r megfelel\u0151 kontrasztot ad. De l\u00e9pj\u00fcnk tov\u00e1bb ebbe az ir\u00e1nyba!<\/p>\n\n\n\n Az ellent\u00e9tek ugyanis vonzz\u00e1k egym\u00e1st, \u00e9s ez igaz a bet\u0171t\u00edpusokra is. A t\u00fals\u00e1gosan hasonl\u00f3 bet\u0171t\u00edpusok unalmasak egym\u00e1s mellett, \u00edgy nem is adnak semmit a designodhoz.<\/p>\n\n\n\n M\u00e1sr\u00e9szt a kontrasztos bet\u0171t\u00edpusok haszn\u00e1lata a sz\u00f6veg \u00e1tfuthat\u00f3s\u00e1g\u00e1t \u00e9s olvashat\u00f3s\u00e1g\u00e1t is jav\u00edtja. Az er\u0151s kontraszt seg\u00edt a hierarchia bemutat\u00e1s\u00e1ban is. <\/p>\n\n\n\n Ilyenkor abb\u00f3l indulhatsz ki, hogy ha m\u00e1r v\u00e1lasztott\u00e1l egy j\u00f3l olvashat\u00f3 bet\u0171t\u00edpust a sz\u00f6vegt\u00f6rzsnek, akkor v\u00e1laszthatsz c\u00edmsornak egy olyat, amelynek teljesen ellent\u00e9tes a karaktere<\/strong>. P\u00e9ld\u00e1ul p\u00e1ros\u00edthatsz egy k\u00f6nny\u0171, l\u00e9gies bet\u0171t\u00edpust egy vaskos, neh\u00e9z bet\u0171vel, vagy ak\u00e1r egy serifet \u00e9s egy eleg\u00e1ns, k\u00e9zzel \u00edrt bet\u0171t\u00edpussal<\/p>\n\n\n\n Amikor a bet\u0171t\u00edpusokkal dolgozol, akkor fontos tudni egy-egy bet\u0171t\u00edpus t\u00f6rt\u00e9net\u00e9t \u00e9s eredet\u00e9t. Az azonos alkot\u00f3t\u00f3l sz\u00e1rmaz\u00f3 bet\u0171t\u00edpusok \u00e1ltal\u00e1ban j\u00f3l p\u00e1ros\u00edthat\u00f3k<\/strong>, mivel azonos st\u00edlus\u00faak \u00e9s fel\u00e9p\u00edt\u00e9s\u0171ek. Ilyen p\u00e9ld\u00e1ul a Joanna \u00e9s a Gil Sans, melyeket a brit tipogr\u00e1fus, Eric Gill tervezett. Mindk\u00e9t bet\u0171t\u00edpus azonos st\u00edlus\u00fa \u00e9s fel\u00e9p\u00edt\u00e9s\u0171.<\/p>\n\n\n\n Az is lehets\u00e9ges megold\u00e1s, hogy nem a bet\u0171t\u00edpusok karakterei ellent\u00e9tesek egym\u00e1ssal, hanem csak egy-egy jellemvon\u00e1suk<\/strong>. Vagyis ilyenkor meghat\u00e1rozzuk az els\u0151 bet\u0171t\u00edpusunk f\u0151 jellegzetess\u00e9g\u00e9t, majd keres\u00fcnk egy olyan bet\u0171t, amely csak ebben egyezik meg vele.<\/p>\n\n\n\n Ez nem egyszer\u0171 faladat, el\u00e9g szubjekt\u00edv is a dolog<\/strong>, ugyanakkor ez a megold\u00e1s hozhatja a legmeglep\u0151bb \u00e9s a legkellemesebb kombin\u00e1ci\u00f3kat. A k\u00fcl\u00f6nb\u00f6z\u0151 bet\u0171t\u00edpusok, k\u00fcl\u00f6nb\u00f6z\u0151 kombin\u00e1ci\u00f3kban alkalmazva nagyon \u00e9rdekes \u00e9s elt\u00e9r\u0151 hat\u00e1sokat kelthetnek<\/strong> egy m\u00e1r elk\u00e9sz\u00fcl webdesign eset\u00e9n.<\/p>\n\n\n\n Ha nem tartalmaz t\u00fal sok sz\u00f6veget a weboldalad, akkor ak\u00e1r k\u00e9t bet\u0171t\u00edpussal is elboldogulsz (c\u00edmsor, keny\u00e9rsz\u00f6veg). Ugyanakkor bizonyos esetekben sz\u00fcks\u00e9ged lehet tov\u00e1bbi bet\u0171t\u00edpusokra is, de j\u00f3l teszed, ha h\u00e1romban maxim\u00e1lod a sz\u00e1mukat<\/strong>. El\u0151fordulhat, hogy bizonyos esetekben n\u00e9gy van t\u00f6bb bet\u0171t\u00edpusra is sz\u00fcks\u00e9ges lehet, ezek azonban kiv\u00e9teles esetek.<\/p>\n\n\n\n Mint sok m\u00e1s dologn\u00e1l, a visszafogotts\u00e1g a bet\u0171t\u00edpusok kiv\u00e1laszt\u00e1sa eset\u00e9n is kifizet\u0151d\u0151 lehet, k\u00fcl\u00f6n\u00f6sen az\u00e9rt, mert a bet\u0171t\u00edpusok kombin\u00e1l\u00e1sa nem egyszer\u0171 munka. De v\u00e9g\u00fcl is csak egyed\u00fcl az eredm\u00e9ny sz\u00e1m\u00edt: n\u00e9ha az a legjobb, ha mer\u00fcnk kock\u00e1ztatni \u00e9s eg\u00e9szen meglep\u0151 p\u00e1rosokat alkotunk.<\/p>\n\n\n\n Ha viszont \u00fagy \u00e9rzed, hogy nem megy a v\u00e1laszt\u00e1s, vagy biztosra akarsz menni, akkor ma m\u00e1r sz\u00e1mtalan online lehet\u0151s\u00e9g k\u00f6z\u00fcl v\u00e1laszthatsz, melyek megfelel\u0151 p\u00e1ros\u00edt\u00e1sokat javasolnak. Csak ki kell v\u00e1lasztanod a f\u0151 fontodat, \u00e9s m\u00e1ris kapod a javaslatot a m\u00e1sodikra. \u00cdgy m\u0171k\u00f6dik p\u00e9ld\u00e1ul a Canva megold\u00e1sa<\/a>. Typ.io<\/a> vagy a Fontpair<\/a> ugyanakkor k\u00fcl\u00f6nb\u00f6z\u0151 font-p\u00e1ros\u00edt\u00e1sokat javasol, csak keresg\u00e9lni kell k\u00f6z\u00f6tt\u00fck. Hasonl\u00f3 javaslatokat itt is tal\u00e1lsz<\/a>, vagy \u00e9rdemes lehet megpr\u00f3b\u00e1lnod a Typespirationt<\/a> is. A Web Font Blender oldal\u00e1n<\/a> viszont szabadon pr\u00f3b\u00e1lgathatod a k\u00fcl\u00f6nb\u00f6z\u0151 p\u00e1ros\u00edt\u00e1sokat, melyeket megkapsz k\u00f3dk\u00e9nt is, illetve ha valamelyik megtetszik, mentheted. \u00c9rdemes lehet azonban ben\u00e9zni a Pinterestre is, ahol sz\u00e1mtalan tippet tal\u00e1lsz font-p\u00e1ros\u00edt\u00e1sra.<\/p>\n\n\n Hab\u00e1r az el\u0151bb felsorolt oldalakon tal\u00e1lsz javaslatokat fontp\u00e1ros\u00edt\u00e1sokra, most l\u00e1ssunk n\u00e9h\u00e1ny ingyenes Google bet\u0171t\u00edpus-p\u00e1rt.<\/p>\n\n\n\n Ha p\u00e9ld\u00e1ul valamilyen technol\u00f3giai t\u00e9m\u00e1j\u00fa weboldalad van, akkor j\u00f3 v\u00e1laszt\u00e1s lehet a Montserrat<\/strong> bet\u0171t\u00edpus, mely modern \u00e9s j\u00f3l olvashat\u00f3 bet\u0171. Ehhez a geometrikus fonthoz j\u00f3l passzol p\u00e9ld\u00e1ul egy Open Sans, Crimson Text, Source Sans Pro vagy a Roboto<\/strong>. Ugyanakkor a Montserratot egy\u00e1ltal\u00e1n nem musz\u00e1j kombin\u00e1lni b\u00e1rmi m\u00e1ssal, \u00f6nmag\u00e1ban is j\u00f3l mutat egy weboldalon. <\/p>\n\n\n A Montserrat<\/strong> azonban olyan univerz\u00e1lisan haszn\u00e1lhat\u00f3 bet\u0171t\u00edpus, hogy b\u00e1rmely \u00fczleti vagy ak\u00e1r oktat\u00e1si weboldalon is meg\u00e1llja a hely\u00e9t. A m\u00e1r eml\u00edtett Open Sans<\/strong> – mint az egyik legn\u00e9pszer\u0171bb sans serif font – remek v\u00e1laszt\u00e1s mell\u00e9, amivel egy kicsit bar\u00e1ts\u00e1gosabb\u00e1 teszed a weboldalad hangulat\u00e1t. Ugyanakkor az Open Sans<\/strong> f\u0151 bet\u0171t\u00edpus is lehet, mely mell\u00e9 kiv\u00e1laszthatod a Playfair Displayt vagy a Poppinst<\/strong>, ami szint\u00e9n azt \u00fczeni, hogy komoly a c\u00e9ged, de az\u00e9rt megk\u00f6zel\u00edthet\u0151.<\/p>\n\n\n Amennyiben oktat\u00e1si t\u00e9m\u00e1j\u00fa a weboldalad, akkor p\u00e1ros\u00edthatod a Montserrat<\/strong>ot p\u00e9ld\u00e1ul a Crimson text<\/strong> bet\u0171t\u00edpussal. Ez a r\u00e9gies st\u00edlus\u00fa bet\u0171 ugyanis j\u00f3l passzol a modern Montserrathoz, \u00e9s oktat\u00e1si weboldal eset\u00e9ben a megfelel\u0151 \u00fczenetet hordozz\u00e1k egy\u00fctt. <\/p>\n\n\n\n Ha eleg\u00e1ns megjelen\u00e9st szeretn\u00e9l, akkor a sans serif bet\u0171k k\u00f6z\u00f6tt \u00e9rdemes k\u00f6r\u00fcln\u00e9zned, hiszen kifinomultak \u00e9s egyszer\u0171ek. Ha kombin\u00e1ci\u00f3t vizsg\u00e1lunk, akkor az Old Standard TT \u00e9s a Muli<\/strong> p\u00e9ld\u00e1ul j\u00f3l mutat egy\u00fctt, de ut\u00f3bbihoz nyugodtan hozz\u00e1teheted p\u00e9ld\u00e1ul az Ovo<\/strong>-t is.<\/p>\n\n\n\n Ha viszont egy sport-t\u00e9m\u00e1j\u00fa web\u00e1ruh\u00e1zad van, akkor nyilv\u00e1n ink\u00e1bb valami energikusabb, de m\u00e9gis egyszer\u0171 fontot szeretn\u00e9l. Hiszen a c\u00e9l itt az, hogy m\u00e1r a bet\u0171iddel kicsit felp\u00f6rgesd a k\u00f6z\u00f6ns\u00e9get. Ha emellett fontos a j\u00f3 olvashat\u00f3s\u00e1g is, akkor a Teko<\/strong> bet\u0171t\u00edpus egy j\u00f3 v\u00e1laszt\u00e1s lesz. Haszn\u00e1lhatod egyb\u0151l a f\u00e9lk\u00f6v\u00e9r v\u00e1ltozatot, de a bet\u0171k\u00f6z\u00f6kkel is j\u00e1tszhatsz, hogy el\u00e9rd a maxim\u00e1lis hat\u00e1st. Egyed\u00fcl is meg\u00e1llj a hely\u00e9t, de mell\u00e9pcsaphatod az Ubuntut<\/strong> p\u00e9ld\u00e1ul.<\/p>\n\n\n\n Ha valami kisv\u00e1llalkoz\u00e1sod van, mondjuk p\u00e9ks\u00e9get \u00fczemeltetsz vagy cukr\u00e1szd\u00e1t, akkor a Cormorant<\/strong> p\u00e9ld\u00e1ul j\u00f3 megold\u00e1s lehet, hiszen egyszerre modern \u00e9s tradicion\u00e1lis, ami egy p\u00e9ks\u00e9g eset\u00e9ben j\u00f3 \u00fczenet. Mell\u00e9teheted a m\u00e1r eml\u00edtett Muli<\/strong>t vagy ak\u00e1r a Proza Libr\u00e9<\/strong>t. Cukr\u00e1szd\u00e1k sz\u00e1m\u00e1ra j\u00f3 v\u00e1laszt\u00e1s lehet a Poiret One<\/strong>, mely cs\u00e1b\u00edt\u00f3an hat a k\u00f6z\u00f6ns\u00e9gre. Nyugodtan hozz\u00e1kapcsolhatod az univerz\u00e1lis Open Sanst.<\/p>\n\n\n Szem\u00e9lyes portfolio bemutat\u00e1s\u00e1n\u00e1l sem kell t\u00falz\u00e1sokba esni: valamely sans serif f\u00e9lk\u00f6v\u00e9r \u00e9s norm\u00e1l verzi\u00f3ja j\u00f3l m\u0171k\u00f6dik egy\u00fctt. V\u00e1laszthatod p\u00e9ld\u00e1ul az el\u0151bb eml\u00edtett Muli<\/strong>t, mely a c\u00edmsorban \u00e9s a sz\u00f6vegt\u00f6rzsben is meg\u00e1llja a helyz\u00e9t egyszerre. Ugyanakkor mell\u00e9teheted a Lustria<\/strong> bet\u0171t\u00edpust is.<\/p>\n\n\n\n Hab\u00e1r egyetlen font haszn\u00e1lata mindig biztos megold\u00e1s, ugyanakkor unalmas. Ez\u00e9rt el\u0151ny\u00f6s k\u00e9t vagy t\u00f6bb bet\u0171t\u00edpus p\u00e1ros\u00edt\u00e1sa. Az viszont t\u00f6nkre is teheti az eg\u00e9sz weboldal designj\u00e1t, ha nem illeszkedik a k\u00e9t bet\u0171t\u00edpus. Milyen hib\u00e1k fordulhatnak el\u0151?<\/p>\n\n\n\n N\u00e9pszer\u0171ek mostan\u00e1ban k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusok, szem\u00e9lyesebb\u00e9 teszik az \u00fczenetet a weboldalon, mik\u00f6zben eleg\u00e1nsak \u00e9s kifinomultak. T\u00falz\u00e1sba azonban nem szabad esni a haszn\u00e1latukn\u00e1l: k\u00e9t k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpust soha nem szabad egyszerre haszn\u00e1lni, mert t\u00fal er\u0151s a karakter\u00fck.<\/p>\n\n\n\n K\u00e9t nagyon hasonl\u00f3 bet\u0171t\u00edpus eset\u00e9ben a k\u00fcl\u00f6nbs\u00e9g alig \u00e9szrevehet\u0151, ami furcsa, kellemetlen hat\u00e1st eredm\u00e9nyez. Ha m\u00e9gis \u00fagy d\u00f6ntesz, hogy nem akarsz nagyon elt\u00e9r\u0151 bet\u0171t\u00edpusokat haszn\u00e1lni, akkor jobb megold\u00e1s, ha egyazon bet\u0171t\u00edpus elt\u00e9r\u0151 verzi\u00f3it alkalmazod. <\/p>\n\n\n\n Ha egy sz\u00f6vegben valamit ki akarsz emelni, akkor azt megteheted egy figyelemfelh\u00edv\u00f3 bet\u0171t\u00edpussal. Erre nem alkalmasak a „biztons\u00e1gos” bet\u0171t\u00edpusok. Ilyenkor el\u0151ker\u00fclhetnek az er\u0151s karakter\u0171 novelty fontok. Arra azonban figyelni kell, hogy ezek nem viselnek el maguk mellett m\u00e1s, hasonl\u00f3an er\u0151s karakter\u0171 bet\u0171ket, p\u00e9ld\u00e1ul a display bet\u0171k k\u00f6z\u00fcl v\u00e1logatva. Az \u00f6sszhat\u00e1s ilyenkor elborzaszt\u00f3 lesz.<\/p>\n\n\n\n Minden bet\u0171t\u00edpusnak van valamilyen szem\u00e9lyis\u00e9ge \u00e9s hangulata. Ha nem illik \u00f6ssze a k\u00e9t kiv\u00e1lasztott bet\u0171t\u00edpus\u00e9, akkor ne haszn\u00e1ld, mert zavar\u00f3 lesz az eredm\u00e9ny.<\/p>\n\n\n\n Nem lehet el\u00e9gszer elmondani: ha h\u00e1romn\u00e1l t\u00f6bb bet\u0171t\u00edpust haszn\u00e1lsz, akkor az eredm\u00e9ny egy k\u00e1osz lesz. Kiv\u00e9telek persze vannak, de ahhoz komoly j\u00e1rtass\u00e1g kell a tipogr\u00e1fi\u00e1ban.<\/p>\n\n\n\n Az egyes bet\u0171kn\u00e9l a v\u00e1ltoztathat\u00f3 param\u00e9terek sz\u00e1mtalan lehet\u0151s\u00e9get rejtenek magukban. Lehet\u0151v\u00e9 teszik azt, hogy egyetlen bet\u0171t\u00edpust haszn\u00e1lj a weboldaladon, m\u00e9gse legyen unalmas az \u00f6sszhat\u00e1s. Ugyanakkor a harm\u00f3ni\u00e1t k\u00f6nnyebb el\u00e9rni.<\/p>\n\n\n\n A webdesignban a felhaszn\u00e1l\u00f3i figyelem ir\u00e1ny\u00edt\u00e1s\u00e1nak egyik alapvet\u0151 eszk\u00f6ze a k\u00f6vetkezetes sz\u00f6veg-hierarchia kialak\u00edt\u00e1sa. Az m\u00e9g nem felt\u00e9tlen\u00fcl elegend\u0151 a megfelel\u0151 hierarchia kialak\u00edt\u00e1s\u00e1hoz, hogy a c\u00edmsorokat, alc\u00edmeket, stb. elt\u00e9r\u0151 bet\u0171t\u00edpussal \u00edrod. Figyelned kell a bet\u0171 st\u00edlus\u00e1ra, karakter\u00e9re, s\u00faly\u00e1ra, m\u00e9ret\u00e9re, stb., hogy megfelel\u0151 legyen az eredm\u00e9ny. Err\u0151l a k\u00f6vetkez\u0151 bekezd\u00e9sben b\u0151vebben is \u00edrunk.<\/p>\n\n\n\n A designer fontok ugyan sz\u00e9pek, azonban ahogy minden er\u0151s karakter\u0171 fonttal, ezekkel is cs\u00ednj\u00e1n kell b\u00e1nni. Ne haszn\u00e1ld \u0151ket t\u00fal sokat \u00e9s t\u00fal gyakran!<\/p>\n\n\n\n El\u0151fordulhat, hogy egy-egy weboldal indul\u00e1sakor a designer k\u00e9t \u00f6sszeill\u0151 bet\u0171t\u00edpussal tervezte meg a sz\u00f6vegeket, azonban az id\u0151k sor\u00e1n valahogy beleker\u00fclnek a weboldalba elt\u00e9r\u0151 tartalmak, funkci\u00f3k, melyekn\u00e9l \u00fajabb, elt\u00e9r\u0151 bet\u0171t\u00edpusok jelennek meg. Ezek tal\u00e1n fel sem t\u0171nnek a weboldaltulajdonosnak, hiszen az oldal szerves fejl\u0151d\u00e9se sor\u00e1n jelentek meg, ugyanakkor a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra zavar\u00f3 hat\u00e1st keltenek. <\/p>\n\n\n\n A tipogr\u00e1fiai hierarchia mutatja meg a felhaszn\u00e1l\u00f3nak, hogy mire \u00f6sszpontos\u00edtson az oldalon, vagyis, hogy mi a legfontosabb sz\u00f6veg, \u00e9s mi az, ami csak seg\u00edti ezt. A tipogr\u00e1fiai hierarchia kialak\u00edt\u00e1s\u00e1nak t\u00f6bb eszk\u00f6ze is van:<\/p>\n\n\n\n Az azonban, hogy ismered az eszk\u00f6z\u00f6ket, melyek befoly\u00e1solj\u00e1k egy-egy sz\u00f6veg hierarchi\u00e1ban bet\u00f6lt\u00f6tt hely\u00e9t, m\u00e9g nem jelenti azt, hogy m\u0171k\u00f6dik a hierarchi\u00e1ba rendez\u00e9s az \u00e1ltalad tervezett oldalon. <\/p>\n\n\n\n \u00c1ltal\u00e1ban a hierarchi\u00e1nak h\u00e1rom szintj\u00e9t haszn\u00e1ljuk: c\u00edmsor, alc\u00edm \u00e9s sz\u00f6vegt\u00f6rzs. Ehhez, ha sz\u00fcks\u00e9ges, m\u00e9g hozz\u00e1adhat\u00f3k tov\u00e1bbi szintek, p\u00e9ld\u00e1ul mert id\u00e9zetek, k\u00e9pal\u00e1\u00edr\u00e1sok, stb. szerepelnek a sz\u00f6vegben.<\/p>\n\n\n\n Ahhoz pedig, hogy magabiztosan menjen a tipogr\u00e1fiai hierarchia kialak\u00edt\u00e1sa, legink\u00e1bb gyakorlat \u00e9s tapasztalat kell, hiszen mint l\u00e1that\u00f3 sok eszk\u00f6znek a kombin\u00e1ci\u00f3ja lehets\u00e9ges, melyek finoman k\u00e9pesek megmutatni egy-egy sz\u00f6vegnek a fontoss\u00e1g\u00e1t. <\/p>\n\n\n\n Akad n\u00e9h\u00e1ny olyan univerz\u00e1lis bet\u0171t\u00edpus, mely szinte minden esetben meg\u00e1llhatja a hely\u00e9t els\u0151dleges bet\u0171t\u00edpusk\u00e9nt, ak\u00e1r webr\u0151l, ak\u00e1r mobilr\u00f3l van sz\u00f3. <\/p>\n\n\n\n Az Open Sans<\/a> egy humanista sans serif bet\u0171t\u00edpus, melyet Steve Matteson tervezett. Az Open Sans optimaliz\u00e1lva van mind nyomtatott, mind pedig webes megjelen\u00e9sre. Nagyon j\u00f3l olvashat\u00f3 bet\u0171t\u00edpus ak\u00e1r nagy, ak\u00e1r kicsi kijelz\u0151kr\u0151l legyen sz\u00f3.<\/p>\n\n\n\n Az Open Sans nagyon sok m\u00e1s bet\u0171t\u00edpushoz passzol, \u00edgy a szint\u00e9n gyakori Monsterrathoz, a Lat\u00f3hoz, Brandon Groteskhez vagy a Robot\u00f3hoz. A keny\u00e9rsz\u00f6veg eset\u00e9ben a legjobb egy 16 px-es m\u00e9ret, m\u00edg c\u00edmsorokn\u00e1l a 28 px-est \u00e9rdemes haszn\u00e1lni.<\/p>\n\n\n A Robot\u00f3nak<\/a> kett\u0151s term\u00e9szete van. Egyr\u00e9szt mechanikus a fel\u00e9p\u00edt\u00e9se \u00e9s a form\u00e1ja is nagyr\u00e9szt geometrikus, m\u00e1sr\u00e9szt viszont bar\u00e1ts\u00e1gos \u00e9s nyitott \u00edvekkel rendelkezik. A Roboto az alap\u00e9rtelmezett bet\u0171t\u00edpus az Androidon \u00e9s a Google-szolg\u00e1ltat\u00e1sokban, \u00edgy val\u00f3ban nagyon gyakran tal\u00e1lkozhatunk vele. <\/p>\n\n\n\n A Roboto is egy sans serif bet\u0171t\u00edpus, mely j\u00f3l illik a Roboto Slab, az Open Sans, a Lato vagy a Playfair Display mell\u00e9. A sz\u00f6vegt\u00f6rzsben \u00e9rdemes egy 21 px-es m\u00e9rettel k\u00eds\u00e9rletezni.<\/p>\n\n\n Szint\u00e9n egy nagyon elterjedt sans serif bet\u0171t\u00edpus, melyet m\u00e9g 1957-ben tervezett a sv\u00e1jci bet\u0171tervez\u0151, Max Miedinger \u00e9s Eduard Hoffmann. Fontos jellemz\u0151je a Helvetic\u00e1nak a nagy x-magass\u00e1g \u00e9s a bet\u0171k k\u00f6z\u00f6tti sz\u0171k t\u00e1vols\u00e1g, mely s\u0171r\u0171, t\u00f6m\u00f6r megjelent\u00e9s biztos\u00edt sz\u00e1m\u00e1ra.<\/p>\n\n\n\n A Helvetica j\u00f3l p\u00e1ros\u00edthat\u00f3 olyan bet\u0171t\u00edpusokkal, mint az FF Tisa, a Georgia, a Roboto vagy a Banton Sans. C\u00edmsorokn\u00e1l 48 px-es, m\u00edg sz\u00f6vegt\u00f6rzsn\u00e9l 18 px-es bet\u0171ket \u00e9rdemes kipr\u00f3b\u00e1lni.<\/p>\n\n\n Julieta Ulanovskyt a Buenos Aires mellett tal\u00e1lhat\u00f3 Monsterrat r\u00e9gi plak\u00e1tjai \u00e9s t\u00e1bl\u00e1i inspir\u00e1lt\u00e1k a bet\u0171t\u00edpus tervez\u00e9se k\u00f6zben. A geometrikus t\u00edpus\u00fa bet\u0171 digit\u00e1lis felhaszn\u00e1l\u00e1sra lett tervezve, \u00e9s kit\u0171n\u0151 v\u00e1laszt\u00e1s minimalista \u00e9s modern weboldalakhoz vagy appokhoz.<\/p>\n\n\n\n A Monsterrat<\/a> el\u0151nye, hogy r\u00f6vid mondatok, p\u00e9ld\u00e1ul gombok feliratak\u00e9nt, csupa nagybet\u0171vel \u00edrva is j\u00f3l m\u0171k\u00f6dik. Kit\u0171n\u0151en p\u00e1ros\u00edthat\u00f3 az Open Sans, a Roboto Slab \u00e9s a Lora bet\u0171t\u00edpusokkal. C\u00edmsorokn\u00e1l \u00e9rdemes 30 px-es m\u00e9retet, m\u00edg sz\u00f6vegt\u00f6rzsn\u00e9l 16 px-es m\u00e9retet haszn\u00e1lni.<\/p>\n\n\n\n Az avenir sz\u00f3 franci\u00e1ul j\u00f6v\u0151t jelent. A geometrikus \u00e9s sans serif bet\u0171t\u00edpus 1920-ban ker\u00fclt megtervez\u00e9sre, \u00e9s fontos jellemz\u0151je, hogy a k\u00f6r jelenti a bet\u0171k alapj\u00e1t, mint az Erbar vagy a Future eset\u00e9ben. Az Avenir<\/a> j\u00f3l \u00f6sszeillik a Minion, a Georgia \u00e9s a Helvetica bet\u0171kkel. A c\u00edmsorokn\u00e1l egy 30 px-es m\u00e9retet \u00e9rdemes haszn\u00e1lni, m\u00edg a sz\u00f6vegt\u00f6rzsn\u00e9l elegend\u0151 lehet a 14 px.<\/p>\n\n\n Friss\u00edt\u00e9s, 2022.07.19.:<\/em><\/p>\n\n\n\n Akad n\u00e9h\u00e1ny olyan bet\u0171t\u00edpus, melyek k\u00f6nnyen olvashat\u00f3nak sz\u00e1m\u00edtanak. Ide tartozik az egyszer\u0171, nem t\u00fal izgalmas sans serif bet\u0171k egy r\u00e9sze. Ugyanakkor az Adobe-n\u00e1l megvizsg\u00e1ltak n\u00e9h\u00e1ny bet\u0171t\u00edpust<\/a> olvashat\u00f3s\u00e1gi szempontb\u00f3l. A 350 alannyal v\u00e9gzett kutat\u00e1s olyan bet\u0171ket vizsg\u00e1lt, mint<\/p>\n\n\n\n A kutat\u00e1sban azonban azt \u00e1llap\u00edtott\u00e1k meg, hogy az olvashat\u00f3s\u00e1g szempontj\u00e1b\u00f3l nagyon sokat sz\u00e1m\u00edt a kontextus \u00e9s a k\u00f6z\u00f6ns\u00e9g. Ez pedig azt jelenti, hogy bet\u0171t\u00edpus-v\u00e1laszt\u00e1sn\u00e1l a felhaszn\u00e1l\u00f3idat kell els\u0151sorban szem el\u0151tt tartani.<\/p>\n\n\n\n Ami biztos, hogy a t\u00fals\u00e1gosan „divatos” bet\u0171t\u00edpusok \u00e1ltal\u00e1ban nem j\u00f3l olvashat\u00f3k, ugyanakkor egy norm\u00e1lis x-magass\u00e1g\u00fa, lekerek\u00edtett, nem t\u00fals\u00e1gosan \u00f6sszet\u00f6m\u00f6r\u00edtett bet\u0171k, szab\u00e1lyos k\u00f6rvonalsz\u00e9less\u00e9ggel lehet, hogy unalmasnak t\u0171nik, de j\u00f3l olvashat\u00f3. <\/p>\n\n\n\n Azt sem szabad elfelejteni, hogy az olvashat\u00f3s\u00e1gra nem csak maga a bet\u0171t\u00edpus, hanem a m\u00e9ret \u00e9s a t\u00e9rk\u00f6z\u00f6k<\/strong> is jelent\u0151s hat\u00e1ssal vannak. Emellett lehet b\u00e1rmilyen j\u00f3l olvashat\u00f3 egy bet\u0171t\u00edpus, ha rossz a kontraszt, akkor semmire sem m\u00e9sz vele. A sz\u00ednek ugyan nem r\u00e9szei a bet\u0171t\u00edpusnak, m\u00e9gis t\u00f6nkretehetik a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. \u00c9rdemes ebb\u0151l a szempontb\u00f3l figyelembe venni a W3C aj\u00e1nl\u00e1s\u00e1t, melyr\u0151l a sz\u00ednkontraszt ismertet\u00e9s\u00e9n\u00e9l b\u0151vebben is \u00edrtunk<\/a>.<\/p>\n\n\n\n Sokat seg\u00edt egy\u00e9bk\u00e9nt az olvashat\u00f3s\u00e1g meg\u00edt\u00e9l\u00e9s\u00e9n\u00e9l, ha kinyomtatod a weboldalad<\/strong>. Ha pap\u00edron is j\u00f3l olvashat\u00f3 a sz\u00f6veg, \u00e9s ak\u00e1r t\u00e1volabbr\u00f3l is j\u00f3l l\u00e1tod a bet\u0171ket, akkor j\u00f3 lehet a v\u00e1laszt\u00e1s. Ha valami pap\u00edron nehezen olvashat\u00f3, az m\u00e9g rosszabbul teljes\u00edt kijelz\u0151n. <\/p>\n\n\n\n Egy m\u00e1sik fontos dolog, hogy \u00e9rdemes visszajelz\u00e9seket gy\u0171jteni<\/strong> az olvashat\u00f3s\u00e1gra vonatkoz\u00f3an. Persze az Adobe vizsg\u00e1lat\u00e1b\u00f3l az is kider\u00fcl, hogy az emberek v\u00e9lem\u00e9nye nem biztos, hogy j\u00f3 ir\u00e1nyt\u0171, de az\u00e9rt a v\u00e9lem\u00e9nyek seg\u00edtenek kider\u00edteni, hogy egy bet\u0171t\u00edpus j\u00f3l m\u0171k\u00f6dik az oldalon vagy sem. Ez k\u00fcl\u00f6n\u00f6sen igaz a k\u00e9z\u00edr\u00e1sos, divatos vagy \u00fajszer\u0171 bet\u0171t\u00edpusok haszn\u00e1lat\u00e1n\u00e1l.<\/p>\n\n\n\n Amit \u00e1ltal\u00e1nos tan\u00e1csk\u00e9nt lehet adni k\u00f6nnyen olvashat\u00f3 bet\u0171t\u00edpus kiv\u00e1laszt\u00e1s\u00e1hoz, az az, hogy lehet\u0151leg<\/p>\n\n\n\n Nincs teh\u00e1t kifejezetten j\u00f3 vagy rossz v\u00e1laszt\u00e1s, ha olvashat\u00f3s\u00e1gr\u00f3l van sz\u00f3, hiszen figyelembe kell venni az alkalmaz\u00e1st, a haszn\u00e1latot. Bet\u0171t\u00edpus-v\u00e1laszt\u00e1sn\u00e1l mindig gondolni kell a tartalomra, a kontextusra, a c\u00e9lk\u00f6z\u00f6ns\u00e9gre, hogy megtal\u00e1ld, mi az, ami m\u0171k\u00f6dni fog. \u00c9s persze \u00e9rdemes tesztelni: k\u00e9rdezd meg a felhaszn\u00e1l\u00f3kat, hogy mit gondolnak. <\/p>\n\n\n\n A web-biztos bet\u0171t\u00edpusok olyan bet\u0171k, melyeket a b\u00f6ng\u00e9sz\u0151k \u00e9s az oper\u00e1ci\u00f3s rendszerek nagyobb r\u00e9sze t\u00e1mogat. Ez azt jelenti, hogy az oper\u00e1ci\u00f3s rendszerek m\u00e1r tartalmazz\u00e1k ezeket a bet\u0171t\u00edpusokat, \u00edgy a felhaszn\u00e1l\u00f3knak nem kell azokat let\u00f6lteni\u00fck a szerveredr\u0151l. A web-biztos bet\u0171t\u00edpusok ez\u00e9rt lehet\u0151v\u00e9 teszik, hogy mindenki sz\u00e1m\u00e1ra olvashat\u00f3 legyen a weboldalad olyan megjelen\u00e9sben, ahogy azt Te megtervezted. <\/p>\n\n\n\n K\u00e9rd\u00e9s persze, hogy a 2020-as \u00e9vekben van-e m\u00e9g b\u00e1rmif\u00e9le l\u00e9tjogosults\u00e1guk ezeknek a web-biztos bet\u0171t\u00edpusoknak. Itt mind\u00f6ssze azt kell figyelembe venni, hogy ha valamilyen egyedi, helyi vagy k\u00fcls\u0151 f\u00e9l \u00e1ltal szolg\u00e1ltatott bet\u0171t\u00edpust haszn\u00e1lsz, akkor annak let\u00f6lt\u00e9se lelass\u00edtja a weboldaladat<\/strong>. Vagyis a web-biztos bet\u0171t\u00edpusra v\u00e1lt\u00e1s gyorsabb weboldalt eredm\u00e9nyez. M\u00e1rpedig a weboldalsebess\u00e9g fontos t\u00e9nyez\u0151<\/a>, ak\u00e1r a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, ak\u00e1r a SEO-t tekintj\u00fck.<\/p>\n\n\n\n Sokan haszn\u00e1lj\u00e1k az ingyenesen el\u00e9rhet\u0151 Google-bet\u0171t\u00edpusokat, ezek azonban nem tekinthet\u0151k web-biztosnak, hiszen maga az oper\u00e1ci\u00f3s rendszer nem t\u00e1mogatja \u0151ket. Ezeket a bet\u0171ket a Google szolg\u00e1ltatja \u00e9s \u00fagynevezett web-bet\u0171t\u00edpusok. Ez lehet, hogy egy kicsit zavar\u00f3 megnevez\u00e9s, de a l\u00e9nyege, hogy a b\u00f6ng\u00e9sz\u0151nek el\u0151bb le kell t\u00f6ltenie a f\u00e1jlt ahhoz, hogy azt megmutassa a felhaszn\u00e1l\u00f3nak.<\/p>\n\n\n\n Ezzel szemben a web-biztos bet\u0171t\u00edpusok olyan bet\u0171k, amelyek az eszk\u00f6z\u00f6k legnagyobb r\u00e9sz\u00e9n m\u00e1r eleve megtal\u00e1lhat\u00f3k<\/strong>. Ezekn\u00e9l nem okoz probl\u00e9m\u00e1t a let\u00f6lt\u00e9s, mivel szinte minden l\u00e1togat\u00f3d oper\u00e1ci\u00f3s rendszere t\u00e1mogatja \u0151ket, \u00edgy csak bele kell k\u00f3dolnod a weboldalba a CSS seg\u00edts\u00e9g\u00e9vel. <\/p>\n\n\n\n Milyen bet\u0171k tartoznak k\u00f6z\u00e9j\u00fck? Felsorolunk n\u00e9h\u00e1nyat, sok ismer\u0151ssel fogsz tal\u00e1lkozni:<\/p>\n\n\n\n![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/10\/Click-Laboratory-tested-their-client-website\u2019s-font-on-its-CRO-800x190.png\")
Milyen bet\u0171t\u00edpusok l\u00e9teznek, \u00e9s azok mik\u00e9nt hatnak a felhaszn\u00e1l\u00f3kra?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/01\/betutipus-irogep.png\")
<\/figure><\/div>\n\n\nA bet\u0171t\u00edpusok pszichol\u00f3gi\u00e1ja<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2022\/08\/eltero-hatasok-betutipusoknal.jpg\")
<\/a><\/figure><\/div>\n\n\n1. A serif bet\u0171t\u00edpusok<\/h3>\n\n\n\n
R\u00e9gi st\u00edlus<\/h4>\n\n\n\n
![\"R\u00e9gi](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/serif-betuk-regi-stilus.png\")
<\/figure><\/div>\n\n\n\u00c1tmeneti st\u00edlus<\/h4>\n\n\n\n
![\"\u00c1tmeneti](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/serif-betuk-atmeneti-stilus.png\")
<\/figure><\/div>\n\n\nModern st\u00edlus<\/h4>\n\n\n\n
![\"Modern](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/serif-betuk-modern-stilus.png\")
<\/figure><\/div>\n\n\n![\"serif](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/serif-font.png\")
<\/figure><\/div>\n\n\n2. A sans serif<\/h3>\n\n\n\n
Groteszk \u00e9s neo-groteszk<\/h4>\n\n\n\n
![\"Sans](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/sans-serif-groteszk-neo-groteszk.png\")
<\/figure><\/div>\n\n\nM\u00e9rtani st\u00edlus<\/h4>\n\n\n\n
![\"Sans](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/sans-serif-mertani-betutipus.png\")
<\/figure><\/div>\n\n\nHumanista st\u00edlus<\/h4>\n\n\n\n
![\"Humanista](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/humanista-sans-serif.png\")
<\/figure><\/div>\n\n\n![\"sans](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/sans-serif.png\")
<\/figure><\/div>\n\n\n3. K\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusok<\/h3>\n\n\n\n
![\"k\u00e9z\u00edr\u00e1sos](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/k\u00e9z\u00edr\u00e1sos-font.png\")
<\/figure><\/div>\n\n\nMikor \u00e9s hogyan haszn\u00e1lj k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusokat?<\/h3>\n\n\n\n
Mi\u00e9rt \u00e9rdemes k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusokat haszn\u00e1lni?<\/h4>\n\n\n\n
![\"K\u00e9z\u00edr\u00e1sos](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/kezirasos-betutipus-fejlecben.jpg\")
<\/figure><\/div>\n\n\nHogyan \u00e9rdemes haszn\u00e1lni \u0151ket?<\/h4>\n\n\n\n
![\"K\u00e9z\u00edr\u00e1sos](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/kezirasos-betutipus.jpg\")
<\/figure><\/div>\n\n\nIllusztr\u00e1ci\u00f3kkal kombin\u00e1lva<\/h4>\n\n\n\n
![\"Illusztr\u00e1ci\u00f3](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/illusztracio-es-kezirasos-betu.jpg\")
<\/figure><\/div>\n\n\nMilyen st\u00edlus\u00fa sz\u00f6vegeket haszn\u00e1lhatsz?<\/h4>\n\n\n\n
Milyen t\u00edpusai vannak a k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpusoknak?<\/h3>\n\n\n\n
Foly\u00f3\u00edr\u00e1s<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/25764335-bf82-4564-ae48-fc5b09d529a5.jpg\")
<\/figure>\n\n\n\nKalligrafikus bet\u0171t\u00edpusok<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/f163b418-ebb4-4b3e-ac71-6b73364d4e6f.jpg\")
<\/figure>\n\n\n\nKr\u00e9t\u00e1val \u00edrt bet\u0171k<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/82c6510c-aed0-4708-a6a9-002011663191.jpg\")
<\/figure>\n\n\n\nEcsettel \u00edrt bet\u0171t\u00edpusok<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/0224b8dd-1c69-4538-b8a8-733657dad07c.jpg\")
<\/figure>\n\n\n\nMonoline bet\u0171k<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/03\/monoline.jpg\")
<\/figure>\n\n\n\n4. Display bet\u0171k<\/h3>\n\n\n\n
![\"display\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/display.png\")
<\/figure><\/div>\n\n\n5. Modern bet\u0171t\u00edpusok<\/h3>\n\n\n\n
![\"modern\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/modern.png\")
<\/figure><\/div>\n\n\n6. Dekorat\u00edv bet\u0171k<\/h3>\n\n\n\n
![\"dekorat\u00edv](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/03\/dekorat\u00edv-font.png\")
<\/figure><\/div>\n\n\n7. „Sz\u00ednes” bet\u0171k<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/relita-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/viva-la-fiesta-szines-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Futuristico-szines-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Candy-szines-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Fiesta-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Color-Paper-szines-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Pizza-szines-betutipus.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Chocolate-szines-betutipus.png\")
<\/figure>\n\n\n\nMilyen \u00fczenetet hordoz a bet\u0171t\u00edpusod?<\/h2>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/10\/The-psychology-behind-type-choices.png\")
<\/a>Serif \u00e9s sans serif<\/h4>\n\n\n\n
K\u00f6nny\u0171 bet\u0171k<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/avon-logo.jpg\"){kind=logo}
<\/figure>\n\n\n\nLekerek\u00edtett \u00e9s sz\u00f6gletes bet\u0171k<\/h4>\n\n\n\n
Kis- \u00e9s nagybet\u0171k<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/08\/extenda.png\")
<\/figure>\n\n\n\nS\u0171r\u0171 \u00e9s elny\u00fajtott bet\u0171k<\/h4>\n\n\n\n
Magas \u00e9s alacsony bet\u0171k<\/h4>\n\n\n\n
Az ismer\u0151s bet\u0171t\u00edpusok bizalmat keltenek<\/h4>\n\n\n\n
Mire kell figyelned a weboldaladon haszn\u00e1lt bet\u0171kn\u00e9l?<\/h2>\n\n\n\n
Illeszkedjen a m\u00e1rk\u00e1dhoz \u00e9s a k\u00f6z\u00f6ns\u00e9gedhez<\/h4>\n\n\n\n
Legyen szem\u00e9lyis\u00e9ge!<\/h4>\n\n\n\n
\n
Legy\u00e9l k\u00f6vetkezetes!<\/h4>\n\n\n\n
Gondolkodj el a p\u00e1ros\u00edt\u00e1sokon \u00e9s a hierarchi\u00e1n!<\/h4>\n\n\n\n
Legyen olvashat\u00f3!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/05\/olvashato-betutipus.jpg\")
<\/figure>\n\n\n\nUniverz\u00e1lis bet\u0171t v\u00e1lassz!<\/h4>\n\n\n\n
Hagyd l\u00e9legezni a sz\u00f6veget!<\/h4>\n\n\n\n
\n
Haszn\u00e1lj kerek bet\u0171t\u00edpusokat!<\/h4>\n\n\n\n
Haszn\u00e1lj nagyobb X-magass\u00e1g\u00fa bet\u0171ket!<\/h4>\n\n\n\n
N\u00f6veld a kontrasztot!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/05\/kontraszt-betuknel.jpg\")
<\/figure>\n\n\n\n\u00d3vatosan b\u00e1nj a sz\u00ednekkel!<\/h4>\n\n\n\n
\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/szines-betuk.jpg\")
<\/figure><\/div>\n\n\nK\u00f6vesd a trendeket! De \u00f3vatosan.<\/h4>\n\n\n\n
Egyszer\u0171s\u00edts!<\/h4>\n\n\n\n
Hogyan v\u00e1laszd ki a bet\u0171t\u00edpusokat a weboldaladra, \u00e9s mik\u00e9nt kombin\u00e1ld \u0151ket?<\/h2>\n\n\n\n
N\u00e9h\u00e1ny \u00e1ltal\u00e1nos tan\u00e1cs, amit vegy\u00e9l figyelembe bet\u0171t\u00edpusok v\u00e1laszt\u00e1s\u00e1n\u00e1l<\/h3>\n\n\n\n
Olyan bet\u0171t\u00edpust keress, ami minden \u00e9kezetes karaktert t\u00e1mogat<\/h4>\n\n\n\n
Egyes karakterek k\u00f6z\u00f6tti k\u00fcl\u00f6nbs\u00e9gek ellen\u0151rz\u00e9se<\/h4>\n\n\n\n
Dekorat\u00edv bet\u0171t\u00edpus mell\u00e9 mindig semlegest v\u00e1lassz p\u00e1ros\u00edt\u00e1sn\u00e1l!<\/h4>\n\n\n\n
Haszn\u00e1ld ki az elt\u00e9r\u0151 bet\u0171s\u00falyokat!<\/h4>\n\n\n\n
Hogyan v\u00e1laszd ki az els\u0151 bet\u0171t\u00edpust?<\/h3>\n\n\n\n
Hogyan v\u00e1lassz m\u00e1sodik bet\u0171t\u00edpust?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/04\/o-betu-karaktere.jpg\")
<\/figure>\n\n\n\n1. A biztons\u00e1gos megold\u00e1s<\/h4>\n\n\n\n
2. Csal\u00e1don bel\u00fcl marad<\/h4>\n\n\n\n
3. Serif \u00e9s sans serif p\u00e1ros\u00edt\u00e1s<\/h4>\n\n\n\n
4. Kontrasztos karakterek haszn\u00e1lata<\/h4>\n\n\n\n
5. Bet\u0171t\u00edpusok azonos forr\u00e1sb\u00f3l vagy alkot\u00f3t\u00f3l<\/h4>\n\n\n\n
6. M\u00e1s st\u00edlus\u00fa bet\u0171t\u00edpusok<\/h4>\n\n\n\n
Harmadik bet\u0171t\u00edpus?<\/h3>\n\n\n\n
Seg\u00edt a technika<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/05\/betutipus-parositas.png\")
<\/figure><\/div>\n\n\nN\u00e9h\u00e1ny p\u00e9lda bet\u0171t\u00edpusok kombin\u00e1l\u00e1s\u00e1ra<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/09\/montserat.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/09\/montserrat-es-open-sans.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/09\/poiret-one-es-open-sans.png\")
N\u00e9h\u00e1ny hiba, amit ne k\u00f6vess el a bet\u0171t\u00edpusok kombin\u00e1l\u00e1s\u00e1n\u00e1l<\/h3>\n\n\n\n
Ne haszn\u00e1lj k\u00e9t k\u00e9z\u00edr\u00e1sos bet\u0171t\u00edpust!<\/h4>\n\n\n\n
Ne p\u00e1ros\u00edts nagyon hasonl\u00f3 bet\u0171t\u00edpusokat!<\/h4>\n\n\n\n
Ne haszn\u00e1lj egyszerre novelty \u00e9s display bet\u0171t\u00edpusokat!<\/h4>\n\n\n\n
Ne haszn\u00e1lj elt\u00e9r\u0151 hangulat\u00fa bet\u0171t\u00edpusokat!<\/h4>\n\n\n\n
Ne haszn\u00e1lj t\u00fal sok bet\u0171t\u00edpust!<\/h4>\n\n\n\n
Nem haszn\u00e1lod ki a bet\u0171m\u00e9retekben, -vastags\u00e1gokban \u00e9s t\u00e9rk\u00f6z\u00f6kben rejl\u0151 lehet\u0151s\u00e9geket!<\/h4>\n\n\n\n
Megfeledkezel a hierarchi\u00e1r\u00f3l!<\/h4>\n\n\n\n
T\u00fals\u00e1gosan belemer\u00fclsz a designer fontok vil\u00e1g\u00e1ba!<\/h4>\n\n\n\n
Nem vagy k\u00f6vetkezetes a bet\u0171k haszn\u00e1lat\u00e1n\u00e1l!<\/h4>\n\n\n\n
Hogyan alak\u00edtsd ki a tipogr\u00e1fiai hierarchi\u00e1t a weboldaladon?<\/h2>\n\n\n\n
\n
5 bet\u0171t\u00edpus, ha biztosra akarsz menni<\/h2>\n\n\n\n
Open Sans<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/open-sans.jpg\")
<\/figure><\/div>\n\n\nRoboto<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/roboto.jpg\")
<\/figure><\/div>\n\n\nHelvetica<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/helvetica.png\")
<\/figure><\/div>\n\n\nMontserrat<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/monsterrat.jpg\")
<\/figure>\n\n\n\nAvenir<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/05\/avenir.jpg\")
<\/figure><\/div>\n\n\nHogyan v\u00e1lassz bet\u0171t\u00edpust, ha fontos az olvashat\u00f3s\u00e1g a weboldaladon?<\/h2>\n\n\n\n
\n
\n
Mi az a web-biztos bet\u0171t\u00edpus? \u00c9s mi\u00e9rt \u00e9rdemes haszn\u00e1lni?<\/h2>\n\n\n\n
\n