Betk, tipogrfia

ingyenes alapoz leckk 2. rsz

Pixelgyr Kft. 2012 - Minden jog fenntartva!

Azt szeretnm tudni - mormolta maga el -, mi is van egy ilyen knyvben, amg csukva van. Termszetesen betk vannak benne, melyeket paprra nyomtattak, de mgis valaminek kell mg lennie benne, mert ha kinyitom, egyszerre elttem ll egy egsz trtnet. Szemlyek bukkannak fel, akiket mg nem ismerek, mindenfle kalandok, tettek s harcok fordulnak el - s nha tengeri viharok jtszdnak le, vagy az ember idegen orszgokat s vrosokat lt. Ez mind benne van ugyanis valahogyan a knyvekben. El kell olvasni, hogy tlhessk, ez vilgos. De bell mindez mr elre megvan. Szeretnm tudni, hogyan. Michael Ende

www.webdesigntanfolyam.com

A szveg
Hogyan vedd r a ltogatidat, hogy elolvassk a gondosan megrt szvegeid?

weben megjelen tartalom tetemes rsze szveg, ami csak arra vr, hogy a ltogatk elolvassk. Az emberek tbbsge nem szeret hosszabb szvegeket olvasni, radsul monitoron sokkal nehzkesebb is az elolvasott szveget rtelmezni, gy legtbb-szr nem is olvassk el, brmennyire is szeretnnk, mg akkor sem, ha nekik is jobb volna.

Mit lehet tenni?

A tipogrfia a szvegek megjelentsnek tudomnya, amely a nyomtats ta ltezik, teht a szablyai elg kiforrottak. Logikusan itt most az jnne, hogy felsorolom ezeket, viszont ahogy sok msban, a weben ez is mskpp mkdik kicsit, gy nem szeretnm, ha azok rgzlnnek. Ami mindent fellr, azaz a megjelenst is, az az olvashatsg.

Andr Beato galrijban tovbbi szemet gynyrkdtet tipogrfik tallhatak

www.webdesigntanfolyam.com

Betcsaldok
A
bettpusok megvlasztsa egyik kulcseleme a webdesignnak, amelyet gyakran mr egy meglv arculat is meghatroz. Megszmllhatatlan klnbz betcsaldok llnak rendelkezsre, tlthetek le ingyen is tucatszm.

A bettpusok 5 nagy csaldba sorolhatak Serif - azaz talpas bettpusok Sans serif - azaz talpatlan bettpusok Kalligrafikus - azaz dlt, rott hats bettpusok Dekoratv - azaz dszt, klnleges bettpusok Monospace - azaz fix szlessg
Serif, a talpas
Nyiss ki egy knyvet, s nagy valsznsggel mris tallkozol egy bettpussal a serif fajtbl. Nyomtatsban a talpas betforma a legelterjedtebb, pont a talpa segti az olvashatsgt, hiszen knnyebb kvetni, sorvezet szerepe van, gy nem kell kisiskols mdon az ujjunkkal kvetni.

Sans-serif, a talpatlan
Br vannak fellngolsok, a talp nlkli bettpus webes szvegknt tovbbra is tartja a megszerzett els helyt. Ezek sima, dszts nlkli betcsaldok az oldalak 70%-n segtik a szvegrtst. Vannak helyzetek, amikor szakthatunk a hagyomnyokkal, de az Arial, Helvetica s a Verdana ezentl mindenhov kvet.

A web azonban itt is mindent visz - ebben a kzegben mr a betk tulajdonsga sem a rgi - azaz szmos teszttel, kutatssal igazoltk, hogy kpernyn a talpas betcsald nagyon frasztja a szemet, ezrt hosszabb szvegekhez nem javasolt.

www.webdesigntanfolyam.com

Kalligrafikus, a kacskarings
rott, vagy ms nven mg Kurzv bettpusoknak hvjk az sszes olyat, amely kzrsra hasonlt, kzzel ksztett jelleggel br pl. fests Ezek a betcsaldok hosszabb szvegknt elg gyilkosak, ezrt csak cmsorknt, vagy dsztelemknt alkalmazzuk ket illetve arculattervezshez, logkhoz nyjtanak j alapot, ahol a szveg egy rvidebb- hosszabb mrkanv mindssze.

Egy ilyen felirat a teljes sszkpet befolysolhatja - pl. ha kivlasztassz egy szp, kttt, kzrs jelleg bett, mint az Amazone Bt, az a tovbbi stlusjegyeket is behatrolja - elg furcsn mutatna egy szgletes, geometriai jelleg emblma mellett. Persze soha ne mond, hogy soha... amg nem lttad. A Comic Sans meg egyszeren csak ciki. :)

Forrs: Pinterest

Monospace, a fix
Ezek a betk az rgppel rott szvegre emlkeztetnek a leginkbb - minden egyes betjk fix szlessg, azaz ugyanakkora. Jellemzen kdok, programrszletek megjelentsre hasznljk a szvegben.

Dekoratv, a fantasztikus
Fantasy fontok - ahogy az elnevezsl kvetkeztetni lehet, ezek aztn az igazn csicss, mvszi betk tnyleg csak dsztsre lesznek jk, sokszor mg gy is olvashatatlanok. Foly szveghez, adatok megjelentsre semmikpp ne hasznld!

www.webdesigntanfolyam.com

