SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
Pixelgyár Kft. 2012 - Minden jog fenntartva!
ingyenes alapozó leckék 2. rész
Betűk,
tipográfia
www.webdesigntanfolyam.com
“Azt szeretném tudni - mormol-
ta 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 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
A szöveg
Hogyan vedd rá a látogatóidat, hogy elolvassák
a gondosan megírt szövegeid?
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 is
jobb volna.
A
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
www.webdesigntanfolyam.com
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
le ingyen is tucatszám.
A
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 legelter-
jedtebb, 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övet-
ni.
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.
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 meg-
szerzett 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.
www.webdesigntanfolyam.com
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.
Dekoratív, a fantasztikus
Fantasy fontok - ahogy az elnevezésől következ-
tetni 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, ada-
tok megjelenítésére semmiképp ne használd!
Egy ilyen felirat a teljes összképet befolyásolhat-
ja - 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ű em-
bléma mellett.
Persze soha ne mond, hogy soha... amíg nem lát-
tad.
A Comic Sans meg egyszerűen csak ciki. :)
Monospace, a fix
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.
Jellemzően kódok, programrészletek megjelení-
tésére használják a szövegben.
Forrás: Pinterest
www.webdesigntanfolyam.com
Websafe és a haverok
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.
A
Szépség, vagy
olvashatóság?
Melyik a fontosabb?
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.
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á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 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.
www.webdesigntanfolyam.com
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.
www.webdesigntanfolyam.com
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.
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!
Ne használj túl sok féle betűtípust!
Az egyik szabály, amit unalomig szoktam ismételgetni, hogy
ha 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 (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ások-
kal 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 :)
www.webdesigntanfolyam.com
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 12-16 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 22-24 px feletti
pedig brutálisan nagy.
(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 fel-
bontá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.
Ez a címsor 24 px betűméretű
Ez a szöveg pedig 16 px.
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 magu-
kat, üzleti honlapokon nem csúfoskodhatnak ilyen szö-
vegek.
www.webdesigntanfolyam.com
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óid-
nak 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ó me-
goldás! Hangsúlyozd nagyobb mérettel, aláhúzással,
vagy akár egy nagyobb sorközzel!
www.webdesigntanfolyam.com
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
Lorem Ipsum
Segítség!
Valami latin szöveg
van az oldalamon!
Mi ez a Lorem ipsum blabla?
A “Lorem ipsum dolor sit amet” kezdetű szöveg
az 1500-as évek óta a nyomdászok, tipográfu-
sok, é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!
www.webdesigntanfolyam.com
Változatosabb dummy
szö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
Hogyan formázz?
A formázatlan szövegnél az üres lap is érdekesebb
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ód
formá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ék
bele. Inkább nézzük meg azt, hogy milyen szövegtípu-
sok fordulnak elő egy átlagos weboldalon.
Bekezdések
A
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ó - lu-
kakat 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 dic-
tumst. Nulla ultrices
tristique eros eu con-
vallis. Nulla facilisi. Ae-
nean consequat volut-
pat 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 ultri-
ces tristique eros eu
convallis. Nulla faci-
lisi. Aenean consequat
volutpat purus, non
volutpat lectus tincid-
unt non.
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Duis
interdum purus ut
eros lobortis viverra.
In hac habitasse platea
dictumst. Nulla ultri-
ces tristique eros eu
convallis. Nulla faci-
lisi. Aenean consequat
volutpat purus, non
volutpat lectus tincid-
unt non.
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Duis
interdum purus ut eros
lobortis viverra. In hac
habitasse platea dic-
tumst. Nulla ultrices
tristique eros eu con-
vallis. Nulla facilisi.
Aenean consequat vo-
lutpat purus, non vo-
lutpat lectus tincidunt
non.
sorkizárt
jobbra zárt
balra zárt középre igazított
www.webdesigntanfolyam.com
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.
www.webdesigntanfolyam.com
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 mega-
dott paraméterek alapján sorolnak szövegeket fontosnak, vagy kevésbé fontosnak, amely a honlap
visszakereshetőségét biztosítja a keresőkben.
A 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!
Összegzés
www.webdesigntanfolyam.com
Szövegírás
Ki írja a szöveget?
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é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ámaszt-
hatsz. 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 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 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 pillana-
tá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.
A
Szöveget írni nem könnyű, főleg
ha muszáj. Mivel én viszonylag
sokat írok, tananyagot, cikket,
blogbejegyzést, vagy dokumen-
tációt, és természetesen értéke-
sítési szöveget is, ezért van pár
módszerem.
A legtutibb az Evernote nevű al-
kalmazás, ami egy webes prog-
ram, 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.
www.webdesigntanfolyam.com
Betűtípusok
Hol és hogyan használhatod őket
a gyakorlatban?
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 - 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 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óak
tö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 a
stílusát - pl. Antik, vagy Gótikus, ezen nincs mit magyarázni.
A
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 tartal-
mat 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álasz-
tásában is.
www.webdesigntanfolyam.com
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.
www.webdesigntanfolyam.com
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?
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őek
a 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-egy
típus mögött, és gondolkodj ezen a vonalon, amikor egy betűtípust kiválasztassz egy munkához.
www.webdesigntanfolyam.com
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 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
Á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 karak-
tereket - 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 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, 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
www.webdesigntanfolyam.com
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áll-
nak, 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 www.font.hu oldalon felhasználási, és jogi
kérdésekre bővebb választ kaphatsz.
www.webdesigntanfolyam.com
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
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. 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 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ála-
táról - végtelenül egyszerű.
http://www.myfontbook.com
www.webdesigntanfolyam.com
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.
Mire használom?
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 dolgo-
zol.
http://www.proximasoftware.com/fontexpert/screenshots.htm
FontExplorer
Sajnos, ez már nem létezik ingyenes verzióban. Mindent tud, amit egy ilyen
szoftvernek tudnia kell - 80 Euro az ára
http://www.fontexplorerx.com/download/
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.
http://www.ampsoft.net/
Nexusfont
Jollyjoker. Ingyen van. Lehet mappázni, tagelni, telepíteni, törölni, megkeresni a
duplikációkat, pici és hordozható. Windowsra.
http://xiles.net/downloads/#NexusFont
Ezeken 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 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.
www.webdesigntanfolyam.com
Olvasnivaló
Offline, vagyis könyv
Szá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 sem
volt, 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á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
http://typographica.org
Webes felhasználásról
http://nicewebtype.com/notes/
Címsor tipográfia
http://www.smileycat.com/miaow/archives/typography-for-headlines.php
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.
http://ilovetypography.com
Igazi szemlegeltetős fontblogok
Szép felhasználások, ötletesen megoldások, tipográfiai érdekességek
http://www.letteringtime.com
http://www.typegoodness.com
http://typenuts.com
www.webdesigntanfolyam.com
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
www.webdesigntanfolyam.com
Feladatok
Ne csak olvasd! Csináld!
1. Feladat
Keresd fel a FontFonter nevű weboldalt - http://fontfonter.com
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á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
2. Feladat
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!
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.

Más contenido relacionado

Destacado

Need for speed undercover
Need for speed undercoverNeed for speed undercover
Need for speed undercoverLucciodavid
 
Brainstorming Session - July 6, 2011
Brainstorming Session - July 6, 2011Brainstorming Session - July 6, 2011
Brainstorming Session - July 6, 2011ladieslearningcode
 
2006 annual audited financial statements
2006 annual audited financial statements2006 annual audited financial statements
2006 annual audited financial statementsProphecy Corp
 
How to Hide Your Page "Likes" from Facebook Graph Search and Social Ads
How to Hide Your Page "Likes" from Facebook Graph Search and Social AdsHow to Hide Your Page "Likes" from Facebook Graph Search and Social Ads
How to Hide Your Page "Likes" from Facebook Graph Search and Social AdsAltheimPrivacy
 
Stimulants Workshop
Stimulants WorkshopStimulants Workshop
Stimulants WorkshopNoel Hatch
 
How the Americas Change (ass. 4)
How the Americas Change (ass. 4)How the Americas Change (ass. 4)
How the Americas Change (ass. 4)03ram
 
American Urbanization and New York City
American Urbanization and New York CityAmerican Urbanization and New York City
American Urbanization and New York City03ram
 
Drishtee village Immersion Program
Drishtee village Immersion ProgramDrishtee village Immersion Program
Drishtee village Immersion ProgramChandra Vikash
 
Assignment 8 Article Sets
Assignment 8 Article SetsAssignment 8 Article Sets
Assignment 8 Article Setsmeggss24
 
Nation Report: Brazil
Nation Report: BrazilNation Report: Brazil
Nation Report: Brazilmeggss24
 
Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast
 Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast
Cross Border Ediscovery vs. EU Data Protection at LegalTech West CoastAltheimPrivacy
 
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)AltheimPrivacy
 
