A tipográfia alapjai: betűtípusok, fogalmak

A tipográfia kifejezés alatt a nyomtatott betűk és azokat tartalmazó szövegek vizuális megalkotását, rendezését, tervezését és a felsoroltakkal foglalkozó szakmai területet értjük.

A 15. század közepén Gutenberg forradalmasította a nyomtatást, aminek köszönhetően meghatározó része lett a vizuális kommunikációnak a tipográfiai tervezés. Több száz év alatt rengeteg változáson és fejlődésen ment keresztül, azonban hivatása továbbra is ugyanaz: esztétikus, de célszerű írásképet alkotni.

Művészeti ágnak számít, azonban alapjaiban tudományos kutatásokra támaszkodik. Tipográfiai tervezés során nem szabad csak a szépérzékre hagyatkozni, hanem fontos része az elemzések, tapasztalat és ismereteink alapján meghozott szakmai döntések is.

Grafikusoknak, webdesignerek és fejlesztőknek nélkülözhetetlen a terület ismerete a minőségi projektek alkotásához. Alapjai ismerete azonban mindenkinek hasznos lehet, különösen a digitális világban tevékenykedő szakembereknek, például a marketing vagy tartalomgyártás területén is.

Kortárs tipográfia

Elkerülhetetlen, hogy ne találkozzunk nap mint nap a tipográfia elveit felhasználó vizuális anyagokkal. Legyen az plakát, újság, reklámtábla, weboldal, okostelefon app: mindegyik alkalmaz valamilyen tipográfiai szempontot és szabályt.

A területen, ahogy a legtöbb vizuális szakmában, folyamatosan új trendekkel és elvárásokkal találkozhatunk, így nem mindegy, hogy mennyire naprakész a tudásunk.

Évtizedekkel ezelőtt, kritikus változást hozott mind a hétköznapjainkban, mind a tipográfia világában a digitális eszközök megjelenése. Új lehetőségeket, elvárásokat, szabályokat és feladatokat jelentett a területen.

Kortárs tipográfiai tervezés során nem elég egy szempontnak megfelelni, több perspektívából kell megközelíteni az adott feladatot.

Weboldal tervezés során triviális kérdésnek tűnhet a betűméret megadása, azonban már ennél a döntéshozatalnál is több szempontot érdemes átgondolni:

Először is figyelembe kell venni, hogy weben pt (points) helyett px (pixel) mértékegység használata ajánlott az abszolút mértékegységek közül.

Az átlagos betűméret törzsszöveg esetén így 16px, ami a 12pt megfelelője.

Ugyanakkor, ha szeretnénk, hogy mindenkinek problémamentesen olvashatók legyenek a szövegek, érdemes relatív mértékegységet használni a px helyett. Betűméret megadása során erre alkalmas a rem (Relative to font-size of the root element), ami a böngésző beállításai alapján jeleníti meg a weboldalon a betűméretet.

A megadott alapértelmezett méret a böngészőkben általában véve 16px, tehát így:
1rem = 16px

Azonban, ha a felhasználó átállította a böngésző alap betűméretét 20px-re, akkor neki a böngésző az 1 rem méretű törzsszöveget 20px méretben jelenik meg. Ez romlott látású személyeknek lehet hasznos, akik nehezebben tudják elolvasni az átlagos vagy kisebb méretű szövegeket.

Címek esetén a reszponzivitásra is ügyelni kell méretek megadása során.

A képernyő jelentős részét elfoglaló főcím látványban megragadó lehet egy széles asztali monitoron, azonban mobil eszközön, ugyanazzal a mérettel megadva könnyen szétcsúszhat vagy kilóghat vízszintesen.

Ahhoz, hogy ezt elkerüld, először is mindenképp érdemes több eszközön tesztelni a tervet.

Ezt a hibát viszont megtudod előzni azzal, hogy több betűméretet adsz meg eszköztől függően. Például:

• Asztali gépen a főcím: 3.75 rem (60px)
• Tableten: 3 rem (48px)
• Mobilon: 2 rem (32px)

Betűtípus: a tipográfia alappillére

