Pixelgyar A Betuk Tipografia

ALAPOZÓ LECKÉK
A BETŰK,
TIPOGRÁFIA
FONTOS: Kérlek a letöltött leckék esetén figyelj arra, hogy ne sértsd meg a
szerzői jogokat, bízom benne, hogy a munkámat megtiszteled azzal, ha
másoknak nem küldöd el, hanem az oldalunkra
- www.webdesigntanfolyam.com - irányítod őket!
Pixelgyár Kft. © 2017
A betűk, tipográfia 2
TARTALOMJEGYZÉK
BEVEZETÉS........................................................................................................................................................................................................................3
Hogyan használd a betűtípusokat?
AZOK CSAK BETŰK! VAGY NEM?
Hogyan vedd rá a látogatóidat, hogy elolvassák a gondosan megírt
szövegeid?
BETŰCSALÁDOK...........................................................................................................................................................................................................4
SERIF......................................................................................................................................................................................................................................5
SANS SERIF........................................................................................................................................................................................................................6
KALLIGRAFIKUS.............................................................................................................................................................................................................7
DEKORATÍV.......................................................................................................................................................................................................................8
HONNAN SZEREZZ BETŰTÍPUSOKAT?.........................................................................................................................................................9
A legfontosabb kérdés: Árvíztűrőképes-e?................................................................................................................................................10
Miért vennél, ha egyszer ingyen van egy rahedli?.................................................................................................................................11
Honnan tudsz betűtípusokat letölteni?.......................................................................................................................................................13
Mihez kezdj a letöltött betűtípusokkal?......................................................................................................................................................13
Amit sokan nem tudnak........................................................................................................................................................................................14
Mit keres itt ez a cuki hörcsög?.........................................................................................................................................................................15
MELYIK BETŰTÍPUS MELYIKHEZ ILLIK?......................................................................................................................................................16
1. szabály – maximum 3 betűtípus...................................................................................................................................................................17
2. szabály – hozz létre hierarchiát.....................................................................................................................................................................18
3. szabály – legyen kontraszt!.............................................................................................................................................................................20
4. szabály – figyelj a jelentésre!..........................................................................................................................................................................22
5. szabály – legyél fontérzékeny!.......................................................................................................................................................................23
HOGYAN FORMÁZD A SZÖVEGEKET?........................................................................................................................................................24
ÉRDEKESSÉG................................................................................................................................................................................................................27
AAszínelmélet alapjai
betűk, tipográfia 3
BEVEZETÉS
Hogyan használd a betűtípusokat?

AZOK CSAK BETŰK! VAGY NEM?
“Azt szeretném tudni - mormolta maga elé - mi is van egy ilyen könyvben,
amíg csukva van. Természetesen betűk vannak benne, melyeket papírra
nyomtattak, de mégis valaminek kell még lennie benne, mert ha kinyitom,
egyszerre előttem áll egy egész történet. Személyek bukkannak fel, akiket
még nem ismerek, mindenféle kalandok, tettek és harcok fordulnak elő - és
néha tengeri viharok játszódnak le, vagy az ember idegen országokat és
városokat lát. Ez mind benne van ugyanis valahogyan a könyvekben.
El kell olvasni, hogy átélhessük, ez világos. De belül mindez már előre meg-
van. Szeretném tudni, hogyan.”
Michael Ende
Hogyan vedd rá a látogatóidat, hogy elolvassák a gondosan megírt

szövegeid?
A weben megjelenő tartalom tetemes része szöveg, ami csak arra vár, hogy
a látogatók elolvassák. Vagyis mi arra várunk, hogy a látogatóink szépen
akkurátusan sorról sorra menjenek végig a honlapon. Frászt! Az emberek
többsége nem szeret hosszabb szövegeket olvasni, ráadásul monitoron
sokkal nehézkesebb is az elolvasott szöveget értelmezni, így legtöbbször
nem is olvassák el, bármennyire is szeretnénk, még akkor sem, ha nekik is
jobb volna. Mit lehet ezért 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 olvashatóság.
Ezt a sort akár be is keretezhetném, és ezzel el is mondtam mindent.

Majdnem.
BETŰCSALÁDOK
A betűtípusok megválasztása egyik kulcseleme a webdesignnak, amelyet

