Betűk, tipográfia. ingyenes alapozó leckék 2. rész. Pixelgyár Kft Minden jog fenntartva!

Átírás

1 Betűk, tipográfia ingyenes alapozó leckék 2. rész Pixelgyár Kft Minden jog fenntartva!

2 Azt szeretném tudni - mormolta maga elé -, mi is van egy ilyen kö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ég nem ismerek, mindenféle kalandok, tettek és harcok fordulnak elő - és néha tengeri viharok játszódnak le, vagy az ember idegen országokat és városokat lát. Ez mind benne van ugyanis valahogyan a könyvekben. El kell olvasni, hogy átélhessük, ez világos. De belül mindez már előre megvan. Szeretném tudni, hogyan. Michael Ende

3 A szöveg Hogyan vedd rá a látogatóidat, hogy elolvassák a gondosan megírt szövegeid? Aweben 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 monitoron sokkal nehézkesebb is az elolvasott szöveget értelmezni, így legtöbb-ször nem is olvassák el, bármennyire is szeretnénk, még akkor sem, ha nekik is jobb volna. Mit lehet tenni? A tipográfia a szövegek megjelenítésének tudománya, amely a nyomtatás óta létezik, tehát a szabályai elég kiforrottak. Logikusan itt most az jönne, hogy felsorolom ezeket, viszont ahogy sok másban, a weben ez is másképp működik kicsit, így nem szeretném, ha azok rögzülnének. Ami mindent felülír, azaz a megjelenést is, az az olvashatóság. André Beato galériájában további szemet gyönyörködtető tipográfiák találhatóak

4 Betűcsaládok 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 Ale ingyen is tucatszám. A betűtípusok 5 nagy családba sorolhatóak Serif - azaz talpas betűtípusok Sans serif - azaz talpatlan betűtípusok Kalligrafikus - azaz dőlt, írott hatású betűtípusok Dekoratív - azaz díszító, különleges betűtípusok Monospace - azaz fix szélességű Serif, a talpas Nyiss ki egy könyvet, és nagy valószínűséggel máris találkozol egy betűtípussal a serif fajtából. Nyomtatásban a talpas betűforma a legelterjedtebb, pont a talpa segíti az olvashatóságát, hiszen könnyebb követni, sorvezető szerepe van, így nem kell kisiskolás módon az ujjunkkal követni. Sans-serif, a talpatlan Bár vannak fellángolások, a talp nélküli betűtípus webes szövegként továbbra is tartja a megszerzett első helyét. Ezek sima, díszítés nélküli betűcsaládok az oldalak 70%-án segítik a szövegértést. Vannak helyzetek, amikor szakíthatunk a hagyományokkal, de az Arial, Helvetica és a 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ámos teszttel, kutatással igazolták, hogy képernyőn a talpas betűcsalád nagyon fárasztja a szemet, ezért hosszabb szövegekhez nem javasolt.

5 Kalligrafikus, a kacskaringós Írott, vagy más néven még Kurzív betűtípusoknak hívják az összes olyat, amely kézírásra hasonlít, kézzel készített jelleggel bír pl. festés Ezek a betűcsaládok hosszabb szövegként elég gyilkosak, ezért csak címsorként, vagy díszítőelemként alkalmazzuk őket - illetve arculattervezéshez, logókhoz nyújtanak jó alapot, ahol a szöveg egy rövidebb- hosszabb márkanév mindössze. Egy ilyen felirat a teljes összképet befolyásolhatja - pl. ha kiválasztassz egy szép, kötött, kézírás jellegű betűt, mint az Amazone Bt, az a további stílusjegyeket is behatárolja - elég furcsán mutatna egy szögletes, geometriai jellegű embléma mellett. Persze soha ne mond, hogy soha... amíg nem láttad. Monospace, a fix Forrás: Pinterest A Comic Sans meg egyszerűen csak ciki. :) Dekoratív, a fantasztikus Fantasy fontok - ahogy az elnevezésől következtetni lehet, ezek aztán az igazán csicsás, művészi betűk tényleg csak díszítésre lesznek jók, sokszor még így is olvashatatlanok. Folyó szöveghez, adatok megjelenítésére semmiképp ne használd! Ezek a betűk az írógéppel írott szövegre emlékeztetnek a leginkább - minden egyes betűjük fix szélességű, azaz ugyanakkora. Jellemzően kódok, programrészletek megjelenítésére használják a szövegben.