Websafe s a haverok
A
web safe a webes tipogrfiban azokat a bettpusokat jelenti, amelyekrl tudhat, hogy minden rendszerben (Windows, Mac, Linux...) rendelkezsre llnak, brmely felhasznl gpn, n. rendszer bettpusok. Ezek szma bizony elgg korltozott. Tovbbi korltokat jelent, hogy arra is kell gondolnunk a munka sorn, hogy mobilon, s 24 wide monitoron is tetszets, s olvashat legyen/maradjon. A lecsendesed bngsz hbor is betesz ennek - msknt kezeli egy Safari, s mondjuk az Internet Explorer a megjelentend bettpusokat, a felhasznl egyni kpernybelltsairl nem is beszlve - pl. felbonts, vagy be ill. kikapcsolt lsimts.

Szpsg, vagy olvashatsg? Melyik a fontosabb?

Aztn a formzs sem az igazi.

Nem csak a talpas bettpusokat szmztk, hanem a sorkizrt szveget is (faltl falig szveg), mert nincs megfelel elvlasztsra lehetsg, gy lukak lesznek a szvegben, ami csnya, s rontja az olvashatsgot. Igen, jl ltod - a megtervezett szveg szinte sehol sem lesz pontosan ugyanolyan, amilyennek Te meglmodtad. A kezd, s a lustk els reakcija ez: ksztenek egy kpet Photoshopban, arra rja a szveget, s slusszpassz, mindenhol mindenkinek ugyanolyan szp. Nononono! Ez csak ltszlag j megolds. Ugyanis a szveg tbb szempontbl fontos, hogy szveg maradjon - pl. a kprl nem tudja leolvasni a keresmotor, ezrt rejtve marad az oldal a ltogatk eltt. Msrszt macers ha mdostani kell. Szval a szveg az legyen szveg, a kp meg kp.

www.webdesigntanfolyam.com

Ahogy emltettem, azrt mr vannak alternatvk, hogy ne csak ez a szegnyes kszlet legyen elrhet. Mivel a felhasznlt nem krhetjk meg, hogy teleptgesse az ltalunk preferlt bettpust, gy egy msik lehetsg, hogy bngszs kzben hvjk szmra el a weboldal httrtrjrl egy kis kddal. Mostmr erre is sok lehetsg van - ingyenes s fizets egyarnt. sIFR , Cufn, Google Fonts stb.

www.webdesigntanfolyam.com

Tulajdonsgok
A bettpusoknak nem csak csaldja, s neve van, hanem egyb tulajdonsgai is. Ahogyan egy Word dokumentumban tudod formzni a lert, nyers szveget, gy a honlapszvegeket is. A betk nagysgt, sznt, tpust (vastag, dlt), a hasznlt bet, s sorkzt lltjuk be leggyakrabban. A szvegek formzsra azonban vannak szablyok, tancsok - amelyeket j, ha sorra vesznk a tervezskor.

Ne hasznlj tl sok fle bettpust!

Zavar a szemnek, kusza hatst kelt, ami nem tesz jt az olvassi arnyoknak sem. n max. 3 fle bettpust javaslok, de inkbb kettt, s annak klnbz mretbeli, s formzsi alakjait. A szveg arra val, hogy elolvassk, ne itt ld ki a kreativitsodat! Az egyik szably, amit unalomig szoktam ismtelgetni, hogy ha nem tudsz jobbat, ne vltoztass! A leginkbb bevlt kombinci a cmsoroknak valamilyen talpas bettpus (Georgia, Times New Roman), a szvegeknek pedig talp nlkli (Arial vagy Verdana) Termszetesen nem akarlak korltozni az jtsokban, prbld ki, tesztelgesd mi az ami mkdhet!

A lnyeget emeld ki, ne mindent!

A betk sznvel ugyanez a helyzet. A kevesebb tbb, sokkal tbb. Jellemzen szintn a cmsorok szne szokott eltrni a folyszvegtl, illetve a linkek sznei, jelezvn a kattinthatsgot. Egyes szvegrszeket lehet mg sznnel kiemelni - de kiemelsre hatsos mg a vastagtott, vagy dlt szveg is. Az olvashatsgot nem csak a bettpus jellege hatrozza meg, hanem az emberi tnyezk is. Olvass kzben a tekintetnk nem megy vgig a szvegen folyamatosan, hanem ugrsokkal rgzti, egyszerre 3-4 betre, vagyis 1-2 sztagra koncentrl. Az ilyen szkennel olvass miatt fontos, hogy a szveg formzva legyen, gy knnyebb tnzni egy hosszabb szveget, kiszrni a lnyeges rszeket. Biztosan tallkotl mr olyan honlappal, ahol faltl falig rt a szveg, amit meglehetsen fraszt volt olvasni, mg taln a nyakad is ide-oda tekergetted.

Az optimlis szveghosszt az okosak 60 karakter szlessgben hatroztk meg. A tapasztalat az, hogy ez a bet mrettl, s tpustl egyarnt fgg, gy n inkbb a 600 px szlessget javaslom etalon gyannt - ez a sor 600 px szles :)

www.webdesigntanfolyam.com

Legyen olvashat! De ez mit jelent?

