Web tipográfia kisokos: minden fontos tudnivaló egy helyen

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.