A tipográfia terület egyik legfontosabb és legismertebb eleme a betűtípus. Gyakran találkozhatsz angol megnevezéseivel is: font vagy typeface.

A betűtípus (typeface) a szimbólumok, karakterek vizuális megjelenésért felelős. Szabályrendszerként is értelmezhetjük, amelynek célja a betűket, számokat és egyéb jeleket vizuálisan egységesíteni.

A font kifejezést, eredeti jelentésében, kizárólag a betűtípus bizonyos változatára alkalmazták, például az “Arial” typeface, az “Arial Bold” (félkövér változat) viszont font.

Továbbá a különböző betűméretek esetén is ezt a kifejezést használták, így a Times New Roman 12pt és a Times New Roman 16pt technikailag 2 külön fontnak számított.

Manapság ez a köznyelvben összemosódott (az írógépek korában volt nagyobb jelentősége, amikor a betűvastagságok és méretek cseréje jóval körülményesebb feladat volt), így gyakran találkozhatunk a font kifejezéssel akkor is, ha az adott betűtípus több vastagsággal, változattal rendelkezik.

A betűtípus választás már a digitális kor előtt a tipográfiai tervezés része volt, azonban a személyi számítógépek megjelenésének hála megszámlálhatatlan mennyiségű opció közül válogathatunk.

Betűtípusokat számtalan módon csoportosíthatunk, de a két leggyakoribb kategória a talpas (serif) és talpatlan (sans-serif).

Egyéb népszerű csoportosítások, amiket érdemes ismerni laikusoknak is:

• írott (script)
• groteszk
• display
• monospace
• slab

Serif (talpas) és Sans-serif (talpatlan) betűtípusok: mi a különbség?

A talpas betűkön kiegészítő grafikai elemek, úgynevezett betűtalpak találhatók, amíg a talpatlan betűk ezekkel nem rendelkeznek. Általánosságban kijelenthető, hogy a talpatlan (azaz sans-serif) betűtípusok korszerűbbek, letisztultabbak megjelenésükben.

A talpas, azaz serif betűtípusok eredeti népszerűségükből jelentősen vesztettek, elsősorban könyvekben, nyomtatásban találkozhatunk velük. Modern megjelenésük révén a 20. század második felében a sans-serif betűtípusok váltották fel ezeket, elsősorban a digitális eszközökön.

Természetesen ezek a trendek nincsenek kőbe vésve, online felületeken is találkozhatunk kreatív, talpas betűkkel alkotott írásképpel.

Népszerű talpatlan betűtípusok:

• Helvetica
• Arial
• Calibri
• Futura
• Gotham

Manapság is népszerű talpas betűtípusok:

• Times New Roman
• Garamond
• Georgia
• Baskerville
• Bookman

Fizetős és ingyenes betűtípusok

Nem minden betűtípus használható fel ingyenesen tervezés során. A felsoroltak közül az Arial és Calibri ingyenesen elérhető Microsoft Windows felhasználóknak. A Helvetica, Futura és Gotham azonban nem, ezek prémium betűtípusnak számítanak. A betűképek megtervezése rengeteg időt, szakmai tudást és energiát vesz igénybe, így mint komoly szellemi termék, jelentős értékkel rendelkezik egy-egy betűtípus.

Szerencsére, ha nincs büdzsénk font licensz vásárlásra, akkor is rengeteg lehetőség közül válogathatunk tervezés során, legyen szó akár cégarculatról vagy egy hétköznapi dokumentumról. A Microsoft Windows alap betűtípusait bármely felhasználó alkalmazhatja ingyen, azonban mi azt javasoljuk, hogy érdemes izgalmasabb opciók közül is válogatni, ebben az alábbi oldalak lehetnek segítségünkre:

• Google Fonts
• FontSquirrel
• FontSpace

Amennyiben fontos, hogy cégünket vagy személyünket egy prémium font képviselje (amire a versenytársak se csaptak még le), akkor betűtípus licenszelő webáruházak vagy fonttervező stúdiók munkái közül válogathatunk. Például:

• PangramPangram
• Fontshop
• MyFonts