Volt a tpus, a szn - a mret mg nem. A legjobb betmret az, ami olvashat a tbbsg szmra. Ez a 12-16 pixel tlagosan - a betket pixelben mrjk. Az ennl kisebbek megjegyzsek, kpalrsok stb. az ennl nagyobbak a cmsorok szmra idelisak. A 10 px alatti mr-mr olvashatatlan, a 22-24 px feletti pedig brutlisan nagy. (Nem grafikkrl beszlnk, ott ennl nagyobb betmretek is hasznlandak, fleg ha dekoratv cllal kerlnek oda.) Nagyon fontos tisztban lenni azonban azzal is, hogy a weben nincs fix betmret - a megjelent fellet felbontsa, a bngsz belltsa, vagy maga az oldal is lehetsget biztosthat a betmretek nvelsre vagy cskkentsre. Az emberi tnyezk is kzrejtszanak - ha tudjuk, hogy egy weboldal vrhat olvaskznsge megette a kenyere javt (50+), akkor ne is gondolkodjunk a 12 px alatti brmilyen szvegben, mert nem fogjk tudni elolvasni.
betm r 24 px mso Ez a c 6 px. pedig 1 zveg Ez a s ret

Hejesrs
Bevallom, hogy nem vagyok egy grammarnazi, ahogy azokat szoktk hvni, akik frcsgve kardoskodnak a magyar nyelv, a helyesrs, s az elfeledett rsjelek, szablytalan mondatok ellen. Rszint igazuk van, rszint a nyelv, s a lert szveg is egy l dolog, s nincs kbe vsve. A szmtgppel, internetes krnyezetben vgzett munka egyik htrnya is, hogy a valaha plds helyesrs khmm... megkopott. Az oltri szarvashibk azonban rosszul veszik ki magukat, zleti honlapokon nem csfoskodhatnak ilyen szvegek.

www.webdesigntanfolyam.com

Kontraszt
Mr megint itt a kontraszt - most a szveg s a httr szne kztt. A fekete alapon fehr oldalakra nem rdemes regnyrszleteket kzlni, mert brmily kitartak is az olvask, a fj szem, vagy fej nem j mka.

Ez a szveg nem tl jl olvashat, ugye? Ez pedig tkletesen! Mg ez is! De ez mr kevsb! Ez szrny! Ez a szveg nem tl jl olvashat, ugye? Jaj, a szemem! Segtsg! Na, gy mr jobb! Huhh... Kszi!
Ha nem szeretnd, hogy az olvasidnak, ltogatidnak csak fejfjst okozz, akkor gyelj a szveg sznek hasznlatra! Ki akarsz emelni valamit? A sznkavalkd nem j megolds! Hangslyozd nagyobb mrettel, alhzssal, vagy akr egy nagyobb sorkzzel!

www.webdesigntanfolyam.com

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed u vitae eros scelerisque molestie. Pellentesque habitant morbi tr senectus et netus et malesuada fames ac turpis egestas. Sed dig tincidunt scelerisque. Etiam venenatis tempus massa, vel variu sollicitudin vel. Sed convallis venenatis ipsum porta varius. Fu arcu purus, aliquet eget viverra ut, mattis ac quam. Duis susci lis sit amet dapibus sodales, eros mauris interdum lacus, vel bi dum ipsum arcu sit amet lorem. Curabitur congue magna ac l
Mi ez a Lorem ipsum blabla? A Lorem ipsum dolor sit amet kezdet szveg az 1500-as vek ta a nyomdszok, tipogrfusok, s tervezgrafikusok tltelk szvege. Akkor hasznljuk, ha nincs meg a konkrt szveg, mert gy van sszelltva a kamu latin szveg, mintha egy valdi nyelv lenne, ezrt vizulisan mkdik. Mirt nem j egy Index.hu cikk erre? Pldul azrt, mert megrendelknt azon fogsz lovagolni, hogy mirt Kiszel Tndrl szl egy cikk, mikzben a designra kellene koncentrlni. A lipsum.com-on generlhatsz magadnak ilyen szvegeket, amikkel tervezni tudsz, amg nincs meg a vals tartalom - ami igen gyakori. Pedig ha elre megrod a szvegeket, ahhoz sokkal knnyebb grafikailag is hozzfogni, mint fordtva!
www.webdesigntanfolyam.com

Segtsg!

Valami latin szveg van az oldalamon!

Vltozatosabb dummy szvegre vgysz?

Egy kis Tarantino betssel Samuel L. Jackson Ipsum remekeivel is kitltheted a szabad helyeket, vagy zombi, sr, spanyol, esetleg cukorszirupos szvegre lenne szksged, az is van! Ezen a linken 30 ilyen szveggenertort tallsz :)

www.webdesigntanfolyam.com

Hogyan formzz?
A formzatlan szvegnl az res lap is rdekesebb

honlapon lv szveges anyagok megjelenst (is) az un. stluslap - CSS biztostja.

A dolog lnyege, hogy ezekben a stluslapokban kd formjban troljuk el az egyes szvegtpusokra vonatkoz tulajdonsgokat pl. milyen bettpussal, sznnel, jobbra vagy balra zrva stb. jelenjen meg. Ha nem tudsz errl tbbet, egyelre nem bonyoldnk bele. Inkbb nzzk meg azt, hogy milyen szvegtpusok fordulnak el egy tlagos weboldalon.