gyakran már egy meglévő arculat is meghatároz. Megszámlálhatatlan
különböző betűcsaládok állnak rendelkezésre, tölthetőek le ingyen is
tucatszám.
A betűtípusok, (angolul fonts) 5 nagy csoportra osztható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
Nyiss ki egy könyvet, és nagy valószínűséggel máris találkozol egy

betűtípussal a Serif fajtából. Nyomtatásban a talpas betűforma a
legelterjedtebb, pont a talpa segíti az olvashatóságát, hiszen könnyebb
követni, sorvezető szerepe van, így nem kell kisiskolás módon az ujjunkkal
követni.
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. Nagy méretben, pl. címsorokban szokás
weboldalakon alkalmazni, folyószövegekhez a betűk sűrűsége miatt nem
ajánlott.
SANS SERIF
Bár vannak fellángolások, a talp nélküli betűtípus webes szövegként

továbbra is tartja a megszerzett első helyét. Ezek sima, díszítés nélküli
betűcsaládok az oldalak 70%-án segítik a szövegértést. Vannak helyzetek,
amikor szakíthatunk a hagyományokkal, de az Arial, Helvetica és a Verdana
ezentúl mindenhová követ.
KALLIGRAFIKUS
Írott, vagy más néven még kurzív, script, handwrinting 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. Mivel a kalligráfia, kézírás a
reneszánszát éli, bődületes mennyiségben találsz ilyen csodaszép, bár nem
feltétlenül jól alkalmazható betűket mostanság.
Egy ilyen felirat a teljes összképet befolyásolhatja - pl. ha kiválasztasz egy

szép, kötött, kézírás jellegű betűt, mint az Ollie Regular, az a további
stílusjegyeket is behatárolja - elég furcsán mutatna egy szögletes, geometriai
jellegű embléma mellett. Persze soha ne mondd, hogy soha... amíg nem
láttad.
DEKORATÍV
Ide sorolunk mindent, azt is ami nem dekoratív, csak “érdekes”.

Az ilyen betűtípusokat szinte sosem alkalmazzuk olvasandó szövegek
formázásához, ahogy a neve is mutatja dekorálására valók.
HONNAN SZEREZZ BETŰTÍPUSOKAT?
A Facebook oldalon és az OWT Webdesign Marketing csoportban is

rendszeresen osztok meg olyan linkeket, amelyekről szebbnél szebb
betűtípusok tölthetőek le, és az nagyon örülhet, aki tudja mit kell tenni vele.
Biztos vagyok azonban, hogy jóval többen vannak azok, akik nem tudják és
nem is merik megkérdezni, hogy mégis mit kezdjenek a letöltött fontokkal.
A weben túlzás nélkül mondhatom, hogy több ezer betűtípushoz férsz hozzá
ingyenesen – vagy a speciálisan erre létrehozott weboldalakon pl. Font
Squirrel, vagy a design blogok bejegyzéseiben, összeállításaiban bukkannak
fel. Emellett nagyon sok tervezőnek van saját blogja, ezekről egyedi, kevésbé
ismert betűcsaládok szerezhetőek be, de ide már kevesen jutnak el.
A betűtípusok a design alapkövei: a szépen formázott szöveg, a jól

megválasztott betűtípussal nem csak esztétikai kérdés, hanem
használhatósági és marketing szempontból is jelentős. Sok esetben viszont
dekoratív funkciókat is betölt egy-egy betűtípus, gondoljunk csak a logók,
emblémák karakteres tipográfiáira.
Nagyon fontos, hogy a kettő között különbséget tudj tenni, az olvasandó

szöveg és a díszítő funkció között, mindkettőnek megvannak a maguk
betűtípusai, pl. a webes szövegekben oly gyakran alkalmazott Arial, Verdana
vagy Helvetica bármilyen unalmas is, remekül olvasható és értelmezhető.
A legfontosabb kérdés: Árvíztűrőképes-e?
Mivan? Nem veled van a baj, ha nem érted. Ez egy tesztszöveg, amely
egészen pontosan így szól: árvíztűrőtükörfúrógép, és ez a gyönyörű szó
tartalmaz minden magyar ékezetes karaktert. Mivel a magyar nem egy
világnyelv, a betűtípusokat készítők elég kevés alkalommal gondolnak ránk,
valahol érthető módon, főleg ha ingyenesen teszi letölthetővé a
fontkészletét. Meg kell mondjam a fizetős fontokkal ilyen gondok egyre
kevésbé vannak, ugyanis ott már szempont, hogy mindenkinek el tudják
adni.
A letöltő oldalakon legtöbbször van egy ilyen sáv, ahová be lehet illeszteni
ezt a szöveget és máris láthatod, hogy a kiválasztott típus megfelel-e. Sajnos
ebben az esetben fennáll a klasszikus probléma: az ű és az ő hiánya,
bármennyire is szép, laikusként nem fogod tudni pótolni. Az utólag
rászerkesztett vesszőket inkább felejtsd el, többet ártasz, mint használsz!
Néhány oldalon a nyelvre is rá tudsz szűrni, így egyből kiesnek azok, amelyek
nem jöhetnek szóba.
Miért vennél, ha egyszer ingyen van egy rahedli?
Rögtön ki is derült az is, hogy a sok-sok ingyenes betűkészlet mellett bizony

