Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-05-060 komment

Mik azok a változtatható betűtípusok? És miért érdemes használni őket?

Egyre többet hallunk mostanában a változtatható betűtípusokról, de miért? Mire és hogyan használhatok?

Úgy néz ki, hogy a változtatható betűtípusok tekinthetők a legjelentősebb felfedezésnek a webfontok megjelenése óta. Várhatóan egyre nagyobb lesz a hatásuk a webre, és arra, ahogyan a tipográfiát használjuk a webdesignban. Ha még nem tudod, hogy miről is van szó pontosan, akkor segítünk annyit tudunk segíteni, hogy összefoglaltuk a lényeget a Design Shack bejegyzése alapján.

Mik is azok a változtatható betűtípusok?

Biztos találkoztál már azzal a jelenséggel, amikor elkezd betöltődni egy weboldal, de elsőre egy fura betűtípussal írt ronda designt látsz, majd néhány pillanat múlva összeáll az oldal megjelenése. Ennek oka, hogy a betűtípusok betöltése később történik meg, mint az oldal megjelenése, ami egy lassú weboldalnál a felhasználó számára is látható folyamat.

Egy weboldal tervezésénél többféle betűtípust használunk, amibe beletartoznak a vékonyabb és vastagabb betűk, illetve a különféle stílusok, mint például a betűk dőlt verziója. A hagyományos megoldással minden betűtípust külön be kell ágyazni a weboldalba. Amikor a felhasználó számára betöltődik az oldal, akkor először letöltődnek ezek a betűtípusok, majd megjeleníti őket a böngésző, jó esetben még mielőtt láthatóvá válna a felhasználó számára.

Ugyanakkor a betűtípusok betöltése időbe telik, hiszen méretük van, foglalják a szervert és sávszélességet igényelnek, emellett pedig hatással vannak az általános felhasználói élményre.

A változtatható fontok a betűtípusok olyan új típusát jelentik, melyek a CSS erejét használják ki a tengely numerikus értékek mentén történő megváltoztatására. Vagy másképp fogalmazva: a változtatható betűtípusok CSS attribútumokat használnak a betű súlyának, stílusának és más paramétereinek beállításához.

Vagyis ahelyett, hogy különféle fontokat ágyaznánk be a weboldalba, hogy megjelenítsék a különféle stílusokat, mindössze egyetlen betűtípusra van szükség, melynek a stílusát CSS változtatja tág határok között. Ez a megoldás tehát nagyobb kreativitást tesz lehetővé a betűk designjánál, anélkül, hogy az hátrányosan befolyásolná a weboldal teljesítményét.

Hogyan működnek a változtatható betűtípusok?

Amikor a megszokott módon használsz hagyományos betűtípusokat, akkor csekély befolyásod van arra, hogy miként változzon a betűk megjelenése. Vagy legalábbis nem tudod befolyásolni anélkül, hogy ne romlana a betűtípus minősége vagy designja. Arra vagy korlátozva, hogy fix szélességű fontokat használj, melyek persze lehetnek keskeny betűtípusok.

Változtatható betűtípusok esetén viszont szabályozhatod a betű szélességét a CSS attribútumok és numerikus értékek használatával, anélkül, hogy ez hátrányosan befolyásolná a betű designját. Például használhatsz egy olyan egyszerű CSS attribútumot, mint a h2 { font-stretch: 60%; }, mellyel megnyújtod a betűt, így a H2 címsorok egy másfajta megjelenés kapnak, mint a szövegtörzs. Ugyanez vonatkozik a dőlt betűkre, a méretekre és a többi paraméterre.

A változtatható fontok ereje tehát, mint látható, a CSS-ben rejlik. És ez az, ami még reszponzívabbá és hatékonyabbá teszi az erőforrás-igényes, régi megoldáshoz képest. Erre láthatsz egy jó példát a CodePen-nél, ahol bemutatják, hogy miként használhatók egy kreatív designnál a változtatható fontok.

Miért használj változtatható betűket?

Habár az eddigiekből jól látható, hogy milyen előnye van a változtatható betűtípusok használatának, össze lehet foglalni néhány pontba az eddigieket, hogy még világosabb legyen:

  • Gyorsabbá válik a weboldal: a beágyazott betűk sokasága nélkül gyorsabban töltődik be a weboldal és kevesebb szerver-erőforrást igényel.
  • Kreatív szabadság: a betűtípusok nem korlátozzák a weboldal designját.
  • Rugalmasabb design: a nagyobb képlékenység révén korlátok nélkül határozható meg a szélesség, a súly és egyéb paraméterek.
  • Javuló felhasználói élmény: minimálissá válik a késés a betű betöltésénél, miközben az operációs rendszerrel is jobb a kompatibilitása.

Hogyan kezdj bele?

A változtatható fontok használatára való átállás a saját weboldaladnál nem különösebben nehéz. A legegyszerűbb a Google Fontok használata, és azok közvetlen beágyazása a weboldal kódjába.

A Google Font API V2 már magába foglalja számos változtatható betűtípus támogatását. Csak válassz ki egyet és tedd be a kódba.

De Te magad is beágyazhatod őket a CSS-en keresztül a “@font-face” használatával. A fontstílusok meghatározására szolgáló attribútumok és tengelyek általában minden változtatható font esetében azonosak. Ugyanakkor néhány font esetén különböznek, ezért érdemes minden betűtípus dokumentációját használni, hogy tudd, miként működik az adott font. 

A változtatható betűtípusok technikai magyarázatairól a Mozilla készített egy jó útmutatót.

Összességében tehát elmondható, hogy a változtatható betűtípusok jelentik a webdesign jövőjét, és néhány év múlva már ezek jelentik a sztenderd választást a weboldalaknál és appoknál. Tehát, ha egy igazán jövőbe mutató designt akarsz, akkor jobb, ha mielőbb használatba veszed a változtatható betűket. 

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.