Bekezdsek
Hosszabb szvegeket egy logikai felpts alapjn, szttagolhat bekezdsekre, paragrafusokra szoktunk osztani. Ez segti a szveg gyors ttekintst, olvashatsgt, rtelmezhetsgt is. A szvegek balra, jobbra, kzpre zrtak, illetve sorkizrtak lehetnek. Ezeket ismerheted, ha hasznlsz brmilyen szvegszerkeszt programot. A leggyakoribb a balra zrt szveg, ettl eltrni csak indokolt esetben szoks - balrl jobbra olvasunk. A kzpre zrt szveg, fleg ha hosszabb formzatlannak tnik. A sorkizrt szvegrl mr esett sz - lukakat hagy a szvegben, ami nem szp, s nehezebben olvashat a kpernyn. Viszont ha esetleg a szvegben kisebb szvegdobozt kell elhelyezni, oda remek vlaszts a sorkizrt formzs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dictumst. Nulla ultrices tristique eros eu convallis. Nulla facilisi. Aenean consequat volutpat purus, non volutpat lectus tincidunt non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dictumst. Nulla ultrices tristique eros eu convallis. Nulla facilisi. Aenean consequat volutpat purus, non volutpat lectus tincidunt non.
kzpre igaztott

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dictumst. Nulla ultrices tristique eros eu convallis. Nulla facilisi. Aenean consequat volutpat purus, non volutpat lectus tincidunt non.
jobbra zrt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dictumst. Nulla ultrices tristique eros eu convallis. Nulla facilisi. Aenean consequat volutpat purus, non volutpat lectus tincidunt non.
sorkizrt

balra zrt

www.webdesigntanfolyam.com

Cmsorok
A felosztott szvegeket cmsorokkal oszthatjuk tovbb f, s alszakaszokra. A klnbz szint cmsorok egy szveg hierarchit tesznek lehetv. Oldal cme, alcmek, mlyebb szint alcmek.

h1 a lap cme
h2 a cikk cme
h3 alcm ...

Kiemelsek
Vastagts - valamely szveg ersebb hangslyozsra, kiemelsre alkalmazhat, a kvrtett szveg rgtn magra vonja a figyelmet. Tlzsba vinni azonban nem szabad, mert tl sok vastagtott szveg esetn ez a tulajdonsga elsikkad, cserben a szveg nehezen olvashatv, slyoss vlik. Dlt szveg - gyengbb hangslyozsra val kiemelsi forma, a dlt bet foly szvegbl nem ugrik ki annyira - idzetek, idegen kifejezsek formzsra Alhzs - ezzel a kiemels tpussal webes szveg esetben csnjn kell bnni, mert elssorban a linkek jelzsre hasznljuk.

Hivatkozsok, vagyis linkek

Minden ami a szvegben kattinthat, azt jelezni kell valahogy. A leggyakoribb az emltett alhzs, de szoks vastagtssal, eltr sznnel is jelezni. A webergonmia (amely a weboldalak felhasznlbart kialaktsnak tudomnya) legelvakultabb hvei, akik egybknt gyllnek minden design elemet - azt javasoljk, a linkeket mindig mindenhol kk sznnel, alhzssal jelljk, mert ez a legrgebbi, s legismertebb, konvencionlis jells. Amely valban gy van, ha kk, alhzott szveggel tallkozunk, hivatkozst vrunk alatta. A linkeknek 3 klnbz llapota van - amelyeket a tervezs sorn meg kell adni. norml szveg link szne aktv link ltogatott link

A link llapot, ami a mg nem megltogatott oldalakat jelzi, ez az alapllapot. Ha az egeret rhzzuk, akkor az n. hover llapot - a link szne megvltozik. s azoknak a linkeknek is megvltozik a szne, amelyeket mr megltogattunk - ez alapesetben lila. A hivatkozsok szneit a vlaszott arculati sznekkel sszhangban, a Websafe palettrl vlaszd meg mindig, mert a linkek sznt is a stluslapban, kdknt troljuk majd el.
www.webdesigntanfolyam.com

Felsorolsok
A felsorolsok vagy listk knnyen ttekinthetv teszik a felsoroland adatokat, gyakran hasznljuk ket - szintn 3 tpusuk van. Rendezetlen lista Sima, egyszer felsorols, egyms utn - ptty, krcske, ngyzetecske jellssel, mint elzleg a linkek szneit jeleztem Rendezett lista Szmozott, vagy betrendes, rmai szmokkal jelzett felsorols Definicis lista Al- s flrendelt fogalmak listjnak elksztsre, mint ez is ppen. A szvegek formzsa nem pusztn eszttikai ok, a felhasznlt segtik a tjkozdsban, szvegrtsben, s termszetesen zleti cljai is vannak annak, hogy egy adott szveget minnl tbben elolvassanak. A tipogrfia, vagyis a szveg sszhatsa mr hatst gyakorol a ltogatra, gy egyetlen sor elolvassa nlkl is eldnti, hogy az szmra rdekes, vagy rdektelen. A jl tagolt szveg a keresrobotok szmra is lnyeges a weboldalak feltrkpezse kzben a megadott paramterek alapjn sorolnak szvegeket fontosnak, vagy kevsb fontosnak, amely a honlap visszakereshetsgt biztostja a kereskben.

sszegzs
A tipogrfia, a bettpusok megvlasztsa nagyon fontos eleme a webdesignnak - amennyire fontos, annyira nem szabad tlspilzni. Hasznlj 2-3 bettpust, azt is kvetkezetesen! Formzd a szveget olvashatra, a szemnek kellemesre! A szvegek szneit az arculat szneihez igaztsd, ne hasznj tl sok sznt! gyelj a megfelel httr/betszn kontrasztra! Figyelj a sorok szlessgre, a kellemesen, fradtsg nlkl olvashat szveg max. 500-600 px szles!

www.webdesigntanfolyam.com