megvásárolhatóak is vannak. Az ékezeteken túl a kutya a felhasználhatóság
terén van elásva. Mert bizony az ingyenesség csak részben ingyenes, vagyis
többnyire magánhasználatra, pl. a saját fotóid feliratozására vagy a blogod
fejlécébe. De ha már üzleti blogod van, akkor bizony már nem biztos, hogy
ingyenes.
A fenti Font Squirrelt azért hoztam, mert itt már a címben szerepel a “100%
Free for Commercial use” vagyis az innen letölthető fontok üzleti célokra is
szabadon felhasználhatóak. De mi van a bárhol máshol talált betűtípusokkal,
honnan tudhatod, hogy a készítője mire adott engedélyt és kinek?
Nos, van egy rossz hírem, ezt minden esetben, minden egyes letöltött fontnál
(képnél, grafikánál is) a te kötelességed ellenőrizni az adott weboldalon,
ahonnan letöltöd, vagy van egy általános licenc, vagy ha sok feltöltője van az
oldalnak, akkor viszont az adott betűtípus körül kell keresgélned. pl. itt a
Deviantarton a kép alatt a leírásban:
Persze gyakran fogsz olyannal is találkozni, hogy nincs oda írva semmi, vagy
nem lehetsz biztos benne, hogy valóban az a jogtulajdonos aki feltöltötte.
Ilyenkor ha nem sikerül kideríteni és üzleti célra szánod, akkor inkább keress
másikat. Ha abban bízol, hogy nem fog kiderülni. Lehet. De az is lehet, hogy
igen. Soha ne feledd az internet egy kis falu, ahol gyorsan kiderülhet bármi.
Egy kis cégnek magyarázkodni elég kellemetlen, gondold végig, hogy egy
szerzői jogsértéses Homár poszt kb. örökre rögzül a Google keresések között,
és ezentúl aki a vállalkozásodra keres… jujj, nagyon gáz, igaz?
Nagyon nem éri meg az a pár dollár amennyibe egy ilyen font kerül.
Honnan tudsz betűtípusokat letölteni?
A keresőben a free fonts keresőkifejezésre már rengeteg (jelenleg több mint

20 millió) találatot kapsz, szerintem ezzel el leszel egy darabig.
Mihez kezdj a letöltött betűtípusokkal?
Leggyakrabban egy .zip vagy .rar fájlba csomagolva töltődnek le, ezeket ki
kell csomagolni. Ha ezt nem tudod hogyan kell, ez segíthet. A kicsomagolt
fájlok TrueType (.ttf) vagy OpenType (.otf) fájlokat tartalmazhatnak, ezek
maguk a betűtípusok.
Régebbi Windows esetén ezeket az operációs rendszer Windows/Fonts
mappájába kell bemásolnod és innen az egész rendszer el fogja érni, a
grafikus programok is. Újabbaknál, mint Mac esetén csak kattintanod kell a
betűtípusra és megnyomni a Telepítés / Install gombot. Innentől kezdve az
összes program tudja használni, nem kell külön a Photoshopba vagy
Illustratorba telepítened!
Amit sokan nem tudnak:
Ha te megírsz egy dokumentumot egy csicsás betűtípussal, akkor