Adobe előfizetőknek pedig elérhető az Adobe Fonts, mely az Adobe szoftverekkel (Photoshop, Illustrator) már a tervezés során biztosít prémium betűtípusokat is extra költség nélkül, továbbá akár weboldalon is használhatók API kapcsolaton keresztül.

Betűkészlet: a karakterek össztömege

A betűkészlet tartalmazza a betűtípusban megtalálható karaktereket: betűket, számokat és jeleket. Egy betűtípus se tartalmazza az összes létező karaktert egyszerre. Ennek az egyszerű oka az, hogy a világ összes nyelvét összeadva szinte megszámlálhatatlan mennyiségű karaktert kapunk.

Kötelező ellenőrizni, hogy az általunk kiválasztott betűtípusban megtalálható-e minden számunkra szükséges karakter!

Tipográfia hiba a magyar betűkészletben

Magyar nyelvű szövegek esetén olyan betűtípust kell választani, amely tartalmazza az ő és ű betű karakterét is. A kettős éles ékezetet (nemzetközi megnevezése: hungarumlaut) kizárólag a magyar nyelv alkalmazza latin írásmódban, így gyakori, hogy (nem magyar tervező által alkotott) egyedi betűtípus nem tartalmazza. Amennyiben a szoftver nem találja a betűtípusban az adott karaktert, akkor helyettesíti egy másik betűtípussal vagy nem jelenik meg a betű. Ez rombolja a vizuális összhangot és az amatőrség érzetét kelti.

Az ilyen hibák elkerülése érdekében, vizuálisan magas minőséget igénylő szövegképek megalkotása előtt (pl. cégarculat tervezése során), érdemes grafikusra vagy a tipográfiában jártas szakemberre bízni a betűtípus kiválasztását.

A betűválasztás mágiája

A betűtípus választás vagy rövidebben betűválasztás, minden projekt esetén alaposan átgondolt döntésnek kell lennie.

Amennyiben egy új márka vagy website létrehozásába vágod a fejszédet, a betűtípus legyen az egyik első design-beli kérdés, amire a figyelmedet fordítod. Hiszen, ha egyszer már választottál, jó ideig azzal a döntéssel kell dolgoznod a továbbiakban.

Az alábbi szempontok segíthetnek a választásban:

• Elegáns, elhivatott, játékos, letisztult, experimentális stb. milyen stílusban keresel betűtípust?
  • A piaci területtől jelentősen függ, hogy milyen stílusú betűtípus képviseli legjobban a márkát.
• Elég egy betűtípust, vagy több opcióra is szükséged van?
  • Nem minden betűtípus működik egymással vizuálisan, a font párosítás során figyelj a harmóniára.
• Könnyen olvasható a választott betűtípus?
  • Amennyiben a válasz nem, akkor mindenképp érdemes választani egy párt hozzá, amely a törzzszövegeknél használható.
• A kiválasztott betűtípus rendelkezik minden szükséges karakterrel? (ellenőrizd a hungarumlaut meglétét!)
• Mekkora költséggel számolhatsz?
  • Bizonyos fizetős betűtípusok esetén külön kell fizetned weboldalon vagy marketing anyagokban való felhasználáshoz, ellenőrizd a licenszet!

Tipográfiai szabályok, fogalmak

A betűtípus természetesen csak a jéghegy csúcsa. Betűválasztás után nem áll meg a tervezési folyamat. A komplex döntések meghozásához tisztában kell lenni az általános fogalmakkal és a kiemelt irányelvekkel.

A legfontosabb tipográfiai szabályok, szempontok

Olvashatóság

A szöveg olvashatósága alatt azt értjük, hogy olvasás közben mennyire könnyen és gyorsan tudjuk felfogni annak a tartalmát. Olvasás során (európai eredetű nyelvekben kifejezetten) nem betűnként, írásjelenként értelmezzük a szöveget, hanem ezeket egy pillanat alatt összeadva, szavakként fogjuk fel.

Rossz olvashatóság alatt azt értjük, ha az adott szöveg esetén a megszokottnál több időre van szükség az elolvasásához egy átlagembernek.