Szvegrs
Ki rja a szveget?

szvegrs, fleg a webes szvegrs ma szintn egy kln kreatv szelete a webes szakmnak. Az sszes szvegre ebben a fzisban nincs mg szksg, hiszen a webdesign, weboldal kszts sorn a keretrendszer kerl kidolgozsra, amelybe aztn a megrendel, vagy a felhasznlk helyeznek el tartalmat. Amire azonban mgis szksg van a tervezs sorn, pldul az arculati elemek kidolgozsnl, az a marketing szveg. Plda: ha az gyfelnk egy hiteltancsad cg, amelynek logt, arculatot, weboldalt kszlnk tervezni, kell valamilyen szveges vz, amire a vizulis elemek felfzhetek. Bizonyra mg emlkeztek Emesre, akit a Budapest Bank akkor j arculatval loptak be a mindennapjainkba. Pnzgyekrl rtheten. Pnzgyekrl egyszeren. Ezekre a mondatokra plt fel az j arculat, s az egsz kampny. Egy hiteltancsad cg esetn is hasonlra - egy szlogenre, egy ptkre van szksg, amelyet aztn vizulisan is megtmaszthatsz. Mindenki minsgi, olcs, megbzhat s sikeres. De mitl ms/jobb/klnlegesebb, mint a versenytrsak? Ez elmletben egy csapatmunka, de lehet, hogy Te magad vagy a csapat - grafikus, marketinges s szvegr is akr, ha rendelkezel ilyen vnval. Ha nem, akkor bzd szakemberre - a j szvegen a cg bevtelei mlhatnak! Mert hiba ilyen sarkallatos pont a szveg, legtbbszr ezen cssznak el a dolgok. A legtbb weboldal kszttetni, terveztetni szndkoz ember, cg semmilyen szveges tartalommal nem rendelkezik a munka megrendelsnek, elkezdsnek pillanatban - ami htrltathatja a munkt, st ksbb a ksz szvegek esetn esetleg jra kell alaktani nhny dolgot. Tbbnyelv oldalak esetn gyakran okoz problmt, hogy valami magyarul egy rvid, tmr kifejezs, de nmetl, vagy romnul egy kisregny, s nem fr el mondjuk egy menpontban, vagy egy fejlcben megfelelen.
www.webdesigntanfolyam.com

Szveget rni nem knny, fleg ha muszj. Mivel n viszonylag sokat rok, tananyagot, cikket, blogbejegyzst, vagy dokumentcit, s termszetesen rtkestsi szveget is, ezrt van pr mdszerem. A legtutibb az Evernote nev alkalmazs, ami egy webes program, de mobilon, vagy tableten is elrhet, gy brhol vagy tudsz jegyzetelni bele, vagy egy kis szinkronizci, s ott folytathatod a munkt, ahol abbahagytad. Kp s URL csatols, hangjegyzet, s ingyenes hasznlat.

Bettpusok
A
z emltett betcsaldok meglehetsen sok csaldtaggal rendelkeznek - ezek a bettpusok. Antik bettpusok, Art Deco, Art Nouveau, Kalligrafikus, Kapitlis, Festett, Kpregny stlus, Dotted - vagyis pontozott, Elegns, Vicces, Futurisztikus, Gtikus, Graffiti, Kzrs, Brand, Military, Old Style s gy tovbb... Ezek stlusjegyek, ami alapjn a bettpusokat jabb csoportokra lehet osztani. Szksges is, mert rengeteg van. Tbb ezer, vagy akr tbb tzezer, hiszen csak saccolni tudom, s ebbe mg nem vettem bele a klnbz nyelvek, klnbz karakterekkel rendelkez egyedi betfajtit. Ahogyan a sznekhez, gy a bettpusokhoz is sorolhatak tbblettartalmak, jelentsek, jellemz felhasznlsi helyek - mg ha nem is annyira konkrtak. Az mr kiderlt, melyek ajnlottak szveghez, s melyek dsztelemnek, cmsoroknak. Gyakorlatilag majdmindegyik a nevben rejti a stlust - pl. Antik, vagy Gtikus, ezen nincs mit magyarzni.

Hol s hogyan hasznlhatod ket a gyakorlatban?

Termszetesen brhol, de nem brmelyiket. Kpzeld el ezt a nagyon tldsztett, dekor bettpust egy gyvdi iroda, egy ingatlankzvett, vagy mondjuk egy pnzgyi vllalkozs logjban.

Amellett, hogy ezek a tmk nem sok mozgsteret adnak, a kialakult hagyomnyoknak is eleget kell tenni - a feliratnak nem csak dszt, s informci kzl funkcija van, hanem egy mgttes tartalmat is ad - stabilitst, megbzhatsgot kell pldul sugallnia egy gyvdnek, mgpedig mr azeltt mieltt tallkoztok. A fenti tpus erre alkalmatlan - komolytalann tenn az egszet. Hivatalos szervek, jogi, pnzgyi cgek nem csak a sznekben visszafogottak, s decensek, hanem a bettpus megvlasztsban is.

www.webdesigntanfolyam.com

A talpas serif csald j pedigrt jelent, az egybknt jellegzetesen csapnival kormnyzati honlapokon ezekkel tallkozol. Jobb lett volna csak a cmsorokat, vagy csak a szveget ilyen tpussal szedni, mert nehezen olvashat. Kilg a sorbl a nemrg tadott magyarorszag.hu, amely modern vonalvezetssel s felptssel igyekszik korszernek tnni. Amennyiben folytatdna, s kiterjedne ez egy egysges kormnyzati arculatra, akkor mg csak-csak, de gy mintha semmi kzk nem lenne egymshoz.