bármennyire is szeretnéd, a címzettnek nem úgy fog megjelenni, mert nincs
meg az adott betűtípusa. Azt meg nem kérhetjük, hogy mielőtt olvasni kezd
telepítse :) Ilyenkor érdemes .pdf formátumban menteni a levelet,
dokumentumot, mert ez szépen megőrzi a formázását is.
Ugyanez igaz egy grafikára is, mondjuk elkészítesz egy logót Adobe
Illustratorban, akkor vagy csatolnod kell a használt fontot mellé a
nyomdának, vagy alakzattá kell változtatnod, hogy a másik oldalon is
ugyanazt lássák, mint amit te megterveztél.
Mit keres itt ez a cuki hörcsög?
Ismerem jól a hörcsög effektust, amikor: Ezt is! Meg még ezt is! meg Ez is jaj
de szép! felkiáltással gyorsan össze lehet gyűjteni a gépen ezerötszáz
betűtípust. Amit ha telepítesz is, akkor szinte garantált, hogy megfekszik a
géped! Ahogy hozzáadtad, úgy el is tudod őket távolítani, ha túl sokat
homokórázik a gép, akkor gondolkozz el, mostanság miket töltöttél le és
telepítettél :)
MELYIK BETŰTÍPUS MELYIKHEZ ILLIK?
Azaz mi alapján párosítjuk össze egymással a betűtípusokat? Ez a két

leggyakoribb kérdés a témában, ami felmerül a tanfolyam során!
Láttam már olyan tanulót, akinek volt valamilyen vele született érzéke a
fontok ösztönös összeválogatásához, mert előképzettsége nem volt. Szóval
van ilyen is. Mindenki másnak meg lehet tanulni!
Alapvetően arra kell ügyelned, hogy a különböző betűtípusok ne nyomják el
egymást, és a leírt szöveget könnyebben befogadhatóvá tegyék!
Ha folyószövegről van szó, akkor kezdetnek elég, ha ezt a két párosítást

fejben tartod! Ha ezeket betartod, nagy bajod nem lehet a betűkeverésből:
A sikeres tervezők egyik titka, hogy nem folyton újabb és újabb

fontkombinációkat tesztelgetnek, hanem 5-6 jól beválttal dolgoznak, és ahol
teret kapnak a kísérletezésre, ott élik ki!
Természetesen nem akarlak korlátozni az újításokban, próbáld ki,
tesztelgesd mi az ami működhet!
1. szabály – maximum 3 betűtípus
Ezeknek a betűtípusoknak természetesen lehet a különböző vastag vagy

dőlt tagjait keverni, tehát elég változatos tud lenni.
Optimális esetben van egy script vagy dekorfont, amellyel mint a név
mutatja dekorálunk, nagy látványos feliratokhoz használjuk, valamint a
szöveges részekhez egy címsorhoz és egy folyószöveghez választunk fontot.
Amennyiben konkrét arculathoz, logóhoz kell alkalmazkodni, úgy a logó
betűtípusát is beleszámítjuk a háromba, és ha az arculat másképp nem
rendelkezik, választunk mellé szövegfontokat. Miért három? Mert ha ennél
többet használunk, a végeredmény zavaros lesz, nehezen olvasható és
értelmezhető.
Rögtön elmondom, hogy ezt a szabályt fel is lehet rúgni, de ahhoz már
nagyon jól kell értened a fontok párosításához, addig viszont nagyon nem
ajánlott!
2. szabály – hozz létre hierarchiát
Gondold végig, hogyan épül fel egy könyv, vagy egy újságcikk szerkezete, ha
használtál már Word-öt vagy Google Docs szövegszerkesztőt, akkor már
használtad is ezeket a formázásokat. Van ugye a címe, jó nagy felirattal, ő áll
a tetején. Aztán lehet alcíme is, amely valamelyest kisebb mérettel, de még
mindig kiemelt figyelmet kap. Ha cikkről beszélünk, akkor egy vastagabb
lead, vagyis bevezető jön, a szöveget pedig címsorokra bontjuk és
szövegtörzsre. A webes szövegeknek erre megvan a maguk html logikája,
amelyet webre tervezésnél illik követni.
Fontos a következetesség – tehát ugyanolyan funkcióra az oldal további
részén is ugyanazt a formázást használd, és fentről lefelé haladva csökkentsd
a font méretet, legfontosabb szempont minden esetben az olvashatóság.
Ezt még úgy 500x fogod olvasni!
De akkor is legyen hierarchia, ha csak egy képet feliratozol, hangsúlyozd a fő

mondanivalót és támaszd alá kisebb alcímmel, sokkal vonzóbb a szemnek,
mintha nincs meg ez a hierarchia.
Ok, de mi a helyzet a script és a dekorfontokkal?
Ez a kérdés már nehezebb, mert sok tényezőtől függ, hogy mennyire lehet
elragadtatni magad!
Sőt, különleges esetben egy dekorfontot akár egy script fonttal is