Panama & Los Angeles: The Waterworks That Made the American West
Panama & Los Angeles: The Waterworks That Made the American WestPanama & Los Angeles: The Waterworks That Made the American West
Panama & Los Angeles: The Waterworks That Made the American West03ram
 
Part 1: California
Part 1: CaliforniaPart 1: California
Part 1: Californiameggss24
 
Festival Techniques
Festival TechniquesFestival Techniques
Festival TechniquesNoel Hatch
 

Destacado (19)

Digitális design - Workflow
Digitális design - WorkflowDigitális design - Workflow
Digitális design - Workflow
 
Need for speed undercover
Need for speed undercoverNeed for speed undercover
Need for speed undercover
 
Brainstorming Session - July 6, 2011
Brainstorming Session - July 6, 2011Brainstorming Session - July 6, 2011
Brainstorming Session - July 6, 2011
 
2006 annual audited financial statements
2006 annual audited financial statements2006 annual audited financial statements
2006 annual audited financial statements
 
How to Hide Your Page "Likes" from Facebook Graph Search and Social Ads
How to Hide Your Page "Likes" from Facebook Graph Search and Social AdsHow to Hide Your Page "Likes" from Facebook Graph Search and Social Ads
How to Hide Your Page "Likes" from Facebook Graph Search and Social Ads
 