6 Websafe és a haverok A ún. 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, 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 monitoron is tetszetős, és olvasható legyen/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 nincs megfelelő 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álmodtad. 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 a kereső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.

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ásik lehető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.

8 Tulajdonságok A betűtípusoknak nem csak családja, és neve van, hanem egyéb tulajdonságai is. Ahogyan egy Word dokumentumban 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 a tervezé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ási arányoknak sem. Én max. 3 féle betűtípust javaslok, de inkább kettő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, hogy ha nem tudsz jobbat, ne változtass! A leginkább bevált kombináció a címsoroknak valamilyen talpas betűtípus (Georgia, Times New Roman), a szövegeknek pedig talp nélküli (Arial vagy 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 - de kiemelé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ők is. Olvasás közben a tekintetünk nem megy végig a szövegen folyamatosan, hanem ugrásokkal rögzíti, egyszerre 3-4 betűre, vagyis 1-2 szótagra koncentrál. Az ilyen szkennelő olvasás miatt 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ősen fá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 px szélességet javaslom etalon gyanánt - ez a sor 600 px széles :)

9 Legyen olvasható! De ez mit jelent? Volt a típus, a szín - a méret még nem. A legjobb betűméret az, ami olvasható a többség számára. Ez a pixel átlagosan - a betűket pixelben mérjük. Az ennél kisebbek megjegyzések, képaláírások stb. az ennél nagyobbak a címsorok számára ideálisak. A 10 px alatti már-már olvashatatlan, a px feletti pedig brutálisan nagy. Ez a címsor 24 px betűméretű Ez a szöveg pedig 16 px. (Nem grafikákról beszélünk, ott ennél nagyobb betűméretek is használandóak, főleg ha dekoratív céllal kerülnek oda.) Nagyon fontos tisztában lenni azonban azzal is, hogy a weben nincs fix betűméret - a megjelenítő felület felbontása, a böngésző beállítása, vagy maga az oldal is lehetőséget biztosíthat a betűméretek növelésére vagy csökkentésére. Az emberi tényezők is közrejátszanak - ha tudjuk, hogy egy weboldal várható olvasóközönsége megette a kenyere javát (50+), akkor ne is gondolkodjunk a 12 px alatti bármilyen szövegben, mert nem fogják tudni elolvasni. Hejesírás Bevallom, hogy nem vagyok egy grammarnazi, ahogy azokat szokták hívni, akik fröcsögve kardoskodnak a magyar nyelv, a helyesírás, és az elfeledett írásjelek, szabálytalan mondatok ellen. Részint igazuk van, részint a nyelv, és a leírt szöveg is egy élő dolog, és nincs kőbe vésve. A számítógéppel, internetes környezetben végzett munka 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 magukat, üzleti honlapokon nem csúfoskodhatnak ilyen szövegek.

10 Kontraszt Már megint itt a kontraszt - most a szöveg és a háttér színe között. A fekete alapon fehér oldalakra nem érdemes regényrészleteket közölni, mert bármily kitartóak is az olvasók, a fájó szem, vagy fej nem jó 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óidnak csak fejfájást okozz, akkor ügyelj a szöveg színek használatára! Ki akarsz emelni valamit? A színkavalkád nem jó megoldás! Hangsúlyozd nagyobb mérettel, aláhúzással, vagy akár egy nagyobb sorközzel!

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? Segítség! Valami latin szöveg van az oldalamon! A Lorem ipsum dolor sit amet kezdetű szöveg az 1500-as évek óta a nyomdászok, tipográfusok, és tervezőgrafikusok töltelék szövege. Akkor használjuk, ha nincs meg a konkrét szöveg, mert úgy van összeállítva a kamu latin 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!

12 Változatosabb dummy szövegre vágysz? Egy kis Tarantino beütéssel Samuel L. Jackson Ipsum remekeivel is kitöltheted 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 :)