www.webdesigntanfolyam.com

Nagyon npszerek az un. Grunge fontok, fleg a fiatalos, zenei, mvszi tartalmakhoz. A koszos, maszatos, trtt, tdtt hats, depresszv, stt tpus meglehetsen rossz vlaszts, ha ezeket a jelentstartalmakat nem akarjuk sszektni egy olyan fogalommal mint a wellness, az egszsg, a gygyts, vagy a szpsg.

Te bemennl abba a szpsgszalonba, amelyiknek ilyen a felirata?

Nekem a kcos, s rszeg Courtney Love jutna elszr eszembe, hogy biztos ilyen a fodrsz, s minden vgsnl belehamuzik a flembe. Pedig csak egy feliratot lttam. Ez mindjrt jobb:

A sans-serif fontok, br sokszor unalmasnak tnnek a maguk egyszersgvel, de mgis megfelelek a tisztasgot, egyszersget, egyenessget sugallni kvn tmknak. A Log s arculattervezs tanfolyamon errl mg bvebben esik sz, csak szerettem volna hogy lsd a mgttes tartalmat egy-egy tpus mgtt, s gondolkodj ezen a vonalon, amikor egy bettpust kivlasztassz egy munkhoz.

www.webdesigntanfolyam.com

Font formtumok
True Type (.ttf), ill. Type 1 fontkszletek a Windows XP eltti idkbl szrmaznak, un. rendszerfontok. Tekintve, hogy az XP is elmlt 10 ves, hahh.. szval rgiek. Ezrt sok esetben nem mkdnek az aktulis opercis rendszerekkel, programokkal - gy lehetsges az, hogy hiba van teleptve egy bettpus a gpeden, de mgsem tudod hasznlni, vagy elgg foghjas. Postscript Type (.pfb s .pfm) - Windowson s Macen egyarnt mkdnek. Open Type (.otf) - egy font formtum, amely 1996-ban az Adobe s a Microsoft ltal kzsen meghozott dntsbl szletett, amelyhez a Macintosh is csatlakozott, teht affle szabvny lett. Az OpenType bettpusok bvtett karakterkszletet s elrendezsi funkcikat, gazdagabb nyelvi tmogatst s specilis tipogrfiai belltsi lehetsgeket biztostanak.

Hogyan teleptsd a fontokat?

Tbb megolds ltezik: 1. msold be a kvnt fontot a c:\windows\fonts alknyvtrba 2. pl. XP alatt: Start men -> Belltsok -> Vezrlpult, kattints ktszer a Bettpusokra. Fjl men -> j betkszlet teleptse 3. valamilyen fontkezel szoftver segtsgvel

www.webdesigntanfolyam.com

rvztrtkrfrgp
Mi van?
Mr rtam neked bizonyos korltokrl, amit a webes megjelents tern elkell szenvedni/fogadni. Sajnos itt a kvetkez: az des anyanyelvnk. Amely oly szp, s pratlan, hogy a cmben tallhat sok , , , , , , , , betkkel is csak rendelkezik. gy csak az a bettpus lesz szleskren hasznlhat a szmodra, amely tartalmazza ezeket a karaktereket - ezt az rvztrtkrfrgp szval rgtn le is tudod tesztelni! Un. placeholder-text, vagy pangram - ami az angol nyelvterleten a the quick brown fox jumps over the lazy dog rigmus. Ha nem tetszik az rvztr tkrfrgp, hasznlhatod a nylflvg trkzsrt, sznrzdt ftkldnc, vagy akr a jhr tzrgynt kifejezseket is :D A maradk fontok, amelyek nem rendelkeznek ezekkel - gy a 85% - meg j lesz dsztsre, olyan feliratok tervezsre, amelyhez nem kell kezet.Vannak tipogrfusok, s tipogrfus hajlam emberek, akik szp magyar szval - kezetestik, magyartjk ezeket a tpusokat. Hozzrts nlkl n nem ajnlom, mert lttam mr csnya, torz eredmnyeket, de ha mgis rzel r ksztetst, a FontLab nev szoftvert ajnlom. Hasznlhatod mg a Magyar kes nev programot is, amely az alap fontkszletbl legenerlja a szksges karaktereket. Elfordul az is, hogy a bettpus rendelkezik az adott karakterekkel, a program amiben hasznlni akarod, azonban mgsem tmogatja. CE - Central European (MS Windows 1250) - ezek vagyunk mi. A programnak ezt a kdkioszts kell hasznlnia esetleg, ha az alap nyelvbellts ms. Ha semmi sem megy - nzd meg Hal bartom mdszert - Hossz problma

www.webdesigntanfolyam.com