Stimulants Workshop
Stimulants WorkshopStimulants Workshop
Stimulants Workshop
 
Blebea
BlebeaBlebea
Blebea
 
How the Americas Change (ass. 4)
How the Americas Change (ass. 4)How the Americas Change (ass. 4)
How the Americas Change (ass. 4)
 
American Urbanization and New York City
American Urbanization and New York CityAmerican Urbanization and New York City
American Urbanization and New York City
 
LinkedIn for Lawyers
LinkedIn for Lawyers LinkedIn for Lawyers
LinkedIn for Lawyers
 
Drishtee village Immersion Program
Drishtee village Immersion ProgramDrishtee village Immersion Program
Drishtee village Immersion Program
 
Assignment 8 Article Sets
Assignment 8 Article SetsAssignment 8 Article Sets
Assignment 8 Article Sets
 
Nation Report: Brazil
Nation Report: BrazilNation Report: Brazil
Nation Report: Brazil
 
Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast
 Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast
Cross Border Ediscovery vs. EU Data Protection at LegalTech West Coast
 
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)
Security and Privacy in Deals (altheim & mahajan)(6-3 -2015)
 
Panama & Los Angeles: The Waterworks That Made the American West
Panama & Los Angeles: The Waterworks That Made the American WestPanama & Los Angeles: The Waterworks That Made the American West
Panama & Los Angeles: The Waterworks That Made the American West
 
Part 1: California
Part 1: CaliforniaPart 1: California
Part 1: California
 
2007 Q3 md&a
2007 Q3 md&a2007 Q3 md&a
2007 Q3 md&a
 
Festival Techniques
Festival TechniquesFestival Techniques
Festival Techniques
 