13 Hogyan formázz? A formázatlan szövegnél az üres lap is érdekesebb Ahonlapon 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ód formájában tároljuk el az egyes szövegtípusokra vonatkozó 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ék bele. Inkább nézzük meg azt, hogy milyen szövegtípusok fordulnak elő egy átlagos weboldalon. Bekezdések Hosszabb szövegeket egy logikai felépítés alapján, széttagolható bekezdésekre, paragrafusokra szoktunk osztani. 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álsz bá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ó - lukakat hagy a szövegben, ami nem szép, és nehezebben olvasható a képernyőn. Viszont ha esetleg a szövegben kisebb szövegdobozt kell elhelyezni, oda remek választás a sorkizárt formázás. 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. 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. balra zárt középre igazított jobbra zárt sorkizárt

14 Címsorok A felosztott szövegeket címsorokkal oszthatjuk tová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íme h2 a cikk címe h3 alcím... Kiemelések Vastagítás - valamely szöveg erősebb hangsúlyozására, kiemelésére alkalmazható, a kövérített szö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 ugrik ki annyira - idézetek, idegen kifejezések formázására Aláhúzás - ezzel a kiemelés típussal webes szöveg esetében csínján kell bánni, mert elsősorban a linkek jelzésére használjuk. Hivatkozások, vagyis linkek Minden 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) legelvakultabb hívei, akik egyébként gyűlölnek minden design elemet - azt javasolják, a linkeket mindig mindenhol ké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 link A 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 Websafe palettáról válaszd meg mindig, mert a linkek színét is a stíluslapban, kódként tároljuk majd el.

15 Felsorolások A felsorolások vagy listák könnyen áttekinthetővé teszik a felsorolandó adatokat, gyakran használjuk őket - szintén 3 típusuk van. Rendezetlen lista Sima, egyszerű felsorolás, egymás után - pötty, köröcske, négyzetecske jelöléssel, mint előzőleg a linkek színeit jeleztem Rendezett lista Számozott, vagy betűrendes, római számokkal jelzett felsorolás Definiciós lista Alá- é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öbben elolvassanak. A tipográfia, vagyis a szöveg összhatása már hatást gyakorol a látogatóra, így egyetlen sor elolvasása né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 megadott paraméterek alapján sorolnak szövegeket fontosnak, vagy kevésbé fontosnak, amely a honlap visszakereshetőségét biztosítja a keresőkben. Összegzés A tipográfia, a betűtípusok megválasztása nagyon fontos eleme a webdesignnak - 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 px széles!

16 Szövegírás Ki írja a szöveget? Aszö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 keretrendszer kerül kidolgozásra, amelybe aztán a megrendelő, vagy a felhasználók helyeznek el tartalmat. Amire azonban mégis szükség van 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 valamilyen szöveges váz, amire a vizuális elemek felfűzhetőek. Bizonyára még emlékeztek Emesére, akit a Budapest Bank akkor új arculatával loptak be a mindennapjainkba. Pénzügyekről érthetően. Pénzügyekről egyszerűen. Ezekre a mondatokra épült fel az új arculat, és az egész kampány. Egy hiteltanácsadó cég esetén is hasonlóra - egy szlogenre, egy építőkőre van szükség, amelyet aztán vizuálisan is megtámaszthatsz. Mindenki minőségi, olcsó, megbízható és sikeres. De mitől más/jobb/különlegesebb, mint a versenytársak? Ez elméletben egy csapatmunka, de lehet, hogy Te magad vagy a csapat - grafikus, marketinges és szövegíró is akár, ha rendelkezel ilyen vénával. Ha nem, akkor bízd szakemberre - a jó szövegen a cég bevételei múlhatnak! Szöveget írni nem könnyű, főleg ha muszáj. Mivel én viszonylag sokat írok, tananyagot, cikket, blogbejegyzést, vagy dokumentációt, és természetesen értékesítési szöveget is, ezért van pár módszerem. A legtutibb az Evernote nevű alkalmazás, ami egy webes program, de mobilon, vagy tableten is elérhető, így bárhol vagy tudsz jegyzetelni bele, vagy egy kis szinkronizáció, és ott folytathatod a munkát, ahol abbahagytad. Kép és URL csatolás, hangjegyzet, és ingyenes használat. Mert hiába ilyen sarkallatos pont a szöveg, legtöbbször ezen csúsznak el a dolgok. A legtöbb weboldal készíttetni, terveztetni szándékozó ember, cég semmilyen szöveges tartalommal nem rendelkezik a munka megrendelésének, elkezdésének pillanatában - ami hátráltathatja a munkát, sőt később a kész szövegek esetén esetleg újra kell alakítani néhány dolgot. Többnyelvű oldalak esetén gyakran okoz problémát, hogy valami magyarul egy rövid, tömör kifejezés, de németül, vagy románul egy kisregény, és nem fér el mondjuk egy menüpontban, vagy egy fejlécben megfelelően.