A font szoftver
Ezt viszonylag kevesen tudjk. Ami azt jelenti, hogy ugyangy, mint a szoftverek esetben nem tulajdonjogot szerzel feletette, csak felhasznlsi jogot, mgpedig csak arra a terletre, amelyre az adott szoftver, jelen esetben bettpus kiadja feljogost. A legtbb ingyenes bettpus valjban csak addig ingyenes, amg nem hasznlod fel kereskedelmi clokra, hanem mondjuk a sajt ki magn oldalad, blogod dszted vele. Azonban elsdlegesen kereskedelmi clokra hasznlunk fel mindent, amirt mint szolgltats pnzt kapunk - ergo ezekrt is licendjat kellene fizetni a ksztnek. Amit persze senki sem tesz, s ez a hallgatlagos megegyezs a free dolgokat gyrtk s felhasznlk kztt. Hiszen aki ingyenesen teszi kzz, letlthetv a munkjt a humanitrius indokok mellett ms clok is vezrlik - gyorsabb, szleskrbb ismertsg, portfli bvts stb. Amellett, hogy a szoftvervdelem fenn ll, bizonyos tpusokon mg tovbbi szerzi jogok is fennllnak, mint grafikai alkots. Ha valaki kitall egy grafikai mnek minsl, egyedi bettpust s ebbl betkszletet kszt, akkor a betk arculata, kpe, rajza szerzi jogvdelem trgya lehet - szksges a szerzi jogosult engedlye az tdolgozshoz is. Azon fontkszletek esetn amelyeket clzottan kereskedelmi felhasznlsra sznnak, s rustanak, ugyanaz a szably vonatkozik, mint brmelyik licenszdjas szoftverre a gpeden pl. opercis rendszer. Itthon a Gidata Kft. az egyik legnagyobb font kpviselet - a www.font.hu oldalon felhasznlsi, s jogi krdsekre bvebb vlaszt kaphatsz.

www.webdesigntanfolyam.com

Milyen bettpus?
Sokszor elfordult velem, hogy kaptam egy logszer kpzdmnyt, amit rekonstrulni kellett volna - persze az eredeti bettpusrl, amivel kszlt nem hallott senki, azt se tudja mi az. Szerencss csillagegyttlls esetn - ami azt jelenti, hogy a bettpus krvonalai megklnbztethetek van megolds. What the font? vagy jabb testvre a What font is? Ha mg gy sem sikerlt rlelni, akkor a bettpus egyes tulajdonsgai alapjn - dlsszg, vonalvezets stb. mg lehet keresglni az albbi oldalon, esetleg kiegyezni vmi. hasonlval. http://typenav.fontshop.com/

Ha Chrome bngszt hasznlsz, akkor a Google megint a bartod, mert egy What Font nev apr kiegszts, s helyben megmondja neked milyen felirat milyen bettpussal rdott, DE csak ha szveges, kprl nem tudja leolvasni.

www.webdesigntanfolyam.com

Fontkezels
A pntek dlutnok a legalkalmasabbak a vadszatra - amikor mr lehet lazulni, mert nem srgetnek a hatridk - a kszleteim frissttsvel tltttem ltalban. Fleg, amg rendes munkahelyem volt. Amita n vagyok a fnkm, mr nehezebb lgni. Ez egy fontvadszattal tlttt fl nap utn tetemes zskmnyt jelent, hisz semmit sem szabad otthagyni, j lesz mg valamire, a mltkor is j volt az a fura bettpus, s klnben is. Az eredmny egy duzzadt fontmappa, borzalmasan belassult szoftverek - majd pr nap mlva rjvk, hogy ez gy kezelhetetlen, s uninstalllom a fontokat, vagy esetleg kivgom az sszeset a fenbe. 200300 tpusnl tbbet egyszerre felesleges folyamatosan mozgatni. Rengeteg font nzeget, kezel, kategorizl szoftvert kiprbltam mr - jelenleg a legtisztbb, s legszrazabb rzst a myFontbook.com-on tallhat szolgltats adja, amelyet minden teleptses macera nlkl tudok hasznlni, ltva az aktulisan hasznlatba lv kszleteket. Egy pillanat alatt felmri a szmtgpemen teleptett bettpusokat. Tbb nzet, cmkzsi lehetsg, megtudom nzni a teljes karakterkszletet egy kattintssal, s az rvztrtkrfrgp tesztet is eltudom vgezni.

Ez amolyan instant megolds, de n szeretem az ilyet. Az oldalon tallsz egy 4 perces videt is a hasznlatrl - vgtelenl egyszer. http://www.myfontbook.com

www.webdesigntanfolyam.com

Mire hasznlom?
Prhuzamosan mondjuk 3 projekten dolgozom - egy klma webshop, egy natrpatika, s egy wellnesshotel arculata vr megvalstsra. A lehetsges versenyzket elltom a megfelel Tag-ekkel, vagyis cmkkkel, illetve mg ezeken bell is fellltok egy hierarchit az 1-5-ig csillagozs lehetsgvel. Amikor konkrtan a tervezsre kerl a sor, mr nem kell tbogarsznom a teljes teleptett fontkszletet, csak ezt a 4-5 favorizlt tpust igyekszem kidolgozni.

Font manager szoftverek

FontExpert 2010 Sajnos csak prbaverzi, de nagyon knyelmes szoftver - szintn cmkzhetek, de kategorizlhatak is a bettpusaid - gy ltrehozhatsz egyedi sszelltsokat, s telepthetsz s eltvolthatsz kedved szerint - attl fggen ppen min dolgozol. http://www.proximasoftware.com/fontexpert/screenshots.htm FontExplorer Sajnos, ez mr nem ltezik ingyenes verziban. Mindent tud, amit egy ilyen szoftvernek tudnia kell - 80 Euro az ra http://www.fontexplorerx.com/download/ AMP Font Viewer Semmi extra, leginkbb nzegetsre j, de ingyen van, pici, knnyen futtathat, rgta bevlt alkalmazs. Telepteni/eltvoltani ezzel is lehet. http://www.ampsoft.net/ Nexusfont Jollyjoker. Ingyen van. Lehet mappzni, tagelni, telepteni, trlni, megkeresni a duplikcikat, pici s hordozhat. Windowsra. http://xiles.net/downloads/#NexusFont Ezeken fell mg vagy t tucat hasonl szoftvert tallhatsz, nagyjbl azonos tudssal - ingyen s sokpnzrt is. Ahhoz hogy tlsd mid van, mi az amit teleptettl, s mindez hasznlhat-e, arra az AMP Font Viewer teljesen ok, aztn ha egyedi ignyeid tmadnak - prblj ki prat, s megtallod a neked megfelel megoldst.