Szimpla információ közlés esetén ez jelentős hiba, de egy kreatív felirat alkalmazásánál elfogadható, amennyiben az egyedi megjelenés a fontosabb cél.

Helyesírás

A szöveg tartalmára különösen oda kell figyelni. Az egyik legnagyobb buktató, ha folyamatosan helyesírási hibákkal találkozik az olvasó.

Helyesírás ellenőrző funkció majdnem minden dokumentum szerkesztőben megtalálható, anélkül ne írj szöveget!

Jelentősebb szövegek publikálása előtt pedig érdemes mindenképp legalább egy második személyt megkérni lektorálására. Több szem többet lát.

Szövegértés

A szövegértésben elsősorban a tartalom számít. Azonban a hierarchia, formázás és a megfelelő tagolás is sokat segíthet a gyorsabb értelmezésben.

Építsd fel átláthatóan a szövegedet! Érdemes először átgondolni, hogy miről szeretnél írni, és vázlat alapján megalkotni a szöveget.

Esztétika

Szövegek terén a tartalom az elsődleges, ugyanakkor nem csak a belső, hanem a külső is számít. Törekedni kell arra, hogy minden publikált szöveg esztétikus legyen, így gyakran az átlagosnál is több időt és energiát érdemes fordítani erre a célra.

Például egy magazinban értelemszerűen nem egy Word dokumentumból behúzott, tördelés nélküli szöveget vár el az olvasó, hanem egy szakmailag helyesen elrendezett, formázott és kreatív megjelenést.

Tipográfiai fogalmak

Szövegszerkesztés és szövegtördelés

Szövegszerkesztésnek nevezzük azt, amikor a szöveg tartalmát és megjelenését formáljuk. Hosszabb szövegek, pl. könyvek, magazinok esetében a szövegtördelés is része a tervezésnek, ami a szöveghasábok belső elrendezésének módosítását jelenti. Tehát az elválasztójelek, sorvégek, térközök, bekezdések esztétikai módosítása történik.

Tipp: Szövegtördelés nélkül nem ajánlott sorkizárt szöveget használni, túl nagy vagy túl kicsi térközök keletkeznek. Esztétikailag és olvashatóság szempontjából is hátrányos a tördelés nélküli sorkizárt szöveg.

Egalizálás

Az egalizálás (angolul: kerning) a betűk közötti távolság tudatos megszabását jelenti.

Nem ajánlott, hogy a betűk túl közel vagy túl távol legyenek egymástól, továbbá a távolságoknak összhangban kell lenniük. Amennyiben ez nem valósul meg, rontja az olvashatóságot. Hétköznapi dokumentumok során a betűtípus alap távolságai is tökéletes lehet, nem szükséges kísérletezni a módosításával.

Könyvtervezés, magazinszerkesztés, logók, reklámanyagok esetében viszont ez is fontos része lehet a tervezésnek, ezért ez a feladat a grafikusra vagy tördelőre hárul.

Ligatúra

A ligatúra két vagy több karakter vizuális összekötését jelenti, amellyel egy új összetett karakter születik.

Használata gyakoribb, mint, amire valószínűleg elsőre gondolnál, kisebb betűméretű szövegek esetén nem feltétlenül figyeli meg ezt az olvasó.

A leggyakoribb betűkapcsolat az fi pár.

A szöveg megjelenítéséhez felhasznált betűtípustól függ, hogy mely karakter kapcsolódásoknál és számszerint hány ligatúra található meg.

Monogram és tipográfiai logók esetében közkedvelt a ligatúrák használata, kreatív megoldásokra ad lehetőséget.

Iniciálé

A szöveg első betűjének vizuális kiemelését jelenti.

Az iniciálé már a tipográfiát is megelőzte évszázadokkal, a kalligráfia területén született.

Elsősorban a történelemből lehet ismerős, kódexekben alkalmazták előszeretettel. Napjainkban gyakran magazinokban találkozhatunk vele.

Gyors tippek tipográfiai tervezéshez

Tervezz kontrasztosan

Online vizuális anyagokban kiemelkedő szempont, hogy a lehető leggyorsabban és legtömörebben közöljünk információt a befogadó felé, anélkül, hogy bármi fontos elveszne belőle.

