Nincs jó webdesign (és honlap) jó web tipográfia nélkül. De mégis mi alapján lesz jó vagy rossz egy tipo. Ebben a cikkben mindent átveszünk az alapoktól, hogy olyan web tipót készíthess, ami megragadja a felhasználó tekintetét és nem végigvezeti egészen addig a pontig, amit mindenképp meg akarsz mutatni neki.
A tipográfia alapjairól (röviden)
A webes tipográfia alapjainak lefektetéséhez tisztáznunk kell néhány dolgot a betűtípusokról, valamint a terek használatáról.
A betűtípusok
Mivel a betűk fedik le az esztétikai megjelenés nagy részét, ezért őket tekinthetjük a tipográfia alapjainak.
A technológia fejlődésével egyre több és több betűtípus vált elérhetővé, de ha nagyon-nagyon egyszerűsíteni akarunk, azt mondhatjuk, hogy két nagy csoportra oszthatjuk a betűket:
- talpas (serif) betűk
- és talpatlan (sans serif) betűk.
(Persze más típusok is léteznek, de ezek mentén tudjuk a leghatékonyabb most a cikkben elválasztani őket.)
A talpakkal rendelkező betűk a weben manapság kissé háttérbe szorultak. Főként nyomtatott anyagokban (például könyvekben) találkozhatunk velük.
Míg a talpatlan betűk általánosságban jobban olvashatóak digitális felületeken, kijelzőkön.
A talpas és talpatlan betűtípusok mellett van még valami, amit érdemes figyelembe venni.
A magyar abc web tipográfiai problémái
Időnként abba a problémába ütközhetünk, hogy a kiválasztott betűtípus nem tartalmaz ékezetes betűket.
Ennek eredménye, amikor az ékezetes betűk elütnek az egységes stílustól.
Erre különös figyelmet kell fordítani a webes tipográfia tervezésekor, hiszen roppant nagy blama a felhasználók szemében.
Ha részletesebben is érdekel a tipográfia, olvasd el a témában írt részletes cikkemet. Ha pedig ennél is mélyebb tudásra vágysz, akkor a tipográfiai könyvemet is érdemes a kezedbe venned.
A tipográfia és a white space-ek
Van egy feladat, aminek elvégzése azonnal és jelentősen növeli a tipográfiai érzéket.
Webdesign készítése úgy, hogy csak tipográfiai elemeket és térközöket, negatív tereket használhatunk.
Ha megnézzük a fenti példákat, a tipográfia segíti a szöveget, kiemeli a hangsúlyokat és vezeti az olvasó tekintetét. Ezzel meg is fogtuk a tipográfia lényegét.
De persze, nem elégszünk meg ennyivel. Ássunk egy kicsit mélyebbre.
A webes tipográfia alapkérdése: milyen egy jó (digitális) betű?
Gyakorlatilag naponta jelenik meg új typo. Így a megfelelő betűtípus megtalálása még nehezebb.
Támpont lehet, hogy ma már mindenképp olyan betűket kell találnunk, amelyek jól működnek digitálisan is.
Amire tehát figyelj:
- a magasabb X magasság nagyobb belső tereket hoz létre, azaz kisebb méretben is jól olvasható betűket kapunk;
- a betűvastagság tekintetében arra kell törekednünk, hogy minél kisebb eltérések legyenek a betű egyes elemei között – így a rosszabb minőségű kijelzők is kevés torzítással adják ezt vissza.
És még valami.
A tipográfia tervezése során nagyon fontos kérdés, hogy a betű olvasható legyen hosszú szöveg esetén is.
Itt arra kell figyelni, hogy minél inkább geometrikus egy betű, annál nehezebben olvasható. Viszont minél inkább geometrikus (alacsony kontraszt a vonalvastagságban), annál inkább működik digitálisan.
A feladat tehát, hogy a két véglet között megtaláljuk az arany középutat.
Variable Fonts (Variábilis fontok)
Vagy másnéven változó betűtípusok.
Korábban megszokhattuk, hogy az egyes betűtípusoknak megvannak a maguk szélesség- és vastagságbeli változatai, amelyeket használhattunk.
A variábilis fontok megjelenésével azonban paraméter szerint határozhatjuk meg a betűk szélességét és vastagságát. De akár a dőlésszögbeli értékeket is módosíthatjuk.
Azaz a weboldal fejlesztésekor CSS-ből tudjuk meghatározni a fenti jellemzőket.
Oké, az alapokat már tudjuk. De van még egy igazán fontos dolog.
Mindig legyen vésztartalékod (webdesign téren is)
A tartalékképzés fontos dolog, design tekintetben is.
Gondolj bele mi történik, ha a weboldalon a böngésző valamiért nem jeleníti az adott betűtípust.
Ekkor jön képbe a tartalék, vagyis a fallback font.
Mi a fallback font?
A fallback font egy olyan tartalék betűtípus, amely a lehető legtöbb Unicode karakter szimbólumát tartalmazza.
Szerepe, hogy ha valamiért nem megjeleníthető egy weboldal saját betűtípusa, akkor a rendszer ezekhez a fallback fontokat használja helyette.
A font is szoftver
Bármilyen furcsán is hangozzon ez első hallásra…
… hadd magyarázzam meg:
Vannak szabadon felhasználható és licence-köteles (fizetős) betűtípusok.
Előbbiek használata ingyenes, utóbbiak esetében viszont meg kell vennünk a lincence-et, hogy használhassuk a fontot.
A licence több felhasználási típusra terjed ki. Nézzünk meg kettőt ezek közül:
- desktop – a font licence-díja annak függvényében változik, hogy hány munkaállomáson használjuk ezeket;
- online – a weboldal egyedi látogatóinak számától függ a font licence-díja (és ha ez időközben annyit nő, hogy később a magasabb kategóriába kerülsz, a különbözetet kell fizetned, vagy bérlés esetén egy magasabb havidíjat.)
Eltérő, hogy a licence-tulajdonostól megkapod-e a fájlokat (otf, ttf, eot, woff vagy svg formátumban), vagy egy embed kód segítségével tudod megjeleníteni a betűtípusokat az oldaladon.
Van lehetőséged desktop font online fonttá alakítására is. De itt is érdemes figyelni a licence adta lehetőségeket.
Gyakran ismételt kérdések a web tipográfia témában
Bár nem számoltam össze, de jó eséllyel az alábbi három web tipográfiai kérdést hallottam már a legtöbbször, pályafutásom alatt.
Mekkora legyen a betűméret?
A rövid válasz, hogy ökölszabály szerint:
- mobil – 12-16pt
- tablet – 15-19pt
- desktop – 16-20pt
A hosszabb válasz pedig, hogy a megfelelő betűméret függ a fonttól – hiszen például azonos betűméreten más vastagsága van egy klasszikus és egy digitális fontnak.
Valamint kérdés még a megjelenítendő tartalom is. Figyelembe kell ugyanis vennünk, hogy mekkora betűméret szükséges az adott mennyiségű és sűrűségű szöveg kényelmes olvasásához.
A folyamatos méretbeli növekedés azonban elkerülhetetlen, hiszen a digitális szövegek fogyasztása már nem olvasással, hanem szkenneléssel zajlik. Így a fontosabb üzeneteket mindenképpen ki kell emelnünk – például nagyobb betűkkel és térközökkel.
És még egy tipp.
Érdemes tesztelni, milyen kényelmesen olvashatóak adott méretekben a kiválasztott betűtípusok, és a teszteredmények alapján meghatározni a pontos méreteket. (A tesztközeg lehet akár család, barátok, munkatársak szűk köre is.)
Hány betűtípus legyen egy weboldalon?
Először nézzük meg, hogy a brand arculati kézikönyvében van-e ezzel kapcsolatos megkötés.
Ha nincs, akkor igazítsuk a betűtípusok számát a tartalmi elemekhez – és közben törekedjünk arra, hogy minél egyszerűbb maradjon a megjelenés.
Alapvetően egynél több fontot szoktunk használni, hogy a címsorok és a szöveg törzsek elkülönüljenek a weboldalon.
Melyik betűtípust használjam?
A választási lehetőség óriási.
A Google fontok egyre több lehetőséget nyújtanak – ráadásul ingyen.
Ha pedig nincs ötleted, hogy milyen vonalon indulj el a webes tipográfia terén, Fonts In Use weboldal komoly inspiráció lesz. Itt ugyanis gyűjteményekbe rendezve láthatod, hogy egyes betűtípusokat hogyan használtak már.
Tehát mit is tanultunk a web tipográfiáról?
Elsősorban azt, hogy a legfontosabb célja a szöveg olvashatóságának javítása a weboldalon.
Emellett mindenképp kerüljük a felesleges formázást. Ha egy oldalon túl sok a különböző kiemelések száma, az nemhogy nem segíti, de még rontja is az olvasási élményt.
A szöveget tehát inkább megfelelő tördeléssel (sorok hossza és sűrűsége, terek és negatív terek használata) és egyszerű, olvasható tipókkal gazdagítsuk.
Továbbá a jó webdesign grafikai elemként kezeli a betűket. (A művészi önmegvalósítást hagyjuk máskorra.)
Ha ezekre figyelünk (és a fallback fontról sem feledkezünk meg), jó eséllyel igényes, jó web tipográfia születik.
Ha tetszett a cikk, vagy ismersz valakit, akinek tetszene (hasznos lenne), ne hagyd kattintás nélkül a megosztás gombot. Ha pedig kiegészítenéd valamivel az írást, esetleg kérdésed van, a kommentszekció elbírja még a te hozzászólásod is.