www.webdesigntanfolyam.com

Olvasnival
Offline, vagyis knyv
Sznt Tibor: A bet (1982 - Akadmiai kiad) n mr eladtam a sajt pldnyom, sajnos meglehetsen r alatt - gzm sem volt, hogy a 82-es knyv egy igazi ritkasg, pillanatnyilag 12-15 eFt krl van. Ha knyvtrban tallsz egy pldnyt, lapozd t mindenkppen, mindent megtudsz a betk trtnetrl. Ahogy Sznt Tibor: A tipogrfia cm knyvbl is. Virgvlgyi Pter: A tipogrfia mestersge szmtgppel (Osiris Kiad) Ez sem egy mai darab - de ezek a dolgok keveset vltoznak Tervezz btran! - Oldaltervezs s tipogrfia egyszeren s azon tl (Scolar Kiad)

Online
Designerek rnak az egyes bettpusokrl, knyvajnlk http://typographica.org Webes felhasznlsrl http://nicewebtype.com/notes/ Cmsor tipogrfia http://www.smileycat.com/miaow/archives/typography-for-headlines.php Kult foltblog A szmomra olvashatatlan fontblog. Merthogy direkt lsimtst hasznl, amit n meg alapbl nem. gy egy elmosdott massza a men, s szveg is. De mivel vannak rdekes posztok, nha kzdk egy kicsit. http://ilovetypography.com Igazi szemlegeltets fontblogok Szp felhasznlsok, tletesen megoldsok, tipogrfiai rdekessgek http://www.letteringtime.com http://www.typegoodness.com http://typenuts.com

www.webdesigntanfolyam.com

Betrajzok
Jtk a betkkel
Ez a mobil alkalmazs rajzolni tant meg a betk segtsgvel - lsd meg a karakterek mgtt a formkat, kezeld ket grafikus, dszt elemknt, s jpofa brkat tudsz alkotni unalomzsknt. De azrt ez tbb annl - fejleszti a vizulis ltsmdod, egy msfajta szemlletre tant, hogy akr rajztuds nlkl, egy kis fantzival is tudsz ltvnyos dolgokat alkotni, amik akr kiforrottabb formban ksbb egy kampny elemei is lehetnek.

Letlt

www.webdesigntanfolyam.com

Feladatok
Ne csak olvasd! Csinld!

1. Feladat

Keresd fel a FontFonter nev weboldalt - http://fontfonter.com Ez az oldal azt tudja, hogy brmely ltez honlap bettpusait lecserli az ltalad vlasztottakra. Pl: a Google.hu-t megnzhetem talpas azaz serif bettpussal is.

Egy ilyen eszkz honlap jratervezsekhez nyjt leginkbb segtsget, de jelenleg tged abban fog elkalauzolni, hogy mi a klnbsg a nzetek kztt. Mennyit tesz hozz, vagy vesz el az olvashatsgbl, ttekinthetsgbl a bettpus. A feladatod, hogy vltoztasd meg gy a kvnt weboldalak tipogrfijt, hogy javts ezen! Itt a digg.com-nl az ltalam kivlasztott FF Typestar Web nagyon sokat rontott, fleg a men olvashatsgn - a talpas FF Milo Serif Web, pedig a logval nem sszeegyeztethet formailag. A megvizsgland oldalak: - index.hu, hvg.hu - s egy szabadon vlasztott

www.webdesigntanfolyam.com

2. Feladat
Emlkszel a mlheti fogalmakra, amelyhez kpet kellett keresni?
Ez is hasonl feladat lesz, de mr kombinljuk a kettt, illetve hrmat. Ebben a feladatban 3 megbzd lesz, akinek a leend megjelensn kell dolgoznod, illetve elksztened. Egy drga francia tterem - Le gourmandise a neve Egy vidki gazda - Szab Jnos, aki bioborokkal foglalkozik - neki javasolhatsz mrkanevet is, de maradhat Szab Jnos borsz Egy kozmetikus, Aletta - aki most kszl egy kis zletet nyitni a belvrosban Lotti Szalon nven Mindhrom megbzhoz trsts egy sznsklt, s egy bettpust, amivel a mrkanevet lerod. Ez a feladat segt, hogy a fogalmakhoz nem csak szneket, hanem tbbletjelentseket is tudj trstani. gy tudod letiszttani azt a rengeteg gondolatot ami egy munka kapcsn kavaroghat a fejedben.

Ezek ilyen tbbsgben fejben gyakorls, nzelds, vagy egyszer feladatok - ennek ellenre krlek vedd ket komolyan, mert az alapok, egy szemllet elsajttsa nagyon fontos a jvbeli esetleges tovbbi tanulmnyokat, vagy munkkat illeten.
J munkt kvnok!

www.webdesigntanfolyam.com