17 Betűtípusok Az említett betűcsaládok meglehetősen sok családtaggal rendelkeznek - ezek a betűtípusok. Antik betűtípusok, Art Deco, Art Nouveau, Kalligrafikus, Kapitális, Festett, Képregény stílusú, Dotted - vagyis pontozott, 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 csoportokra lehet osztani. Szükséges is, mert rengeteg van. Több ezer, vagy akár több tízezer, hiszen csak saccolni tudom, é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óak többlettartalmak, jelentések, jellemző felhasználási helyek - még ha nem is annyira konkrétak. Az már kiderült, melyek ajánlottak szöveghez, és melyek díszítőelemnek, címsoroknak. Gyakorlatilag majdmindegyik a nevében rejti a stílusát - pl. Antik, vagy Gótikus, ezen nincs mit magyarázni. Hol és hogyan használhatod őket a 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ügyi vállalkozás logójában. Amellett, hogy ezek a témák nem sok mozgásteret adnak, a kialakult hagyományoknak is eleget kell tenni - a feliratnak nem csak díszítő, és információ közlő funkciója van, hanem egy mögöttes tartalmat is ad - stabilitást, megbízhatóságot kell például sugallnia egy ügyvédnek, mégpedig már azelőtt mielő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álasztásában is.

18 A talpas serif család jó pedigrét jelent, az egyébként jellegzetesen csapnivaló kormányzati honlapokon ezekkel találkozol. Jobb lett volna csak a címsorokat, vagy csak a szöveget ilyen típussal szedni, mert nehezen 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éges kormányzati arculatra, akkor még csak-csak, de így mintha semmi közük nem lenne egymáshoz.

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 a jelenté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? Ez mindjárt jobb: 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. A sans-serif fontok, bár sokszor unalmasnak tűnnek a maguk egyszerűségével, de mégis megfelelőek a tisztaságot, egyszerűséget, egyenességet sugallni kívánó témáknak. A Logó és arculattervezés tanfolyamon erről még bővebben esik szó, csak szerettem volna hogy lásd a mögöttes tartalmat egy-egy típus mögött, és gondolkodj ezen a vonalon, amikor egy betűtípust kiválasztassz egy munkához.

20 Font formátumok True 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 meghozott 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:\windows\fonts 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

21 Árvíztűrőtükörfúrógép Mi 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 karaktereket - ezt az árvíztűrőtükörfúrógép szóval rögtön le is tudod 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 :D A maradék fontok, amelyek nem rendelkeznek ezekkel - úgy a 85% - meg jó lesz díszítésre, olyan feliratok 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ánlom, mert láttam már csúnya, torz eredményeket, de ha mégis érzel rá késztetést, a FontLab nevű szoftvert ajánlom. Használhatod még a Magyar Ékes nevű programot is, amely az alap fontkészletből legenerálja a szükséges karaktereket. Előfordul az is, hogy a betűtípus rendelkezik az adott karakterekkel, a program amiben használni akarod, 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

