Serfőző Péter - Tipográfia – a vizuális kommunikáció alapja - könyv minta - brandguide by brandguide.me

„PUSZTÁN SZÁMÍTÓ ÉRTELEMMEL NEM LEHET SZÉP BETŰT TERVEZNI” Nagy Zoltán

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.

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é,

BETŰ

SZÓ

MONDAT

BEKEZDÉS

WEB/OLDAL

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

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

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

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

SOREGYEN

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.

É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