Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Online Webdesign Tanfolyam 2. Betűk

1,163 views

Published on

4 részes alapozó lecke, 2. rész

Published in: Design
  • Be the first to comment

Online Webdesign Tanfolyam 2. Betűk

  1. 1. Betűk, tipográfiaingyenes alapozó leckék 2. rész Pixelgyár Kft. 2012 - Minden jog fenntartva!
  2. 2. “Azt szeretném tudni - mormol-ta maga elé -, mi is van egy ilyenkönyvben, amíg csukva van.Természetesen betűk vannak benne,melyeket papírra nyomtattak, de mé-gis valaminek kell még lennie benne,mert ha kinyitom, egyszerre előttemáll egy egész történet.Személyek bukkannak fel, akiket mégnem ismerek, mindenféle kalandok,tettek és harcok fordulnak elő - ésnéha tengeri viharok játszódnak le,vagy az ember idegen országokat ésvárosokat lát.Ez mind benne van ugyanis valahog-yan a könyvekben. El kell olvasni, hogyátélhessük, ez világos. De belül min-dez már előre megvan.Szeretném tudni, hogyan.”Michael Ende www.webdesigntanfolyam.com
  3. 3. A szövegHogyan vedd rá a látogatóidat, hogy elolvassáka gondosan megírt szövegeid?A weben megjelenő tartalom tetemes része szöveg, ami csak arra vár, hogy a látogatók elolvassák. Az emberek többsége nem szeret hosszabb szövegeket olvasni, ráadásul moni-toron sokkal nehézkesebb is az elolvasott szövegetértelmezni, így legtöbb-ször nem is olvassák el, bár-mennyire is szeretnénk, még akkor sem, ha nekik isjobb volna.Mit lehet tenni?A tipográfia a szövegek megjelenítésénektudománya, amely a nyomtatás óta létezik,tehát a szabályai elég kiforrottak. Logikusan ittmost az jönne, hogy felsorolom ezeket, viszontahogy sok másban, a weben ez is másképpműködik kicsit, így nem szeretném, ha azokrögzülnének.Ami mindent felülír, azaz a megjelenést is, azaz olvashatóság. André Beato galériájában további szemet gyönyörködtető tipográfiák találhatóak www.webdesigntanfolyam.com
  4. 4. BetűcsaládokA betűtípusok megválasztása egyik kulcseleme a webdesignnak, amelyet gyakran már egy meglévő arculat is meghatároz. Megszámlálhatatlan különböző betűcsaládok állnak rendelkezésre, tölthetőek le ingyen is tucatszám.A betűtípusok 5 nagy családba sorolhatóakSerif - azaz talpas betűtípusokSans serif - azaz talpatlan betűtípusokKalligrafikus - azaz dőlt, írott hatású betűtípusokDekoratív - azaz díszító, különleges betűtípusokMonospace - azaz fix szélességűSerif, a talpas Sans-serif, a talpatlanNyiss ki egy könyvet, és nagy valószínűséggel Bár vannak fellángolások, a talp nélküli betűtípusmáris találkozol egy betűtípussal a serif fajtából. webes szövegként továbbra is tartja a meg-Nyomtatásban a talpas betűforma a legelter- szerzett első helyét. Ezek sima, díszítés nélkülijedtebb, pont a talpa segíti az olvashatóságát, betűcsaládok az oldalak 70%-án segítik a szöveg-hiszen könnyebb követni, sorvezető szerepe van, értést. Vannak helyzetek, amikor szakíthatunk aígy nem kell kisiskolás módon az ujjunkkal követ- hagyományokkal, de az Arial, Helvetica és ani. Verdana ezentúl mindenhová követ.A web azonban itt is mindent visz - ebben a közegben már a betűk tulajdonsága sem a régi - azaz számosteszttel, kutatással igazolták, hogy képernyőn a talpas betűcsalád nagyon fárasztja a szemet, ezért hosszabbszövegekhez nem javasolt. www.webdesigntanfolyam.com
  5. 5. Kalligrafikus, a kacskaringósÍrott, vagy más néven még Kurzív betűtípusoknakhívják az összes olyat, amely kézírásra hasonlít,kézzel készített jelleggel bír pl. festésEzek a betűcsaládok hosszabb szövegkéntelég gyilkosak, ezért csak címsorként, vagydíszítőelemként alkalmazzuk őket -illetve arculattervezéshez, logókhoz nyújtanakjó alapot, ahol a szöveg egy rövidebb- hosszabbmárkanév mindössze.Egy ilyen felirat a teljes összképet befolyásolhat-ja - pl. ha kiválasztassz egy szép, kötött, kézírásjellegű betűt, mint az Amazone Bt, az a továbbistílusjegyeket is behatárolja - elég furcsánmutatna egy szögletes, geometriai jellegű em-bléma mellett. Forrás: PinterestPersze soha ne mond, hogy soha... amíg nem lát-tad. Monospace, a fixA Comic Sans meg egyszerűen csak ciki. :) Ezek a betűk az írógéppel írott szövegre emlékez- tetnek a leginkább - minden egyes betűjük fix szélességű, azaz ugyanakkora.Dekoratív, a fantasztikus Jellemzően kódok, programrészletek megjelení- tésére használják a szövegben.Fantasy fontok - ahogy az elnevezésől következ-tetni lehet, ezek aztán az igazán csicsás, művészibetűk tényleg csak díszítésre lesznek jók, sokszormég így is olvashatatlanok. Folyó szöveghez, ada-tok megjelenítésére semmiképp ne használd! www.webdesigntanfolyam.com
  6. 6. Websafe és a haverokA web safe a webes tipográfiában azokat a betűtípusokat jelenti, amelyekről tudható, hogy minden rendszerben (Windows, Mac, Linux...) rendelkezésre állnak, bármely felhasználó gépén, ún. rendszer betűtípusok. Ezek száma bizony eléggé korlátozott. További korlátokat jelent, hogy arra is kell gondolnunk a munka során, hogy mobilon, és 24” wide monito- ron is tetszetős, és olvasható legy- en/maradjon. A lecsendesedő böngésző háború is betesz ennek - másként kezeli egy Safari, és mondjuk az Internet Explorer a megjelenítendő betű- típusokat, a felhasználó egyéni képernyőbeállításairól nem is beszélve - pl. felbontás, vagy be ill. kikapcsolt élsimítás. Szépség, vagy olvashatóság? Melyik a fontosabb?Aztán a formázás sem az igazi.Nem csak a talpas betűtípusokat száműztük, hanem a sorkizárt szöveget is (faltól falig szöveg), mert nincsmegfelelő elválasztásra lehetőség, így lukak lesznek a szövegben, ami csúnya, és rontja az olvashatóságot.Igen, jól látod - a megtervezett szöveg szinte sehol sem lesz pontosan ugyanolyan, amilyennek Te megál-modtad. A kezdő, és a lusták első reakciója ez: készítenek egy képet Photoshopban, arra írja a szöveget,és slusszpassz, mindenhol mindenkinek ugyanolyan szép.Nononono! Ez csak látszólag jó megoldás.Ugyanis a szöveg több szempontból fontos, hogy szöveg maradjon - pl. a képről nem tudja leolvasni akeresőmotor, ezért rejtve marad az oldal a látogatók előtt. Másrészt macerás ha módosítani kell.Szóval a szöveg az legyen szöveg, a kép meg kép. www.webdesigntanfolyam.com
  7. 7. Ahogy említettem, azért már vannak alternatívák, hogy ne csak ez a szegényes készlet legyen elérhető.Mivel a felhasználót nem kérhetjük meg, hogy telepítgesse az általunk preferált betűtípust, így egy másiklehetőség, hogy böngészés közben hívjük számára elő a weboldal háttértárjáról egy kis kóddal.Mostmár erre is sok lehetőség van - ingyenes és fizetős egyaránt.sIFR , Cufón, Google Fonts stb. www.webdesigntanfolyam.com
  8. 8. TulajdonságokA betűtípusoknak nem csak családja, és neve van, hanem egyéb tulajdonságai is. Ahogyan egy Worddokumentumban tudod formázni a leírt, nyers szöveget, úgy a honlapszövegeket is.A betűk nagyságát, színét, típusát (vastag, dőlt), a használt betű, és sorközt állítjuk be leggyakrabban.A szövegek formázására azonban vannak szabályok, tanácsok - amelyeket jó, ha sorra veszünk atervezéskor.Ne használj túl sok féle betűtípust!Zavaró a szemnek, kusza hatást kelt, ami nem tesz jót az olvasásiarányoknak sem. Én max. 3 féle betűtípust javaslok, de inkábbkettőt, és annak különböző méretbeli, és formázási alakjait.A szöveg arra való, hogy elolvassák, ne itt éld ki a kreativitásodat!Az egyik szabály, amit unalomig szoktam ismételgetni, hogyha nem tudsz jobbat, ne változtass! A leginkább bevált kom-bináció a címsoroknak valamilyen talpas betűtípus (Georgia,Times New Roman), a szövegeknek pedig talp nélküli (Arialvagy Verdana)Természetesen nem akarlak korlátozni az újításokban,próbáld ki, tesztelgesd mi az ami működhet!A lényeget emeld ki, ne mindent!A betűk színével ugyanez a helyzet. A kevesebb több, sokkal több.Jellemzően szintén a címsorok színe szokott eltérni a folyószövegtől, illetve a linkek szí-nei, jelezvén a kattinthatóságot. Egyes szövegrészeket lehet még színnel kiemelni - dekiemelésre hatásos még a vastagított, vagy dőlt szöveg is.Az olvashatóságot nem csak a betűtípus jellege határozza meg, hanem az emberi tényezőkis. Olvasás közben a tekintetünk nem megy végig a szövegen folyamatosan, hanem ugrások-kal rögzíti, egyszerre 3-4 betűre, vagyis 1-2 szótagra koncentrál. Az ilyen szkennelő olvasásmiatt fontos, hogy a szöveg formázva legyen, így könnyebb átnézni egy hosszabb szöveget,kiszűrni a lényeges részeket.Biztosan találkotál már olyan honlappal, ahol faltól falig ért a szöveg, amit meglehetősenfárasztó volt olvasni, még talán a nyakad is ide-oda tekergetted.Az optimális szöveghosszt az okosak 60 karakter szélességben határozták meg.A tapasztalat az, hogy ez a betű mérettől, és típustól egyaránt függ, így én inkább a 600 pxszélességet javaslom etalon gyanánt - ez a sor 600 px széles :) www.webdesigntanfolyam.com
  9. 9. Legyen olvasható! De ez mit jelent?Volt a típus, a szín - a méret még nem. éretűA legjobb betűméret az, ami olvasható a többség betűm ímso r 24 pxszámára. Ez a c 6 px. pedig 1 zövegEz a 12-16 pixel átlagosan - a betűket pixelben mérjük. Ez a sAz ennél kisebbek megjegyzések, képaláírások stb. azennél nagyobbak a címsorok számára ideálisak.A 10 px alatti már-már olvashatatlan, a 22-24 px felettipedig brutálisan nagy.(Nem grafikákról beszélünk, ott ennél nagyobbbetűméretek is használandóak, főleg ha dekoratív céllalkerülnek oda.)Nagyon fontos tisztában lenni azonban azzal is, hogy aweben nincs fix betűméret - a megjelenítő felület fel-bontása, a böngésző beállítása, vagy maga az oldal islehetőséget biztosíthat a betűméretek növelésére vagycsökkentésére.Az emberi tényezők is közrejátszanak - ha tudjuk, hogyegy weboldal várható olvasóközönsége megette akenyere javát (50+), akkor ne is gondolkodjunk a12 px alatti bármilyen szövegben, mert nem fogják tudni elolvasni.HejesírásBevallom, hogy nem vagyok egy “grammarnazi”, ahogyazokat szokták hívni, akik fröcsögve kardoskodnak amagyar nyelv, a helyesírás, és az elfeledett írásjelek,szabálytalan mondatok ellen. Részint igazuk van, részinta nyelv, és a leírt szöveg is egy élő dolog, és nincs kőbevésve.A számítógéppel, internetes környezetben végzettmunka egyik hátránya is, hogy a valaha példás helyes-írás khmm... megkopott.Az oltári szarvashibák azonban rosszul veszik ki magu-kat, üzleti honlapokon nem csúfoskodhatnak ilyen szö-vegek. www.webdesigntanfolyam.com
  10. 10. KontrasztMár megint itt a kontraszt - most a szöveg és a háttér színe között. A fekete alapon fehér oldalakranem érdemes regényrészleteket közölni, mert bármily kitartóak is az olvasók, a fájó szem, vagy fej nemjó móka.Ez a szöveg nem túl jól olvasható, ugye?Ez pedig tökéletesen!Még ez is! De ez már kevésbé! Ez szörnyű!Ez a szöveg nem túl jól olvasható, ugye?Jaj, a szemem! Segítség!Na, így már jobb! Huhh... Köszi!Ha nem szeretnéd, hogy az olvasóidnak, látogatóid-nak csak fejfájást okozz, akkor ügyelj a szöveg színekhasználatára!Ki akarsz emelni valamit? A színkavalkád nem jó me-goldás! Hangsúlyozd nagyobb mérettel, aláhúzással,vagy akár egy nagyobb sorközzel! www.webdesigntanfolyam.com
  11. 11. 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ű szövegSegítség! az 1500-as évek óta a nyomdászok, tipográfu- sok, és tervezőgrafikusok töltelék szövege.Valami latin szöveg Akkor használjuk, ha nincs meg a konkrét szöveg, mert úgy van összeállítva a kamu latinvan az oldalamon! szöveg, mintha egy valódi nyelv lenne, ezért vizuálisan működik. Miért nem jó egy Index.hu cikk erre? Például azért, mert megrendelőként azon fogsz lovagolni, hogy miért Kiszel Tündéről szól egy cikk, miközben a designra kellene koncentrálni. A lipsum.com-on generálhatsz magadnak ilyen szövegeket, amikkel tervezni tudsz, amíg nincs meg a valós tartalom - ami igen gyakori. Pedig ha előre megírod a szövegeket, ahhoz sokkal könnyebb grafikailag is hozzáfogni, mint fordítva! www.webdesigntanfolyam.com
  12. 12. Változatosabb dummyszövegre vágysz? Egy kis Tarantino beütés- sel Samuel L. Jackson Ip- sum remekeivel is kitölt- heted a szabad helyeket, vagy zombi, sör, spanyol, esetleg cukorszirupos szövegre lenne szükséged, az is van! Ezen a linken 30 ilyen szöveggenerátort találsz :) www.webdesigntanfolyam.com
  13. 13. Hogyan formázz?A formázatlan szövegnél az üres lap is érdekesebbA honlapon lévő szöveges anyagok megjelenését (is) az un. stíluslap - CSS biztosítja.A dolog lényege, hogy ezekben a stíluslapokban kódformájában tároljuk el az egyes szövegtípusokra vonat-kozó tulajdonságokat pl. milyen betűtípussal, színnel,jobbra vagy balra zárva stb. jelenjen meg.Ha nem tudsz erről többet, egyelőre nem bonyolódnékbele. Inkább nézzük meg azt, hogy milyen szövegtípu-sok fordulnak elő egy átlagos weboldalon.BekezdésekHosszabb szövegeket egy logikai felépítés alapján, széttagolható bekezdésekre, paragrafusokra szoktunkosztani. Ez segíti a szöveg gyors áttekintését, olvashatóságát, értelmezhetőségét is.A szövegek balra, jobbra, középre zártak, illetve sorkizártak lehetnek. Ezeket ismerheted, ha használszbármilyen szövegszerkesztő programot.A leggyakoribb a balra zárt szöveg, ettől eltérni csak indokolt esetben szokás - balról jobbra olvasunk.A középre zárt szöveg, főleg ha hosszabb formázatlannak tűnik. A sorkizárt szövegről már esett szó - lu-kakat hagy a szövegben, ami nem szép, és nehezebben olvasható a képernyőn. Viszont ha esetleg aszövegben kisebb szövegdobozt kell elhelyezni, oda remek választás a sorkizárt formázás.Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolorsit amet, consectetur sit amet, consectetur sit amet, consectetur sit amet, consecteturadipiscing elit. Duis adipiscing elit. Duis adipiscing elit. Duis adipiscing elit. Duisinterdum purus ut eros interdum purus ut interdum purus ut interdum purus ut eroslobortis viverra. In hac eros lobortis viverra. eros lobortis viverra. lobortis viverra. In hachabitasse platea dic- In hac habitasse platea In hac habitasse platea habitasse platea dic-tumst. Nulla ultrices dictumst. Nulla ultri- dictumst. Nulla ultri- tumst. Nulla ultricestristique eros eu con- ces tristique eros eu ces tristique eros eu tristique eros eu con-vallis. Nulla facilisi. Ae- convallis. Nulla faci- convallis. Nulla faci- vallis. Nulla facilisi.nean consequat volut- lisi. Aenean consequat lisi. Aenean consequat Aenean consequat vo-pat purus, non volutpat volutpat purus, non volutpat purus, non lutpat purus, non vo-lectus tincidunt non. volutpat lectus tincid- volutpat lectus tincid- lutpat lectus tincidunt unt non. unt non. non. balra zárt középre igazított jobbra zárt sorkizárt www.webdesigntanfolyam.com
  14. 14. CímsorokA felosztott szövegeket címsorokkal oszthatjuktovább fő, és alszakaszokra. A különböző szintűcímsorok egy szöveg hierarchiát tesznek lehetővé.Oldal címe, alcímek, mélyebb szintű alcímek.h1 – a lap címeh2 – a cikk címeh3 – alcím...KiemelésekVastagítás - valamely szöveg erősebb hangsúlyozására, kiemelésére alkalmazható, a kövérítettszöveg rögtön magára vonja a figyelmet. Túlzásba vinni azonban nem szabad, mert túl sok vastagí-tott szöveg esetén ez a tulajdonsága elsikkad, cserében a szöveg nehezen olvashatóvá, súlyossáválik.Dőlt szöveg - gyengébb hangsúlyozásra való kiemelési forma, a dőlt betű folyó szövegből nem ugrikki annyira - idézetek, idegen kifejezések formázásáraAláhúzás - ezzel a kiemelés típussal webes szöveg esetében csínján kell bánni, mert elsősorban alinkek jelzésére használjuk.Hivatkozások, vagyis linkekMinden ami a szövegben kattintható, azt jelezni kell valahogy. A leggyakoribb az említett aláhúzás,de szokás vastagítással, eltérő színnel is jelezni.A webergonómia (amely a weboldalak felhasználóbarát kialakításának tudománya) legelvakultabbhívei, akik egyébként gyűlölnek minden design elemet - azt javasolják, a linkeket mindig mindenholkék színnel, aláhúzással jelöljük, mert ez a legrégebbi, és legismertebb, konvencionális jelölés.Amely valóban így van, ha kék, aláhúzott szöveggel találkozunk, hivatkozást várunk alatta.A linkeknek 3 különböző állapota van - amelyeket a tervezés során meg kell adni. • normál szöveg • link színe • aktív link • látogatott linkA link állapot, ami a még nem meglátogatott oldalakat jelzi, ez az alapállapot. Ha az egeret ráhúzzuk,akkor az ún. hover állapot - a link színe megváltozik. És azoknak a linkeknek is megváltozik a színe,amelyeket már meglátogattunk - ez alapesetben lila.A hivatkozások színeit a válaszott arculati színekkel összhangban, a Websafepalettáról válaszd meg mindig, mert a linkek színét is a stíluslapban, kódként tároljuk majd el. www.webdesigntanfolyam.com
  15. 15. FelsorolásokA felsorolások vagy listák könnyen áttekinthetővé teszik a felsorolandó adatokat, gyakran használjukőket - szintén 3 típusuk van.Rendezetlen listaSima, egyszerű felsorolás, egymás után - pötty, köröcske, négyzetecske jelöléssel, mint előzőleg alinkek színeit jeleztemRendezett listaSzámozott, vagy betűrendes, római számokkal jelzett felsorolásDefiniciós listaAlá- és fölérendelt fogalmak listájának elkészítésére, mint ez is éppen.A szövegek formázása nem pusztán esztétikai ok, a felhasználót segítik a tájékozódásban, szöveg-értésben, és természetesen üzleti céljai is vannak annak, hogy egy adott szöveget minnél többenelolvassanak.A tipográfia, vagyis a szöveg összhatása már hatást gyakorol a látogatóra, így egyetlen sor elolvasásanélkül is eldönti, hogy az számára érdekes, vagy érdektelen.A jól tagolt szöveg a keresőrobotok számára is lényeges a weboldalak feltérképezése közben a mega-dott paraméterek alapján sorolnak szövegeket fontosnak, vagy kevésbé fontosnak, amely a honlapvisszakereshetőségét biztosítja a keresőkben.ÖsszegzésA tipográfia, a betűtípusok megválasztása nagyon fontos eleme a web-designnak - amennyire fontos, annyira nem szabad túlspilázni.Használj 2-3 betűtípust, azt is következetesen!Formázd a szöveget olvashatóra, a szemnek kellemesre!A szövegek színeit az arculat színeihez igazítsd, ne hasznáj túl sok színt!Ügyelj a megfelelő háttér/betűszín kontrasztra!Figyelj a sorok szélességére, a kellemesen, fáradtság nélkül olvashatószöveg max. 500-600 px széles! www.webdesigntanfolyam.com
  16. 16. SzövegírásKi írja a szöveget?A szövegírás, főleg a webes szövegírás ma szintén egy külön kreatív szelete a webes szakmának. Az összes szövegre ebben a fázisban nincs még szükség, hiszen a webdesign, weboldal készítés során a keretrend-szer kerül kidolgozásra, amelybe aztán a megrendelő, vagy a fel-használók helyeznek el tartalmat. Amire azonban mégis szükségvan a tervezés során, például az arculati elemek kidolgozásánál,az a marketing szöveg.Példa: ha az ügyfelünk egy hiteltanácsadó cég, amelynek logót,arculatot, weboldalt készülünk tervezni, kell valamilyenszöveges váz, amire a vizuális elemek felfűzhetőek.Bizonyára még emlékeztek Emesére, akit a Budapest Bank Szöveget írni nem könnyű, főlegakkor új arculatával loptak be a mindennapjainkba. ha muszáj. Mivel én viszonylag sokat írok, tananyagot, cikket,Pénzügyekről érthetően. Pénzügyekről egyszerűen. blogbejegyzést, vagy dokumen- tációt, és természetesen értéke- sítési szöveget is, ezért van párEzekre a mondatokra épült fel az új arculat, és az egész módszerem.kampány. A legtutibb az Evernote nevű al- kalmazás, ami egy webes prog-Egy hiteltanácsadó cég esetén is hasonlóra - egy szlogenre, egy ram, de mobilon, vagy tabletenépítőkőre van szükség, amelyet aztán vizuálisan is megtámaszt- is elérhető, így bárhol vagy tudszhatsz. Mindenki minőségi, olcsó, megbízható és sikeres. De jegyzetelni bele, vagy egy kis szinkronizáció, és ott folytathatodmitől más/jobb/különlegesebb, mint a versenytársak? a munkát, ahol abbahagytad. Kép és URL csatolás, hangjegyzet, ésEz elméletben egy csapatmunka, de lehet, hogy Te magad vagy ingyenes használat.a csapat - grafikus, marketinges és szövegíró is akár, ha rendel-kezel ilyen vénával. Ha nem, akkor bízd szakemberre - a jó szö-vegen a cég bevételei múlhatnak!Mert hiába ilyen sarkallatos pont a szöveg, legtöbbször ezencsúsznak el a dolgok. A legtöbb weboldal készíttetni, terveztetniszándékozó ember, cég semmilyen szöveges tartalommal nemrendelkezik a munka megrendelésének, elkezdésének pillana-tában - ami hátráltathatja a munkát, sőt később a kész szövegekesetén esetleg újra kell alakítani néhány dolgot.Többnyelvű oldalak esetén gyakran okoz problémát, hogy valamimagyarul egy rövid, tömör kifejezés, de németül, vagy románulegy kisregény, és nem fér el mondjuk egy menüpontban, vagyegy fejlécben megfelelően. www.webdesigntanfolyam.com
  17. 17. BetűtípusokA z említett betűcsaládok meglehetősen sok családtag- gal rendelkeznek - ezek a betűtípusok. Antik betűtípusok, Art Deco, Art Nouveau, Kalligrafi-kus, Kapitális, Festett, Képregény stílusú, Dotted - vagyispontozott, Elegáns, Vicces, Futurisztikus, Gótikus,Graffiti, Kézírás, Brand, Military, Old Style és így tovább...Ezek stílusjegyek, ami alapján a betűtípusokat újabb cso-portokra lehet osztani. Szükséges is, mert rengeteg van.Több ezer, vagy akár több tízezer, hiszen csak saccolni tu-dom, és ebbe még nem vettem bele a különböző nyelvek,különböző karakterekkel rendelkező egyedi betűfajtáit.Ahogyan a színekhez, úgy a betűtípusokhoz is sorolhatóaktöbblettartalmak, jelentések, jellemző felhasználási helyek- még ha nem is annyira konkrétak. Az már kiderült, mely-ek ajánlottak szöveghez, és melyek díszítőelemnek, cím-soroknak. Gyakorlatilag majdmindegyik a nevében rejti astílusát - pl. Antik, vagy Gótikus, ezen nincs mit magyarázni.Hol és hogyan használhatod őketa gyakorlatban?Természetesen bárhol, de nem bármelyiket.Képzeld el ezt a nagyon túldíszített, dekor betűtípust egy ügyvé-di iroda, egy ingatlanközvetítő, vagy mondjuk egy pénzügyivállalkozás logójában.Amellett, hogy ezek a témák nem sok mozgásteret adnak, a kialakult hagyományoknak is eleget kelltenni - a feliratnak nem csak díszítő, és információ közlő funkciója van, hanem egy mögöttes tartal-mat is ad - stabilitást, megbízhatóságot kell például sugallnia egy ügyvédnek, mégpedig már azelőttmielőtt találkoztok. A fenti típus erre alkalmatlan - komolytalanná tenné az egészet. Hivatalos szervek,jogi, pénzügyi cégek nem csak a színekben visszafogottak, és decensek, hanem a betűtípus megválasz-tásában is. www.webdesigntanfolyam.com
  18. 18. A talpas serif család jó pedigrét jelent, az egyébként jellegzetesen csapnivaló kormányzati honlapokonezekkel találkozol. Jobb lett volna csak a címsorokat, vagy csak a szöveget ilyen típussal szedni, mertnehezen olvasható. Kilóg a sorból a nemrég átadott magyarorszag.hu, amely modern vonalvezetésselés felépítéssel igyekszik korszerűnek tűnni. Amennyiben folytatódna, és kiterjedne ez egy egységeskormányzati arculatra, akkor még csak-csak, de így mintha semmi közük nem lenne egymáshoz. www.webdesigntanfolyam.com
  19. 19. Nagyon népszerűek az un. Grunge fontok, főleg a fiatalos, zenei, művészi tartalmakhoz. A koszos,maszatos, törött, ütődött hatású, depresszív, sötét típus meglehetősen rossz választás, ha ezeket ajelentéstartalmakat nem akarjuk összekötni egy olyan fogalommal mint a wellness, az egészség,a gyógyítás, vagy a szépség.Te bemennél abba a szépségszalonba,amelyiknek ilyen a felirata? Nekem a kócos, és részeg Courtney Love jutna először eszembe, hogy biztos ilyen a fodrász, és minden vágásnál belehamuzik a fülembe. Pedig csak egy feliratot láttam.Ez mindjárt jobb:A sans-serif fontok, bár sokszor unalmasnak tűnnek a maguk egyszerűségével, de mégis megfelelőeka tisztaságot, egyszerűséget, egyenességet sugallni kívánó témáknak. A Logó és arculattervezés tan-folyamon erről még bővebben esik szó, csak szerettem volna hogy lásd a mögöttes tartalmat egy-egytípus mögött, és gondolkodj ezen a vonalon, amikor egy betűtípust kiválasztassz egy munkához. www.webdesigntanfolyam.com
  20. 20. Font formátumokTrue Type (.ttf), ill. Type 1 fontkészletek a Windows XP előtti időkből származnak, un. rendszerfontok.Tekintve, hogy az XP is elmúlt 10 éves, hahh..szóval régiek. Ezért sok esetben nem működnek az aktuális operációs rendszerekkel, programokkal- így lehetséges az, hogy hiába van telepítve egy betűtípus a gépeden, de mégsem tudod használni,vagy eléggé foghíjas.Postscript Type (.pfb és .pfm) - Windowson és Macen egyaránt működnek.Open Type (.otf) - egy font formátum, amely 1996-ban az Adobe és a Microsoft által közösen megho-zott döntésből született, amelyhez a Macintosh is csatlakozott, tehát afféle szabvány lett.Az OpenType betűtípusok bővített karakterkészletet és elrendezési funkciókat, gazdagabb nyelvi tá-mogatást és speciális tipográfiai beállítási lehetőségeket biztosítanak.Hogyan telepítsd a fontokat? Több megoldás létezik: 1. másold be a kívánt fontot a c:windowsfonts alkönyvtárba 2. pl. XP alatt: Start menü -> Beállítások -> Vezérlőpult, kattints kétszer a ‘Betűtípusokra. Fájl menü -> Új betűkészlet telepítése 3. valamilyen fontkezelő szoftver segítségével www.webdesigntanfolyam.com
  21. 21. ÁrvíztűrőtükörfúrógépMi van?Már írtam neked bizonyos korlátokról, amit a webes megjelenítés terén elkell szenvedni/fogadni.Sajnos itt a következő: az édes anyanyelvünk. Amely oly szép, és páratlan, hogy a címben található soká, í, ű, ő, ü, ü, ú, ó, é betűkkel is csak ő rendelkezik.Így csak az a betűtípus lesz széleskörűen használható a számodra, amely tartalmazza ezeket a karak-tereket - ezt az árvíztűrőtükörfúrógép szóval rögtön le istudod tesztelni!Un. placeholder-text, vagy pangram - ami az angol nyelvterületen a“the quick brown fox jumps over the lazy dog” rigmus.Ha nem tetszik az árvíztűrő tükörfúrógép, használhatod a nyúlfülvágó térközsűrítő,szénrázúdító fűtőküldönc, vagy akár a jóhírű tüzérágyúöntő kifejezéseket is :DA maradék fontok, amelyek nem rendelkeznek ezekkel - úgy a 85% - meg jó lesz díszítésre, olyan fe-liratok tervezésére, amelyhez nem kell ékezet.Vannak tipográfusok, és tipográfus hajlamú emberek,akik szép magyar szóval - ékezetesítik, magyarítják ezeket a típusokat. Hozzáértés nélkül én nem aján-lom, mert láttam már csúnya, torz eredményeket, de ha mégis érzel rá késztetést, aFontLab nevű szoftvert ajánlom.Használhatod még a Magyar Ékes nevű programot is, amely az alap fontkészletbőllegenerálja a szükséges karaktereket.Előfordul az is, hogy a betűtípus rendelkezik az adott karakterekkel, a program amiben használniakarod, azonban mégsem támogatja. CE - Central European (MS Windows 1250) - ezek vagyunk mi.A programnak ezt a kódkiosztás kell használnia esetleg, ha az alap nyelvbeállítás más.Ha semmi sem megy - nézd meg Hal barátom módszerét - Hosszú Ő probléma www.webdesigntanfolyam.com
  22. 22. A font szoftverEzt viszonylag kevesen tudják.Ami azt jelenti, hogy ugyanúgy, mint a szoftverek esetében nem tulajdonjogot szerzel feletette, csakfelhasználási jogot, mégpedig csak arra a területre, amelyre az adott szoftver, jelen esetben betűtípuskiadója feljogosít.A legtöbb ingyenes betűtípus valójában csak addig ingyenes, amíg nem használod fel kereskedelmicélokra, hanem mondjuk a saját ki magán oldalad, blogod díszíted vele.Azonban elsődlegesen kereskedelmi célokra használunk fel mindent, amiért mint szolgáltatás pé-nzt kapunk - ergo ezekért is licendíjat kellene fizetni a készítőnek. Amit persze senki sem tesz, és eza hallgatólagos megegyezés a free dolgokat gyártók és felhasználók között. Hiszen aki ingyenesenteszi közzé, letölthetővé a munkáját a humanitárius indokok mellett más célok is vezérlik - gyorsabb,széleskörűbb ismertség, portfólió bővítés stb.Amellett, hogy a szoftvervédelem fenn áll, bizonyos típusokon még további szerzői jogok is fennáll-nak, mint grafikai alkotás. Ha valaki kitalál egy grafikai műnek minősülő, egyedi betűtípust és ebbőlbetűkészletet készít, akkor a betűk arculata, képe, rajza szerzői jogvédelem tárgya lehet - szüksé-ges a szerzői jogosult engedélye az átdolgozáshoz is. Azon fontkészletek esetén amelyeket célzottankereskedelmi felhasználásra szánnak, és árusítanak, ugyanaz a szabály vonatkozik, mint bármelyiklicenszdíjas szoftverre a gépeden pl. operációs rendszer.Itthon a Gidata Kft. az egyik legnagyobb font képviselet - a www.font.hu oldalon felhasználási, és jogikérdésekre bővebb választ kaphatsz. www.webdesigntanfolyam.com
  23. 23. Milyen betűtípus?Sokszor előfordult velem, hogy kaptam egy logószerű képződményt, amit rekonstruálni kellett volna- persze az eredeti betűtípusról, amivel készült nem hallott senki, azt se tudja mi az. Szerencsés csillag-együttállás esetén - ami azt jelenti, hogy a betűtípus körvonalai megkülönböztethetőek -van megoldás.What the font?vagy újabb testvére a What font is?Ha még így sem sikerült rálelni, akkor a betűtípus egyes tulajdonságai alapján - dőlésszög, vonalveze-tés stb. még lehet keresgélni az alábbi oldalon, esetleg kiegyezni vmi. hasonlóval.http://typenav.fontshop.com/Ha Chrome böngészőt használsz, akkor a Google megint a barátod, mert egy What Font nevű aprókiegészítés, és helyben megmondja neked milyen felirat milyen betűtípussal íródott, DE csak ha szö-veges, képről nem tudja leolvasni. www.webdesigntanfolyam.com
  24. 24. FontkezelésA péntek délutánok a legalkalmasabbak a vadászatra - amikor már lehet lazulni, mert nem sürgetneka határidők - a készleteim frissíttésével töltöttem általában. Főleg, amíg “rendes” munkahelyem volt.Amióta én vagyok a főnököm, már nehezebb lógni.Ez egy fontvadászattal töltött fél nap után tetemes zsákmányt jelent, hisz semmit sem szabad otthagyni,jó lesz még valamire, a múltkor is jó volt az a fura betűtípus, és különben is.Az eredmény egy duzzadt fontmappa, borzalmasan belassult szoftverek - majd pár nap múlva rájövök,hogy ez így kezelhetetlen, és uninstallálom a fontokat, vagy esetleg kivágom az összeset a fenébe. 200-300 típusnál többet egyszerre felesleges folyamatosan mozgatni.Rengeteg font nézegető, kezelő, kategorizáló szoftvert kipróbáltam már - jelenleg a legtisztább, és leg-szárazabb érzést a myFontbook.com-on található szolgáltatás adja, amelyet minden telepítéses maceranélkül tudok használni, látva az aktuálisan használatba lévő készleteket. Egy pillanat alatt felméri aszámítógépemen telepített betűtípusokat.Több nézet, címkézési lehetőség, megtudom nézni a teljes karakterkészletet egy kattintással, és az“árvíztűrőtükörfúrógép tesztet” is eltudom végezni.Ez amolyan instant megoldás, de én szeretem az ilyet. Az oldalon találsz egy 4 perces videót is a használa-táról - végtelenül egyszerű.http://www.myfontbook.com www.webdesigntanfolyam.com
  25. 25. Mire használom?Párhuzamosan mondjuk 3 projekten dolgozom - egy klíma webshop,egy natúrpatika, és egy wellnesshotel arculata vár megvalósításra.A lehetséges versenyzőket ellátom a megfelelő Tag-ekkel, vagyis címkékkel, illetve még ezeken belül isfelállítok egy hierarchiát az 1-5-ig csillagozás lehetőségével. Amikor konkrétan a tervezésre kerül a sor,már nem kell átbogarásznom a teljes telepített fontkészletet, csak ezt a 4-5 favorizált típust igyekszemkidolgozni.Font manager szoftverekFontExpert 2010Sajnos csak próbaverzió, de nagyon kényelmes szoftver - szintén címkézhetőek,de kategorizálhatóak is a betűtípusaid - így létrehozhatsz egyedi összeállításokat,és telepíthetsz és eltávolíthatsz kedved szerint - attól függően éppen min dolgo-zol.http://www.proximasoftware.com/fontexpert/screenshots.htmFontExplorerSajnos, ez már nem létezik ingyenes verzióban. Mindent tud, amit egy ilyenszoftvernek tudnia kell - 80 Euro az árahttp://www.fontexplorerx.com/download/AMP Font ViewerSemmi extra, leginkább nézegetésre jó, de ingyen van, pici, könnyen futtatható,régóta bevált alkalmazás. Telepíteni/eltávolítani ezzel is lehet.http://www.ampsoft.net/NexusfontJollyjoker. Ingyen van. Lehet mappázni, tagelni, telepíteni, törölni, megkeresni aduplikációkat, pici és hordozható. Windowsra.http://xiles.net/downloads/#NexusFontEzeken felül még vagy öt tucat hasonló szoftvert találhatsz, nagyjából azo-nos tudással - ingyen és sokpénzért is. Ahhoz hogy átlásd mid van, mi az amittelepítettél, és mindez használható-e, arra az AMP Font Viewer teljesen ok, aztánha egyedi igényeid támadnak - próbálj ki párat, és megtalálod a neked megfelelőmegoldást. www.webdesigntanfolyam.com
  26. 26. OlvasnivalóOffline, vagyis könyvSzántó Tibor: A betű (1982 - Akadémiai kiadó)Én már eladtam a saját példányom, sajnos meglehetősen ár alatt - gőzöm semvolt, hogy a 82-es könyv egy igazi ritkaság, pillanatnyilag 12-15 eFt körül van.Ha könyvtárban találsz egy példányt, lapozd át mindenképpen, mindent megtud-sz a betűk történetéről. Ahogy Szántó Tibor: A tipográfia című könyvéből is.Virágvölgyi Péter: A tipográfia mestersége számítógéppel (Osiris Kiadó)Ez sem egy mai darab - de ezek a dolgok keveset változnakTervezz bátran! - Oldaltervezés és tipográfia egyszerűen és azon túl(Scolar Kiadó)OnlineDesignerek írnak az egyes betűtípusokról, könyvajánlókhttp://typographica.orgWebes felhasználásrólhttp://nicewebtype.com/notes/Címsor tipográfiahttp://www.smileycat.com/miaow/archives/typography-for-headlines.phpKult foltblogA számomra olvashatatlan fontblog. Merthogy direkt élsimítást használ, amitén meg alapból nem. Így egy elmosódott massza a menü, és szöveg is. De mivelvannak érdekes posztok, néha küzdök egy kicsit.http://ilovetypography.comIgazi szemlegeltetős fontblogokSzép felhasználások, ötletesen megoldások, tipográfiai érdekességekhttp://www.letteringtime.comhttp://www.typegoodness.comhttp://typenuts.com www.webdesigntanfolyam.com
  27. 27. Betűrajzok Játék a betűkkel Ez a mobil alkalmazás rajzolni tanít meg a betűk segítsé- gével - lásd meg a karakterek mögött a formákat, kezeld őket grafikus, díszítő elemként, és jópofa ábrákat tudsz alkotni unalomüzésként. De azért ez több annál - fejleszti a vizuális látásmódod, egy másfajta szemléletre tanít, hogy akár rajztudás nélkül, egy kis fantáziával is tudsz látványos dolgokat alkotni, amik akár kiforrottabb formában később egy kampány elemei is lehetnek. s Letölté www.webdesigntanfolyam.com
  28. 28. FeladatokNe csak olvasd! Csináld!1. FeladatKeresd fel a FontFonter nevű weboldalt - http://fontfonter.comEz az oldal azt tudja, hogy bármely létező honlap betűtípusait “lecseréli” az általad választottakra. Pl:a Google.hu-t megnézhetem talpas azaz serif betűtípussal is.Egy ilyen eszköz honlap újratervezésekhez nyújt leginkább segítséget, de jelenleg téged abban fogelkalauzolni, hogy mi a különbség a nézetek között. Mennyit tesz hozzá, vagy vesz el az olvashatóság-ból, áttekinthetőségből a betűtípus.A feladatod, hogy változtasd meg úgy a kívánt weboldalak tipográfiáját, hogy javíts ezen! Itt a digg.com-nál az általam kiválasztott FF Typestar Web nagyon sokat rontott, főleg a menü olvashatóságán - a talpas FF Milo Serif Web, pedig a logóval nem összeegyeztethető formailag. A megvizsgálandó oldalak: - index.hu, hvg.hu - és egy szabadon választott www.webdesigntanfolyam.com
  29. 29. 2. FeladatEmlékszel a múlheti fogalmakra, amelyhez képet kellett keresni?Ez is hasonló feladat lesz, de már kombináljuk a kettőt, illetve hármat.Ebben a feladatban 3 megbízód lesz, akinek a leendő megjelenésén kell dolgoznod, illetveelőkészítened.Egy drága francia étterem - “Le gourmandise” a neveEgy vidéki gazda - Szabó János, aki bioborokkal foglalkozik - neki javasolhatsz márkanevet is, demaradhat Szabó János borászEgy kozmetikus, Aletta - aki most készül egy kis üzletet nyitni a belvárosban“Lotti Szalon” névenMindhárom megbízóhoz társíts egy színskálát, és egy betűtípust, amivel a márkanevet leírod. Ez afeladat segít, hogy a fogalmakhoz nem csak színeket, hanem többletjelentéseket is tudj társítani.Így tudod letisztítani azt a rengeteg gondolatot ami egy munka kapcsán kavaroghat a fejedben.Ezek ilyen többségében fejben gyakorlós, nézelődős, vagy egyszerűfeladatok - ennek ellenére kérlek vedd őket komolyan, mert az alapok, egy szemléletelsajátítása nagyon fontos a jövőbeli esetleges további tanulmányokat, vagy munkákatilletően.Jó munkát kívánok! www.webdesigntanfolyam.com

×