22 A font szoftver Ezt viszonylag kevesen tudják. Ami azt jelenti, hogy ugyanúgy, mint a szoftverek esetében nem tulajdonjogot szerzel feletette, csak felhasználási jogot, mégpedig csak arra a területre, amelyre az adott szoftver, jelen esetben betűtípus kiadója feljogosít. A legtöbb ingyenes betűtípus valójában csak addig ingyenes, amíg nem használod fel kereskedelmi cé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 ez a hallgatólagos megegyezés a free dolgokat gyártók és felhasználók között. Hiszen aki ingyenesen teszi 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állnak, mint grafikai alkotás. Ha valaki kitalál egy grafikai műnek minősülő, egyedi betűtípust és ebből betű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élzottan kereskedelmi felhasználásra szánnak, és árusítanak, ugyanaz a szabály vonatkozik, mint bármelyik licenszdíjas szoftverre a gépeden pl. operációs rendszer. Itthon a Gidata Kft. az egyik legnagyobb font képviselet - a oldalon felhasználási, és jogi kérdésekre bővebb választ kaphatsz.

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 csillagegyü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, vonalvezetés stb. még lehet keresgélni az alábbi oldalon, esetleg kiegyezni vmi. hasonlóval. 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.

24 Fontkezelés A péntek délutánok a legalkalmasabbak a vadászatra - amikor már lehet lazulni, mert nem sürgetnek a 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 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 legszárazabb érzést a myfontbook.com-on található szolgáltatás adja, amelyet minden telepítéses macera nélkül tudok használni, látva az aktuálisan használatba lévő készleteket. Egy pillanat alatt felméri a szá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álatáról - végtelenül egyszerű.

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 is felá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 igyekszem kidolgozni. Font manager szoftverek FontExpert 2010 Sajnos 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 dolgozol. FontExplorer Sajnos, ez már nem létezik ingyenes verzióban. Mindent tud, amit egy ilyen szoftvernek tudnia kell - 80 Euro az ára AMP Font Viewer Semmi 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. Nexusfont Jollyjoker. Ingyen van. Lehet mappázni, tagelni, telepíteni, törölni, megkeresni a duplikációkat, pici és hordozható. Windowsra. Ezeken felül még vagy öt tucat hasonló szoftvert találhatsz, nagyjából azonos tudással - ingyen és sokpénzért is. Ahhoz hogy átlásd mid van, mi az amit telepítettél, és mindez használható-e, arra az AMP Font Viewer teljesen ok, aztán ha egyedi igényeid támadnak - próbálj ki párat, és megtalálod a neked megfelelő megoldást.

26 Olvasnivaló Offline, vagyis könyv Szántó Tibor: A betű ( Akadémiai kiadó) Én már eladtam a saját példányom, sajnos meglehetősen ár alatt - gőzöm sem volt, hogy a 82-es könyv egy igazi ritkaság, pillanatnyilag eft körül van. Ha könyvtárban találsz egy példányt, lapozd át mindenképpen, mindent megtudsz 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áltoznak Tervezz bátran! - Oldaltervezés és tipográfia egyszerűen és azon túl (Scolar Kiadó) Online Designerek írnak az egyes betűtípusokról, könyvajánlók Webes felhasználásról Címsor tipográfia Kult foltblog A 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 mivel vannak érdekes posztok, néha küzdök egy kicsit. Igazi szemlegeltetős fontblogok Szép felhasználások, ötletesen megoldások, tipográfiai érdekességek

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. Letöltés

28 Feladatok Ne csak olvasd! Csináld! 1. Feladat Keresd fel a FontFonter nevű weboldalt - Ez 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 fog elkalauzolni, hogy mi a különbség a nézetek között. Mennyit tesz hozzá, vagy vesz el az olvashatóságbó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

29 2. Feladat Emlé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, illetve előkészítened. Egy drága francia étterem - Le gourmandise a neve Egy vidéki gazda - Szabó János, aki bioborokkal foglalkozik - neki javasolhatsz márkanevet is, de maradhat Szabó János borász Egy kozmetikus, Aletta - aki most készül egy kis üzletet nyitni a belvárosban Lotti Szalon néven Mindhárom megbízóhoz társíts egy színskálát, és egy betűtípust, amivel a márkanevet leírod. Ez a feladat 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élet elsajátítása nagyon fontos a jövőbeli esetleges további tanulmányokat, vagy munkákat illetően. Jó munkát kívánok!