Ha van a webdesignnak fontos területe, akkor az a tipográfia. Az igazság ugyanis az, hogy az internet 95 százaléka nem más – nem videó, nem kép és nem hang -, mint írott szöveg.
A tipográfia lényege pedig az írott szöveg formázása. Nem csak arról van szó, hogy a szövegek esztétikusak, szépek legyenek. Sokkal fontosabb a könnyű olvashatóság – elvégre a szövegek funkciója, hogy el tudjuk olvasni őket.
A jó webtipográfia alapja a megfelelő betűtípusok (fontok) kiválasztása. Ha érdekel a honlapkészítés, mindenképp érdemes némi időt szentelni a témának. Igyekszem ehhez egy kis segítséget adni ebben a cikkben.
Betűtípusok az interneten: alapok
Rengeteg különféle internetes betűtípus (webfont) létezik. A két legnépszerűbb portál, ahol betűtípusokat próbálhatsz ki, kombinálhatsz és tölthetsz le, az ingyenes Google Fonts és a fizetős Adobe Fonts.
Egyes betűtípusok a nagyobb méretű címekhez illenek, másokat inkább a hosszabb törzsszöveghez érdemes használni.
Minden betűtípusnak egyedi stílusai, méretei és vastagsága (súlya) van. A különböző betűtípusok „magassága” eltérő lehet: hiába állítunk be azonos méretet két különböző betűtípusnál, egymás mellé rakva legtöbbször még mindig lesz különbség. Ezért van az, hogy egyes betűtípusokat már 16 pixeles (px) méretnél is kényelmes olvasni, másokat pedig 20 px-re, vagy még nagyobbra kell méretezni. Az ideális betűméret a törzsszövegnél legtöbbször valahol 16 és 24 px között van.
Bár minden betűtípus teljesen egyedi, de bizonyos tulajdonságok alapján kategóriákba szokás sorolni őket. A legnépszerűbb online betűtípus kategóriák közé a talpas (Serif), talpatlan (Sans Serif), valamint a lineáris talpas (Slab Serif) betűtípusok tartoznak. De léteznek még ezen kívül úgynevezett dekoratív és kézírás jellegű betűtípusok is.
- A talpas betűtípusok (például Georgia, Droid Serif, Merriwheather, Times New Roman, PT Serif) nagyon jól olvashatóak nyomtatott szövegként, ezért hagyományosan népszerűek a könyvek, újságok és magazinok esetében. Sok köztük az elegáns és ízléses betűtípus, amely ideális lehet a törzsövegekhez és címekhez is.
- A talpatlan betűtípusokat (például Arial, Montserrat, Helvetica, Open Sans, Droid Sans, Museo Sans, Lato) kisebb méretben is kényelmes olvasni, ezért az interneten leggyakrabban ilyet használnak a hosszabb törzsszövegekhez. Modern és egyszerű, letisztult megjelenést kölcsönöznek a szövegnek.
- A lineáris talpas betűtípusok (például Arvo, Rockwell, Roboto Slab, Museo Slab) szögletességük miatt ízléses és egyedi megjelenést adnak, de ugyanezért nehezen olvashatóak kisebb méretben. Inkább címsorok esetében lehet jó választás egy ilyen betűtípus.
Hogyan válassz betűtípust a weboldaladra?
Kezdjük egy ökölszabállyal:
kettőnél több különböző betűtípust nem érdemes választani egyetlen weboldalra sem. Sok esetben még kettőre sincs szükség, meg lehet oldani egy honlap designját egyetlen betűtípus több változatának használatával is.
Például ha a címekhez Open Sans-t választunk, a törzsszövegekhez pedig ugyanennek a betűtípusnak a „sűrített” változatát, a Open Sans Condensed-t.
A megfelelő betűtípusok kiválasztása és párosítása azonban még ezzel a megkötéssel sem igazán könnyű feladat, hiszen még így irdatlanul sok lehetőség marad.
A legjobb tanács, ami adható, hogy törekedj az egyszerűségre. Rengeteg nagyon különleges és szép betűtípus létezik, de általában minél egzotikusabb egy font, annál nehezebben olvasható.
Az egyszerűség gyönyörködtet. Igaz ez a webdesignra is.
Legelőször érdemes a törzsszövegekhez használt betűfontot kiválasztani. A jó törzsszöveg tiszta, erőfeszítés nélkül olvasható, és nélkülöz minden olyan tulajdonságot, ami elvonná a figyelmet az olvasástól. Ezért a nagyobb szövegtestekhez mindenképpen egyszerű, letisztult formájú betűtípust kell találni.
Fontos, hogy a betűk vonalainak vastagsága között ne legyen nagy eltérés. De nagyon lényeges az is, hogy lehetőleg nagy legyen az X-magasság, vagyis a középvonal és a betűvonal közötti távolság. Ez a két tulajdonság együtt rendszerint a hosszú szövegek – például céges blogbejegyzések – esetén is könnyű olvashatóságot teremt.
Ha magyar nyelvű weboldalra keresel betűtípust, nagyon lényeges szempont az is, hogy az adott webfontnak legyen ékezetes karakterkészlete.
Nagyon jól megfelel ezeknek a követelményeknek például az Open Sans, a Lora, a PT Sans, a Raleway, a PT Serif, a Roboto, a Montserrat vagy Merriwheather betűtípus is.
A címek és alcímek betűtípusának kiválasztásakor sokkal nagyobb szabadságunk van. Ez azért van így, mert a címek általában nem túl hosszúak, és legtöbbször nagyobb a betűméret, mint a sima szöveg esetében. Mindez együtt segíti az olvashatóságot – akkor is, ha az adott betűtípus egyébként kisebb méretben nehezen követhető lenne.
A címsorok feladata elsősorban megragadni az emberek figyelmét, érzelmeket ébreszteni vagy átadni. Mivel a felhasználók legtöbbször csak a címeken futtatják végig a szemüket, fontos, hogy továbbolvasásra ösztönözzenek. Ezért a címekhez érdemes lehet különlegesebb, érdekesebb betűtípust választani. Azonban vigyázat: az, hogy egy font karakteres, nem egyenlő azzal, ha olvashatatlan!
És persze a legfontosabb: a címhez választott betűtípusnak passzolnia kell a szövegtestnél használt fonthoz.
Mi alapján kombináld a betűtípusokat?
Talán ez az a terület, ahol tapasztalat nélkül a legnehezebb dolgunk van. Szerencsére van egy biztonsági módszer, ami nagyon megkönnyíti a kezdők dolgát.
Válasszunk a címekhez és a sima szövegekhez is ugyanabból a betűtípus-családból fontot. Ez a legegyszerűbb technika, amivel ráadásul szinte nem is lehet mellélőni.
Ilyenkor a két betűtípus valószínűleg elég közös tulajdonsággal bír ahhoz, hogy harmonikus hatást keltsenek együtt. Sok betűtípus-családban vannak talpas, talpatlan vagy lineáris talpas fontok is. Például remek választás lehet a Source Serif a címekhez, míg az ugyanahhoz családhoz tartozó, de talpatlan Source Sans a törzsszöveghez.
Szintén hatékony megoldás, ha csak egyetlen betűtípust használunk, és csupán a betűméretekkel, vastagságokkal és stílusokkal (dőlt, félkövér, stb.) játsszunk.
Ha két különböző betűtípus-családból választunk fontpárt, érdemes arra törekedni, hogy a két betűtípus felépítése legyen hasonló. Az nem baj, ha más tulajdonságokban (például vastagság, légiesség) nem egyeznek, a különbözőségek és hasonlóságok egyensúlya szép végeredményt hozhat.
Hol találsz szuper betűtípus kombinációkat?
A legegyszerűbb, ha megnézed, milyen betűtípusokat, kombinációkat használnak a kedvenc weboldalaid.
Ha konyítasz egy kicsit a CSS-hez, akkor a honlapon jelölj ki némi szöveget, nyomj egy jobb gombot, és válaszd ki az Inspect (Vizsgálat) menüpontot (Chrome, de a többi böngészőben is van ilyen funkció). Oldalt meg fog jelenni a vizsgált honlap HTML és CSS kódja, utóbbiban könnyen megtalálhatod a használt betűtípusokat (font-family). Ugyaninnen minden más fontos tulajdonságot is megtudhatsz (és lemásolhatsz), például a betűméreteket, vastagságot, színt, stílust, stb.
Léteznek emellett képalapú ingyenes betűtípus felismerő alkalmazások is. A legismertebb a What The Font!. Hogy használd, először kell egy screenshotot készítened (alt+Print Screen) a vizsgált honlapról, a képet lementeni valamilyen képszerkesztő program (például Paint) segítségével, majd feltölteni a What The Font oldalára. Egy kis szerencsével meg fogja tudni mondani, milyen, pontosabban szerinte mihez hasonló betűtípust lát.
Az interneten rengeteg helyen találhatsz inspirációt a saját betűtípusaid kiválasztásához. A kedvencem a Typespiration.com, ahol nagyon szép, kész mintákat kapsz fontokkal és színkódokkal együtt. Gyönyörű szép designt és tipográfiát találsz a Reliable összeállításában. Sok jó ötletet lehet találni a FontPair, a Typewolf.com, az Easil, és a FontsInUse oldalán is, utóbbin rengeteg nem webes anyag is található. CSS kóddal együtt lehet jó webfont kombinációkkal ellesni a Typ.io portálon, valamint hasznos segítséget jelenthet a Canva online képszerkesztő saját útmutatója is.
Hogyan tovább?
Ha ideáig eljutottál, már biztosan kialakult benned egy átfogó kép arról, hogyan válassz körültekintően betűtípusokat a honlapodra.
De a webtipográfia nem ér itt véget, sőt: a könnyű olvashatósághoz gondoskodnod kell a megfelelő szöveghierarchiáról, meg kell találnod a helyes sormagasságot és betűméreteket, és fontos az is, hogy jól válaszd meg a bekezdések és más vizuális elemek (kiemelések, képek, stb.) közötti tér méretét.
Ha bővebben érdekel a téma, jó szívvel ajánlom Rafal Tomal tipográfia kurzusát, ez a bejegyzés is elsősorban az ő anyagára támaszkodik. Több angol nyelvű online tanfolyamot is kipróbáltam, de messze ez volt a legalaposabb és legjobb.
Neked vannak kedvenc betűtípusaid vagy kombinációid? Oszd meg velünk a hozzászólások között!
Azért kicsit sem ciki, hogy a piros csíkkal kiemelt szövegrészekben nem jelennek meg helyesen a problémás betűk…
pl. az ő…
ld: „Egyes betűtípusok a nagyobb méretű címekhez illenek, másokat inkább a hosszabb törzsszöveghez érdemes használni.”
Pont ilyen problémával küzdve jöttem ide… de akkor már megyek is. 😉
Szia! ciki, vagy nem ciki, de van ilyen 🙂 Köszönöm szépen, hogy felhívtad a figyelmet a hibára. Egyébként nem a webfontok voltak a ludasak, hanem gyorsítótárazási probléma volt. Ha neked is van ilyen, érdemes ott körülnézni 🙂