Ügyelj az egalizálásra

Bizonyos projektek, feladatok során a hibátlan egalizálás is jelentős figyelmet kell kapjon. Ilyen pl. a logótervezés: mivel több száz, ezer vagy akár millió személy találkozhat a véglegesített logóval, így fontos, hogy szakmailag hibátlanul készüljön el.

A gyárilag megadott betűtípus egalizáláson gyakran javíthatunk manuálisan, ha tökéletes végeredményt szeretnénk kapni.

Tipp: Az Adobe szoftverekben a betűk egalizálásához bekapcsolható az “Optical” mód, amivel a szoftver újrarendezi automatikusan a távolságokat, gyakran egy gombnyomásra jobb eredményt ad, mint ami előtte volt. Azonban ez se jelent mindig tökéletes megoldást, érdemes ellenőrizni a végeredményt.

Használj experimentális betűtípusokat

A Helvetica, Garamond, Bebas és társai mind-mind kiválóan megtervezett betűtípus, azonban rengeteg üzlet, vállalat vizuális kommunikációjában találkozhatunk velük. Így ha fontos, hogy logóddal, márkáddal és kreatív anyagaiddal kitűnj a piacról, ne a legóvatosabb döntést hozd meg betűtípus választásnál!

Ismerd a trendeket

Az aktuális trendeket nem kell beépíteni minden projektbe, de mindenképp érdemes tisztába lenni velük a szakma művelőinek!

Variable fonts

A Google Fonts oldalán, de általánosságban az interneten egyre gyakrabban találkozhatunk “variable fonts” jelölésű betűtípusokkal. Ezek egyszerre ötvöznek több vastagságot és stílust egy betűtípuson belül. A “Regular” vagy “Bold” változat kiválasztása helyett értéket tudunk megadni, ami a két véglet között helyezkedik el.

Kifejezetten hasznosak lehetnek, ha teljesen szabad kezet akarunk kapni a vastagságok beállítása során.

A Google Fonts oldalán elérhető variable betűtípusok: https://fonts.google.com/variablefonts

3D betűk

A 3D megjelenés időről időre újra trendbe kerül. Az utóbbi években rengeteg új funkció érkezett a grafikai szoftverekben, ami meglehetősen egyszerűbbé tette a 3D alkalmazását tipográfiában is. Ebből adódóan egyre gyakrabban találkozhatunk 3D betűkkel közösségi média posztokban, weboldalakon, marketing anyagokban.

Kinetic tipográfia

A kinetikus tipográfia (angolul: kinetic typography) alatt az animált tipográfiát értjük, amelyet a motion design területén egyre gyakrabban alkalmaznak.

Hatásos megoldás lehet reklámfilmekben, videó hirdetésekben vagy akár weben is.

AI generált betűk

Az “AI forradalom” betört a tipográfia területére is, egyelőre kísérleti eszközökkel találkozhatunk, mint az Adobe Firefly betűkép generálója, amely segítségével kulcsszavak segítségével generálhatunk különböző megjelenésű betűket.

Bővebben a tipográfiáról

A cikk kisebb összefoglalója a tipográfia azon részeinek, amit a laikusoknak is érdemes ismernie. Grafikusoknak, a grafikai iparág szakértőinek, UI/UX designereknek és szövegtördelőknek viszont érdemes mélyebben is utána néznie a témának.

Összegyűjtöttünk pár angol nyelvű cikket, amelyek elolvasásával mélyebben is megismerhető a tipográfia területe:

• https://fonts.google.com/knowledge/glossary/family_or_type_family_or_font_family
• https://m2.material.io/design/typography/understanding-typography.html
• https://www.brainpickings.org/2011/08/01/10-essential-books-on-typography/
• https://www.editorx.com/shaping-design/article/typefaces-vs-fonts
• https://www.nineblaess.de/blog/improve-your-typography-skills/
• https://alltimedesign.com/typography-trends/
• https://www.lifehack.org/428846/top-20-most-popular-fonts-of-all-time

Szerző: Fucsku Dávid, design team lead