Online Webdesign Tanfolyam 2. Betűk

  • 1. Pixelgyár Kft. 2012 - Minden jog fenntartva! ingyenes alapozó leckék 2. rész Betűk, tipográfia
  • 2. www.webdesigntanfolyam.com “Azt szeretném tudni - mormol- ta 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 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
  • 3. www.webdesigntanfolyam.com A szöveg Hogyan vedd rá a látogatóidat, hogy elolvassák a gondosan megírt szövegeid? 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 is jobb volna. A 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. www.webdesigntanfolyam.com 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 le ingyen is tucatszám. A 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 legelter- jedtebb, 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övet- ni. 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. 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 meg- szerzett 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.
  • 5. www.webdesigntanfolyam.com 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. Dekoratív, a fantasztikus Fantasy fontok - ahogy az elnevezésől következ- tetni 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, ada- tok megjelenítésére semmiképp ne használd! Egy ilyen felirat a teljes összképet befolyásolhat- ja - 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ű em- bléma mellett. Persze soha ne mond, hogy soha... amíg nem lát- tad. A Comic Sans meg egyszerűen csak ciki. :) Monospace, a fix 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. Jellemzően kódok, programrészletek megjelení- tésére használják a szövegben. Forrás: Pinterest
  • 6. www.webdesigntanfolyam.com Websafe és a haverok 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. A Szépség, vagy olvashatóság? Melyik a fontosabb? 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. 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á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 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. www.webdesigntanfolyam.com 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. www.webdesigntanfolyam.com 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. 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! Ne használj túl sok féle betűtípust! Az egyik szabály, amit unalomig szoktam ismételgetni, hogy ha 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 (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ások- kal 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. www.webdesigntanfolyam.com 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 12-16 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 22-24 px feletti pedig brutálisan nagy. (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 fel- bontá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. Ez a címsor 24 px betűméretű Ez a szöveg pedig 16 px. 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 magu- kat, üzleti honlapokon nem csúfoskodhatnak ilyen szö- vegek.
  • 10. www.webdesigntanfolyam.com 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óid- nak 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ó me- goldás! Hangsúlyozd nagyobb mérettel, aláhúzással, vagy akár egy nagyobb sorközzel!
  • 11. www.webdesigntanfolyam.com 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 Lorem Ipsum Segítség! Valami latin szöveg van az oldalamon! Mi ez a Lorem ipsum blabla? A “Lorem ipsum dolor sit amet” kezdetű szöveg az 1500-as évek óta a nyomdászok, tipográfu- sok, é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. www.webdesigntanfolyam.com Változatosabb dummy szö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 :)
  • 13. www.webdesigntanfolyam.com Hogyan formázz? A formázatlan szövegnél az üres lap is érdekesebb 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ód formá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ék bele. Inkább nézzük meg azt, hogy milyen szövegtípu- sok fordulnak elő egy átlagos weboldalon. Bekezdések A 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ó - lu- kakat 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 dic- tumst. Nulla ultrices tristique eros eu con- vallis. Nulla facilisi. Ae- nean consequat volut- pat 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 ultri- ces tristique eros eu convallis. Nulla faci- lisi. Aenean consequat volutpat purus, non volutpat lectus tincid- unt non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dictumst. Nulla ultri- ces tristique eros eu convallis. Nulla faci- lisi. Aenean consequat volutpat purus, non volutpat lectus tincid- unt non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum purus ut eros lobortis viverra. In hac habitasse platea dic- tumst. Nulla ultrices tristique eros eu con- vallis. Nulla facilisi. Aenean consequat vo- lutpat purus, non vo- lutpat lectus tincidunt non. sorkizárt jobbra zárt balra zárt középre igazított
  • 14. www.webdesigntanfolyam.com 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. www.webdesigntanfolyam.com 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 mega- dott paraméterek alapján sorolnak szövegeket fontosnak, vagy kevésbé fontosnak, amely a honlap visszakereshetőségét biztosítja a keresőkben. A 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! Összegzés
  • 16. www.webdesigntanfolyam.com Szövegírás Ki írja a szöveget? 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é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ámaszt- hatsz. 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 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 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 pillana- tá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. A Szöveget írni nem könnyű, főleg ha muszáj. Mivel én viszonylag sokat írok, tananyagot, cikket, blogbejegyzést, vagy dokumen- tációt, és természetesen értéke- sítési szöveget is, ezért van pár módszerem. A legtutibb az Evernote nevű al- kalmazás, ami egy webes prog- ram, 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.
  • 17. www.webdesigntanfolyam.com Betűtípusok Hol és hogyan használhatod őket a gyakorlatban? 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 - 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 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óak tö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 a stílusát - pl. Antik, vagy Gótikus, ezen nincs mit magyarázni. A 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 tartal- mat 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álasz- tásában is.
  • 18. www.webdesigntanfolyam.com 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. www.webdesigntanfolyam.com 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? 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őek a 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-egy típus mögött, és gondolkodj ezen a vonalon, amikor egy betűtípust kiválasztassz egy munkához.
  • 20. www.webdesigntanfolyam.com 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 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
  • 21. www.webdesigntanfolyam.com Á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 karak- tereket - 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 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, 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. www.webdesigntanfolyam.com 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áll- nak, 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 www.font.hu oldalon felhasználási, és jogi kérdésekre bővebb választ kaphatsz.
  • 23. www.webdesigntanfolyam.com 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.
  • 24. www.webdesigntanfolyam.com 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. 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 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ála- táról - végtelenül egyszerű. http://www.myfontbook.com
  • 25. www.webdesigntanfolyam.com 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. Mire használom? 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 dolgo- zol. http://www.proximasoftware.com/fontexpert/screenshots.htm FontExplorer Sajnos, ez már nem létezik ingyenes verzióban. Mindent tud, amit egy ilyen szoftvernek tudnia kell - 80 Euro az ára http://www.fontexplorerx.com/download/ 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. http://www.ampsoft.net/ Nexusfont Jollyjoker. Ingyen van. Lehet mappázni, tagelni, telepíteni, törölni, megkeresni a duplikációkat, pici és hordozható. Windowsra. http://xiles.net/downloads/#NexusFont Ezeken 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 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. www.webdesigntanfolyam.com Olvasnivaló Offline, vagyis könyv Szá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 sem volt, 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á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 http://typographica.org Webes felhasználásról http://nicewebtype.com/notes/ Címsor tipográfia http://www.smileycat.com/miaow/archives/typography-for-headlines.php 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. http://ilovetypography.com Igazi szemlegeltetős fontblogok Szép felhasználások, ötletesen megoldások, tipográfiai érdekességek http://www.letteringtime.com http://www.typegoodness.com http://typenuts.com
  • 27. www.webdesigntanfolyam.com 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. www.webdesigntanfolyam.com Feladatok Ne csak olvasd! Csináld! 1. Feladat Keresd fel a FontFonter nevű weboldalt - http://fontfonter.com 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á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
  • 29. www.webdesigntanfolyam.com 2. Feladat 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! 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.