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.