kiegészíthetsz!
De nagyon könnyű átesni a ló másik oldalára, ne akarj túl sok mindent

belezsúfolni egyetlen feliratba!
3. szabály – legyen kontraszt!
Jó-jó, de mit jelent a kontraszt? Kontrasztot jelenthet a méret, vagyis akár

egyetlen betűcsaláddal és a megfelelő sorok eltérő méreteivel is lehet
kiemelni, amely nem csak vizuális kiemelést jelent, hanem a szöveg
jelentését is hangsúlyosabbá teszi. Két eltérő betűcsalád különbözősége is
kontrasztos lehet, a betűtípusok megválasztásánál azonban arra is törekedj,
hogy a szövegnek is megfelelő legyen. Jelen esetben az idő és a pénz
fogalmát egy talp nélküli, modern és egy klasszikus hatású, talpas fonttal
állítottam szembe egymással, egy bohókás dekor font nem lett volna jó
választás.
Még egy szimbólumot is elhelyeztem benne, ez pedig a kör – az időnek és a

pénznek is megvan a maga körforgása. Használj bátran Te is a feliratokban
egyszerű alakzatokat – négyzet, vonalak, kör, csillag stb., amelyek segítik a
szövegek tagolását és esetleg plusz jelentést is adnak hozzá!
Máskor pedig egy merészebb fontválasztást ellensúlyoz egy nagyon átlagos

betűtípus, így alkotnak tökéletes egyensúlyt.
4. szabály – figyelj a jelentésre!
Nem csak a családmodell fontos, hanem a mögöttes tartalom szerepe is – a

Serif fontok klasszikusak, míg a Sans-serifek modern hatású fontok, a Script
fontok a maguk kézírás hatásával nagyon emberiek, közvetlenek, elegánsak
vagy romantikusak tudnak lenni, a dekorfontok pedig gyakran esnek
túlzásokba, vagy képviselnek egyetlen stílust, pl. Western. Ebben a
kategóriában akadnak szinte olvashatatlan betűtípusok, ezeket jobb
elkerülni!
Számos remek kombinációt tudsz összerakni a fontok stílusa alapján, a fenti

szabályokat is figyelembe véve:
romantikus párosítás – lányos témák, esküvői szettek, vagy Valentin-nap, így
nem esel pánikba, ha van egy ilyen kéznél
karácsonyi fontpárok – milyen jól jönnek a képeslapokhoz, kampányokhoz,
igaz?
vicces fontpárok – mémek feliratozásához, könnyed, humoros
kampányokhoz.
5. szabály – legyél fontérzékeny!
Fogyassz rendszeresen olyan tartalmakat, amelyekkel a tipográfiai érzéked

javítható! Rengeteg ilyen magazin, blog létezik, itt találsz egy összeállítást
kiindulásnak. Járj nyitott szemmel, és vedd észre a feliratokat, a weboldalak
címsorait; a tetszetős darabokat mentsd el egy ehhez hasonló Pinterest
mappába, hogy később is tudj belőlük tanulni!
Tipp! Kevesen veszik észre, de a Google Fonts is kínál némi segítséget, ha

kiválasztasz egy fontot, a Pairings fülön alternatívát kínál, milyen más
fontokkal tudod párosítani – ha nagyon kétségbe vagy esve!
De erre szakosodott weboldalakat is találsz már jócskán, hogy ne neked

kelljen addig kitalálni, amíg nem vagy biztos a dolgodban: http://fontpair.co/
Hogyan formázd a szövegeket?
A honlapon lévő szöveges anyagok megjelenését (is) az ún. 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ípusoka vonatkozó tulajdonságokat pl. milyen betűtípussal,
színnel, melyik oldalra zárva stb. jelenjen meg. Amíg nem érünk oda az
anyagban, addig ha nem tudsz erről többet, egyelőre nem bonyolódnék
bele. Inkább nézzük meg azt, hogy milyen szövegtípusok fordulnak elő egy
átlagos weboldalon.
Óvatosan bánj a festékes vödörrel!
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. Dőlt betűvel általában csak az
idézeteket, verseket, párbeszédeket jelöljük, tehát címsorként, vagy egy
grafikában nem jelenik a dőlt kiemelés. A kiemelési formákat nem
halmozzuk pl. dőlt vastagított pirossal kiemelt szöveg felhívást a lépcsőházi
üzeneteken túl máshol nem alkalmaznak!
Tagold a szöveget!
Az olvashatóságot nem csak a betűtípus jellege határozza meg, hanem az

