„PUSZTÁN SZÁMÍTÓ ÉRTELEMMEL NEM LEHET SZÉP BETŰT TERVEZNI” Nagy Zoltán
6
A tipográfia szeretete és fontossága Arra gondoltam, bevezetésként érdemes
mertek és nevén neveztek egy-egy be-
lenne néhány szót ejteni a témaválasz-
tűtípust. Akkoriban még nem voltak el-
tásról. Előző könyvemben, a Branding és
érhetőek az analizáló szoftverek, mint
a vizuális válaszban már érintettem tipo-
például a myfonts.com oldalán található
gráfiai témákat, de úgy érzem, hogy a ti-
WhatTheFont szolgáltatás. Ez a szolgálta-
pográfia önmagában annyira fontos és
tás a feltöltött kép vagy fotó alapján nagy
meghatározó szerepet tölt be a vizuális
valószínűséggel megmondja, hogy melyik
kommunikáció, vagy akár a branding vilá-
betűtípus van a képen. A 2000-es évek
gában, hogy érdemes vele részletesebben
elején ilyen szoftver még nem volt, kellet-
foglalkozni.
tek a tapasztalt szakemberek, akik szinte
A tipográfia a mindennapok része, nem
ránézésre megmondták, hogy Avenir vagy
egy elefántcsonttoronyban végzett tevé-
Gill Sans betűtípus van a képen. Nem fért
kenység kiváltságosok számára. Nemcsak
a fejembe, hogy hogyan csinálják, hogyan
azoknak fontos, akik szakmájukban alkal-
tudhatják a több tízezer vagy százezer
mazzák a tipográfiát, hanem mindenki
betűtípus közül, hogy melyik az, ráadásul
számára. Aki írt már számítógépen le-
olyan kis apró különbségek vannak, ame-
velet vagy függesztett ki üzenetet a lép-
lyeket akkoriban még észre sem vettem.
csőházban, már mind-mind foglalkozott
Azóta megnyugodtam, igaz, kellett hozzá
tipográfiával. Még ha ez lehet, hogy nem
egy évtizednyi tanulás és tapasztalat-
is tudatos tevékenység vagy tervezés volt.
szerzés, de magam is felismerem a gya-
Szakmai karrierem hajnalán csodáltam
kori betűtípusok jó részét, sőt nem tudom
azokat a kollégákat, akik azonnal felis-
megállni, ha látok egy feliratot az utcán, 7
hogy ne analizáljam azt. Szakmai ártalom.
mestersége számítógéppel című könyve.
Ugyanezek a részletek, amelyek segítenek
Alapmű, minden oktatási intézményben
felismerni egy betűtípust, segítenek ab-
elsőként ajánlják, de nincs is nagyon mit
ban, hogy a designerek és tipográfusok
ajánlani ezen kívül. 1996-ban, tehát több
elérhessék kommunikációs céljaikat: ezek
mint húsz éve íródott, és ha nagyon sar-
a részletek segítenek elmesélni a történe-
kítok, akkor nem nagyon jelent meg ti-
teket, amelyekből az emberiség nem lát-
pográfiára fókuszáló magyar könyv azóta.
szik kifogyni.
Ez a könyv nem szeretne a „Virágvölgyi
Ehhez tartozik az is, hogy sokan nem ér-
könyvvel” konkurálni, inkább az abban
tik, miért jelennek meg nap mint nap szin-
foglalt alapvető tudásra épül, kiegészíti
te százával az új betűtípusok. Még nincs
azt. Ez a könyv nem tanítja meg az alapo-
elég? - kérdezik. Nincs elég, hiszen ez
kat, de azokra épít, és abban segít, hogy
a folyamatos változás, folyamatos pezsgés
a tipográfiai tudásunk egy következő
hordozza magában a tipográfia fejlődését.
szintre léphessen. A tipográfia ráadásul
Amióta a tipográfia létezik, mindig is
alapvetően konzervatív dolognak tűnhet,
a technológiai fejlődés hajtotta, a gépek
Gutenbergtől kiindulva a könyvnyomta-
és eszközök fejlődése hozta magával
tás, a nyomdai szedések világán át elju-
a tipográfiai innovációt. Nincs ez más-
tottunk a digitális tipográfiai térbe, amely
képp ma sem: a folyamatosan fejlődő
már egyáltalán nem konzervatív, és mára
nyomdatechnika vagy a digitális kijelzők
sokak által űzött, felkapott tevékenység
felbontása és a technológia folyamato-
színhelyévé vált.
san lehetőséget ad a tervezők és innovátorok számára újabb és újabb technológi-
De a tipográfia menő!
ai megoldásokra. Többek között ez is a fantasztikus a ti-
Nagy álmom, hogy ez a könyv is széles
pográfiában, ezért fontos ezt a témát
körben elterjedjen, és hasznos segítséget
alaposan körüljárni, mert ezek az elő-
nyújtson nemcsak a napi munkában, hanem
relépések, apró eltérések, folyamatosan
az általános tipográfiai tudás vagy szemé-
változó részletek azok, amelyek a tervező-
let kialakításában és terjedésében, hogy a
grafika csúcsára emelik a tipográfiát. A le-
könyvem segítségével egy picivel most is kö-
írt szöveg és annak környezete, minden kis
zelebb kerüljünk a rendezett és jobb vizuális
részlet egy külön történetet tud elmesélni:
környezethez Magyarországon.
• a layout,
A könyv felépítésekor az volt az elkép-
• a belső és külső arányrendszerek,
zelésem, hogy egy olyan könyv szülessen,
• a betűtípus tulajdonságai, részletei
amely reflektál a kor elvárásaira, és három
mind-mind a vizuális kommunikációt tá-
olyan nagy területet választottam, amely-
mogatják, akár tudatosan tesszük, akár
re nagy hatással van a tipográfia.
csak zsigeri döntések alapján.
Az első fejezetben a klasszikus tipográfiai alapokat veszem górcső alá, amelyek ál-
Kell-e könyvet írni magyar nyelven a ti-
talános értelemben vehetők figyelembe,
pográfiáról? Létezik „A” nagybetűs tipo
és amelyek, akár digitális, akár klasszikus
könyv, Virágvölgyi Péter A tipográfia
felületekről beszélünk, érvényesek.
8
A második fejezetben a digitális világ ki-
és ennek milyen szabályszerűségei vannak.
hívásai kerülnek előtérbe, megnézzük azt,
A negyedik fejezet nyomdászkifejezéssel
hogy melyek az egyes területek speciális
élve a „kis színes” rész, ahol több kisebb
igényei, mik azok a szabályszerűségek,
témát járok körül, amelyek hasznosak le-
amelyek érvényesek a digitális térben, a
hetnek minden tervező számára.
pixeles kijelzőkön.
Jó tipót mindenkinek!
A harmadik fejezet a brandguide egyik közkedvelt témájával, a brandinggel fog-
Serfőző Péter
lalkozik, hogy a tipográfia miként tud
Brandstratéga, tipográfus, CEO, zwoelf
szervesen részt vállalni a brandingfolya-
digital és a brandguide.hu alapítója
matokban, hogyan válhat főszereplővé,
9
BETŰ
SZÓ
MONDAT
BEKEZDÉS
WEB/OLDAL
44
01
A tipográfia fordított piramisa Az is szép a tipográfiában, hogy az egész
a mondat, a mondatokból a bekezdések,
tipográfiai rendszer szépen felépíthető lé-
majd az oldalak és a különböző layoutok.
pésről lépésre. Átgondolva az egyes szin- A tipográfiai leltár tehát maga egy pirateket tudunk eljutni a következő megol-
mis.
dandó „problémára”. Ahhoz viszont, hogy
A piramissal való párhuzam azért is ér-
jó döntéseket tudjunk hozni, egyrészt tud-
dekes, mert a piramisok máig misztikus
nunk kell, hogy miből dolgozhatunk, tehát
épületek, a mai napig csodálatra mél-
kell egy elemleltárt tartani, majd alapo-
tó építményei az emberiségnek. Tudjuk,
san meg kell ismernünk az egyes lépések
hogy miként épültek, mégis nehéz elhin-
természetét, törvényeit. Ráadásul ezek a
ni, hogy több ezer évvel ezelőtt már ilyen
tipográfiai döntések oda-vissza hatnak,
teljesítményre volt képes az emberiség.
tehát nem lehetünk biztosak, hogy a ter- A tipográfia és a nyomtatott írás ugyan vezés menete teljesen lineáris lesz. Sőt!
sokkal fiatalabb, mégis érzek itt egyfaj-
A tipográfiai tervezésben hasznos a próba
ta misztikumot, hogy értjük a részleteket,
» vizsgálat » módosítás metódusa, amellyel
értjük a részletek hatását az egészre, de
iteratív módon tudunk egyre jobb megol-
amikor elkészül egy tipográfiai mű, akkor
dásokhoz jutni.
nagyon nehéz felfogni, hogy a számos
Kurzusaimon általában ezt az egymásra
tervezői döntés és részlet miként adja ki
épülést egy piramisként szoktam ábrázol-
a végleges esztétikus tipográfiai és vizuá-
ni, amelynek a csúcsán a betűt látjuk, majd
lis összhatást.
ahogy megyünk lefelé, úgy szélesedik ki
Visszatérve a tipo-piramisra. Az egész
a forma és alakul ki a szó, a szavakból
piramis csúcsa a betű, a betű az ékköve 45
a tipográfiának, vagy úgy is elképzelhet-
szintjeinek tulajdonságait és egymásra
jük, mint a cseresznyét a torta tetején.
ható erőit, akkor tulajdonképpen nagyon
A betű mérete, formavilága, grafikai rész-
közel kerülünk ahhoz, hogy megismerjük
letei már nagyban meghatározzák a teljes
a tipográfia belső törvényeit, így képe-
tipográfiai végeredményt. Ezért is fontos
sek leszünk alkalmazni, vagy ha céljaink
például a betűválasztás, hiszen ha már ott
azt kívánják, akkor megszegni őket. Hát
bizonytalanságot tapasztalunk, akkor az
nem izgalmas? Induljunk el, és a követke-
kihat az egész rendszerre, jelen esetben
ző fejezetben kezdjük el felfedezni ezeket
a piramis stabilitására, felépítésére.
a törvényeket!
A piramis egyébként azért egy picit furcsa megközelítésnek tűnhet, mert hogyan lehet valamire építeni, ami a csúcson, az ékkő helyén van a struktúrában, mégis kvázi ez mindennek az alapja? Nekem
x magasság
pont ez a kettősség tetszik a piramissal való párhuzamban, hogy a csúcson van, mégis arra épül az egész. Lehet, hogy fordított, a csúcsán álló piramist kellene inkább rajzolni? Nem tudom, de az biztos, hogy csak a betűkkel önmagukban nem megyünk sokra,
alapvonal
hiszen a kommunikációban fontos, hogy legalább szavakat formáljunk a betűkből. Itt egyből lehetőségünk van a betűtávolságok és a szóközök meghatározására, ezzel tovább formálva a tipográfiai rendszerünket. Ha több szót is egymás mellé teszünk, akkor kialakulnak a mondatok, amelyek sorokba rendeződnek, és a rendelkezésre álló hely és az olvashatósági szempontok függvényében sortörések révén létrejön a szövegtörzs vagy a szöveghasáb/ok. Szövegtörzs esetén már beszélhetünk sorhosszról, sortávolságról, amelyek meghatározása ugyancsak a tervező feladata. Innen már csak egy lépés, hogy oldalakat, és azon belül layoutokat hozzunk létre, amelyekbe ezek a szöveges tartalmak jól illeszkedni tudnak és egy egységes rendszert hoznak létre. Ha alaposan megismerjük a piramis egyes 46
belső tér
01
Betűanatómia Az alábbi ábrán látható néhány meghatározó jellemzője a betűknek.
felnyúló szár
törzsméret
bet?szem
talp
kontraszt
lenyúló szár
betűtáv
szótáv
Szöveganatómia A sematizált ábrán jól látszik, hogy melyek azok a paraméterek, amelyeket meghatározhatunk a tipográfiai terveinkben.
s r ssz
s rmagasság margók
47
Gutter, csatorna
Margó
Grafikai elem Itt láthatod a könyvet felépítő layout mögött működő gridrendszert. Ezek azok a segédvonalak, amelyek kordában tartják a tartalmat, hogy a könyvet felépítő szerkezet egységes legyen.
Hasáb vagy oszlop
74
02
Grid: a láthatatlan összetevő Tudod, miből látszik, ha egy designer nem
tó gondolatok és tervek, amelyek trende-
elég képzett és tudatos? Többek között
ket indítanak el.
abból, hogy nem használ grideket. Webdesignban ez előbb kiderül, mert ott még
Egy kis gridtörténet
nagyobb fegyelemre van szükség, mint a
Sokan azt gondolják, hogy a grideket
klasszikus grafikai tervezésben: a print-
a reszponzív webdesign keltette életre,
anyagokon sokszor el lehet sunnyogni
de ez nem igaz, hiszen már a modernista
a háttérben dolgozó láthatatlan rend-
grafikusok és tipográfusok is előszeretet-
szert. Persze ott sem érdemes!
tel alkalmazták, gondoljunk csak a gridek
A modulhálók a tervezőgrafika sziloplaszt-
egyik mesterére, Josef-Müller Brockmann-
jai, azok a láthatatlan építőelemek, ame-
ra, aki többek között a zseniálisan meg-
lyek összetartják a designelemeket, vagy
komponált plakátjaival vonult a halhatat-
éppen tudatosan széttartják őket. Az
lan grafikusok képzeletbeli csarnokába.
egyik első tervezőgrafikai témájú könyv,
Viszont a technológiai fejlődés hozta ma-
amit vettem a „Making and Breaking the
gával a gridek iránti fokozódó igényt is,
Grid” című volt, amely két dologra muta-
hiszen már a manuális módszerektől egy-
tott rá: egyrészt, hogy miként alkalmazd a
re inkább a gépi tervezés és reprodukció
gridrendszereket a tervezésben, másrészt
irányába való fejlődés igényli ezeket a
arra, hogy ha megtanultad és tudtad al-
rendet teremtő rácsokat.
kalmazni, hogy miként működik, akkor már
Ezek a vonalak és rácsok a tervezés alapját
jogosult vagy arra, hogy elhagyd a klasszi-
támogatják, annak ellenére, hogy látha-
kus iskolát, változtass rajta, vagy akár ne is
tatlanok. Ezek azok a láthatatlan, layoutot
használj modulhálókat. Ez igazából aztán
összetartó erők, amelyek képesek rendet
mindenre igaz lett a szakmában: ahhoz,
vinni a tervekbe. Milyen érdekes, hogy ter-
hogy áthágd a szabályokat, ismerni kell
vezéskor a tervezőszoftver interface-én
őket. Így jönnek létre az igazán formabon-
megjelennek ezek az általában látha75
tatlan elemek. Amikor a tervező kijelöli a segédvonalakat, amelyek a gridet képezik, akkor látja őket, használja őket, és talán néha picit zavaróak is, hiszen sokkal terheltebbé teszik a vizuális képet, az összképet (lásd az előző mintaoldalt is). Aztán egy gyors billentyűkombinációval eltünteti, és csak a rendezett tartalom jelenik meg önmagában: vizsgázik a rendszer, hogy a láthatatlan összetartó erő jól működik-e, létrehozza-e a kívánt rendet, hierarchiát, layoutot és vizuális összhatást. Mégis, talán a webdesign területén kapta
Befoglaló rács
az utóbbi időben a legnagyobb hangsúlyt: itt fonódik össze a technikai elvárás leginkább a klasszikus módszerekkel. A fejlesztésben használt frontend keretrendszerek, amilyen például a Bootstrap, előre definiált reszponzív gridrendszerrel szolgálják ki az állandóan változó digitális médiumon való megjelenés okozta kihívásokat. A gyors és hatékony fejlesztés érdekében pedig jó, ha ismerjük ezen keretrendszerek paramétereit és működési elveit. Persze lehet egyedi működést is fejleszteni, csak erőforrás és végeredményben pénz kérdése. A gridek típusai
Oszlopos rács
Nézzük meg, hogy milyen típusait különböztethetjük meg a grideknek. Az első és legegyszerűbb változat a befoglaló rács, ahol az adott felületen csak a margókat rögzítjük, és a margókon belül tulajdonképpen utána azt csinálunk, amit akarunk. Ilyen a klasszikus oldalszerkesztési arányrendszer is, amelyet még a kézzel írott könyveknél vagy a korai nyomtatványoknál használtak. Az így kialakított írástükör az aranymetszés arányainak megfelelő, szép felületet alakít ki. A következő típus az oszlopos rács, amely76
Moduláris rács
OSZLOP
OSZLOP
SOREGYEN
02
CSATORNA
CSATORNA
OSZLOP
Címsor
Ez is valami
Meg a másik
Sem pénz, sem ígéret meg nem tántorít. A vár feladásáról sem szót nem ejtek, sem szót nem hallgatok. Magamat élve sem a váron belül, sem a váron kívül meg nem adom.
Sem pénz, sem ígéret meg nem tántorít. A vár feladásáról sem szót nem ejtek, sem szót nem hallgatok. Magamat élve sem a váron belül, sem a váron kívül meg nem adom.
Sem pénz, sem ígéret meg nem tántorít. A vár feladásáról sem szót nem ejtek, sem szót nem hallgatok. Magamat élve sem a váron belül, sem a váron kívül meg nem adom.
Érdemes észrevenni, hogy ez egy „webes” soregyen. Onnan derül ki, hogy a betűk nem az alapvonalon ülnek, hanem a sormagasság közepén. HTML CSS rendszerekben így kell figyelembe venni a tipográfiai paramétereket.
ben a rendelkezésre álló felületet sávokra
az is előfordul, hogy nincs szükség oszlop-
osztjuk. Ezek a sávok fogják a befogla-
alapú vagy moduláris rácsokra, hanem
ló tartalmi elemeket magukban foglalni,
speciális, hierarchikus rácsokat alakítunk
ezekhez fognak igazodni, illetve ezek ga-
ki, amelyek speciálisan kialakított boxok a
rantálják a belső rendet a layouton. Ezt
tartalomhoz.
egyszerűbb printanyagoknál, könyveknél is szokták alkalmazni. A moduláris háló
A 8-as és 12-es számok bűvöletében
a legkomplexebb, itt az oszlopok és so- A grid, ahogy láttuk, nem más, mint látharok is meghatározásra kerülnek, sőt, az
tatlan segédvonalak rendszere.
egyes osztások közötti távolságokat és
szer vízszintes és függőleges vonalak
eltartásokat is tartalmazza a hálórend-
összességéből áll. A függőleges segédvo-
szer. Ilyen modulhálókat a webdesignban
nalak a legtöbb esetben oszlopokat ha-
A rend-
és komplexebb printanyagoknál, például
tároznak meg, amely oszlopok sorozata
magazinok vagy kiadványok layoutjainak
adja ki a gridhálót. A UI-designban, vagy
felépítésére szoktak tervezni. Igen, tervez-
ahogy régen hívtuk, a webdesignban, na-
ni, hiszen a gridek sem úgy a semmiből
gyon gyakori és praktikus megoldás, hogy
jönnek létre, hanem a tervezőknek ma- 12 darab egymás mellett futó oszloppal guknak kell őket kialakítaniuk. Figyelembe
dolgozunk. Azért hasznos a 12-t használ-
kell venni a médiumot, amire tervezünk és
ni, mert viszonylag sok osztója van: tudjuk
a tartalmat, amelyet át kell adnunk, így le- 2-vel, 3-mal, 4-gyel, 6-tal is osztani, ami het kialakítani a megfelelő belső rendszert,
azért praktikus, mert sokszínűen lehet ala-
gridet.
kítani a layoutot.
Ezekben a komplex rendszerekben sokszor
Az oszlopok körül van a gutter, ami a csa77