emberi tényezők is. Olvasás közben a tekintetünk nem megy végig a
szövegen folyamatosan, hanem ugrásokkal rögzíti, egyszerre 3-4 betűre,
vagyis 1-2 szótagra koncentrál.
Az ilyen szkennelő olvasás miatt fontos, hogy a szöveg formázva legyen, így
könnyebb átnézni egy hosszabb szöveget, kiszűrni a lényeges részeket.
Használd a szövegszerkesztés alap elemeit, legyen szerkezete a leírt

szövegnek online is, azaz főcím, címsorok, alcímek, bekezdések,
felsorolások stb.
Ha nem tanultál szövegszerkesztést pl. Wordben, akkor egyúttal érdemes azt

is gyakorolni, remek online segédletek vannak. Én hosszú évek óta az
ingyenes Google Dokumentumokban dolgozom, most is éppen, ez is ott
készül. Ismerd meg, ha eddig nem használtad!
https://www.google.com/intl/hu/docs/about/
Biztosan találkoztá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 kb. 600 px szélességet javaslom etalon gyanánt, ennyit tudunk
befogni a szemünkkel kényelmesen.
Használj megfelelő nagyságú betűket!
A legjobb betűméret az, ami olvasható a többség számára.

Ez a 15-18 pixel átlagosan - a betűket is 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 webes szövegek nagysága manapság a megjelenítő eszköz
méretéhez is alkalmazkodik, tehát tervezéskor azt is figyelembe kell venni,
hogy ugyanúgy olvasható legyen a szöveged mobil eszközön, mint egy
hatalmas képernyőn!
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 felbontása, a böngésző beállítása, vagy
maga az oldal is lehetőséget biztosíthat a betűméretek növelésére vagy
csökkentésére.
Az emberi tényezők is közrejátszanak - ha tudjuk, hogy egy weboldal várható
olvasóközönsége megette a kenyere javát (50+), akkor ne is gondolkodjunk a
12 px alatti bármilyen szövegben, mert nem fogják tudni elolvasni.
Helyesí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.
Normálisabb munkáknál azért többen átnézik - több szem többet lát alapon,
mert a designer ugye nem is korrektor. Ha úgy megy ki valami, mint a közeli
pizzéria szórólapja - csírke rízzsel - már necces picit.
Tehát helyesírás. Nézesd át a weboldalad szövegét valakivel, akinek jobb,

mert sokan ugranak erre!
Nekem vannak típushibáim, amiket már úgy megszoktam, nehezen válok
meg tőlük! Előnye, hogy hamarabb felismerem, amikor ellopják a
weboldalam szövegét! Ezt a szöveget is jó eséllyel átolvasta a kolleganőm és
sepregetett utánam, de ha maradt benne hiba, elnézésed kérjük! Remélem
ettől még érthető az, amit itt összehordok :)
ÉRDEKESSÉG
Próbáld ki ezt az online eszközt:

http://www.webpagefx.com/tools/read-able/ amely a különböző oldalak
olvashatóságát vizsgálja számos tudományos szempont alapján, nem csak a
betűtípust, de a szómennyiséget, reklámzajt is figyelembe véve. Nézd meg a
népszerű híroldalak teljesítményét, és vesd össze a saját tapasztalataiddal!
Próbáld ki blogok címeit is, amelyeket Te nehezen olvashatónak találsz!
SZERETNÉL TÖBBET
TANULNI?
Ha szeretnél többet megtudni a betűkről, betűtípusokról,

designról, esetleg új karrier felé kacsintgatsz, nézz szét
weboldalunkon, ahol hasznos tartalmaink mellett
megtalálhatod képzéseinket is, amelyek segítségével
1 éven belül a magad ura lehetsz és elsajátíthatod
a webdesign csínját-bínját!
TOVÁBB A WEBOLDALRA!

Pixelgyar A Betuk Tipografia

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pixelgyar A Betuk Tipografia

Uploaded by

Copyright:

Available Formats

ALAPOZÓ LECKÉK

Hogyan használd a betűtípusokat?

Hogyan vedd rá a látogatóidat, hogy elolvassák a gondosan megírt

A tipográfia a szövegek megjelenítésének tudománya, amely a nyomtatás

Ami mindent felülír, azaz a megjelenést is: az olvashatóság.

Ezt a sort akár be is keretezhetném, és ezzel el is mondtam mindent.

A betűtípusok megválasztása egyik kulcseleme a webdesignnak, amelyet

A betűtípusok, (angolul fonts) 5 nagy csoportra oszthatóak:

Nyiss ki egy könyvet, és nagy valószínűséggel máris találkozol egy

Bár vannak fellángolások, a talp nélküli betűtípus webes szövegként

Egy ilyen felirat a teljes összképet befolyásolhatja - pl. ha kiválasztasz egy

Ide sorolunk mindent, azt is ami nem dekoratív, csak “érdekes”.

HONNAN SZEREZZ BETŰTÍPUSOKAT?

A Facebook oldalon és az OWT Webdesign Marketing csoportban is

A betűtípusok a design alapkövei: a szépen formázott szöveg, a jól

Nagyon fontos, hogy a kettő között különbséget tudj tenni, az olvasandó

A legfontosabb kérdés: Árvíztűrőképes-e?

Miért vennél, ha egyszer ingyen van egy rahedli?

Rögtön ki is derült az is, hogy a sok-sok ingyenes betűkészlet mellett bizony

Honnan tudsz betűtípusokat letölteni?

A keresőben a free fonts keresőkifejezésre már rengeteg (jelenleg több mint

Mihez kezdj a letöltött betűtípusokkal?

Amit sokan nem tudnak:

Ha te megírsz egy dokumentumot egy csicsás betűtípussal, akkor

Mit keres itt ez a cuki hörcsög?

MELYIK BETŰTÍPUS MELYIKHEZ ILLIK?

Azaz mi alapján párosítjuk össze egymással a betűtípusokat? Ez a két

Ha folyószövegről van szó, akkor kezdetnek elég, ha ezt a két párosítást

A sikeres tervezők egyik titka, hogy nem folyton újabb és újabb

1. szabály – maximum 3 betűtípus

Ezeknek a betűtípusoknak természetesen lehet a különböző vastag vagy

2. szabály – hozz létre hierarchiát

De akkor is legyen hierarchia, ha csak egy képet feliratozol, hangsúlyozd a fő

Ok, de mi a helyzet a script és a dekorfontokkal?

Sőt, különleges esetben egy dekorfontot akár egy script fonttal is

De nagyon könnyű átesni a ló másik oldalára, ne akarj túl sok mindent

3. szabály – legyen kontraszt!

Jó-jó, de mit jelent a kontraszt? Kontrasztot jelenthet a méret, vagyis akár

Még egy szimbólumot is elhelyeztem benne, ez pedig a kör – az időnek és a

Máskor pedig egy merészebb fontválasztást ellensúlyoz egy nagyon átlagos

4. szabály – figyelj a jelentésre!

Nem csak a családmodell fontos, hanem a mögöttes tartalom szerepe is – a

Számos remek kombinációt tudsz összerakni a fontok stílusa alapján, a fenti

5. szabály – legyél fontérzékeny!

Fogyassz rendszeresen olyan tartalmakat, amelyekkel a tipográfiai érzéked

Tipp! Kevesen veszik észre, de a Google Fonts is kínál némi segítséget, ha

De erre szakosodott weboldalakat is találsz már jócskán, hogy ne neked

Hogyan formázd a szövegeket?

A honlapon lévő szöveges anyagok megjelenését (is) az ún. stíluslap - CSS

Óvatosan bánj a festékes vödörrel!

A betűk színével ugyanez a helyzet. A kevesebb több, sokkal több.

Az olvashatóságot nem csak a betűtípus jellege határozza meg, hanem az

Használd a szövegszerkesztés alap elemeit, legyen szerkezete a leírt

Ha nem tanultál szövegszerkesztést pl. Wordben, akkor egyúttal érdemes azt

Használj megfelelő nagyságú betűket!

A legjobb betűméret az, ami olvasható a többség számára.

A számítógéppel, internetes környezetben végzett munka egyik hátránya is,

Tehát helyesírás. Nézesd át a weboldalad szövegét valakivel, akinek jobb,

Próbáld ki ezt az online eszközt:

Ha szeretnél többet megtudni a betűkről, betűtípusokról,

You might also like