Egy esztétikus oldal megtervezésekor az elrendezés mellett szintén fontos a különböző szövegrészekben alkalmazott betűk kinézete. Néhány alapfogalom a betűkkel kapcsolatban melyek gyakran keverednek:
- tipográfia: “A tipográfia nyomtatott betűkkel foglalkozó szakma és művészeti ág…”
- betűkép (typeface): az amit látunk, a betűk (gyakran művészi) rajzolata
- betűtípus (font): a font egy konkrét betűtípus karaktereinek tárolására használt fájl.
Az idők folyamán kialakult rengeteg betűtípust a tipográfusok többféleképpen is csoportosítják, ezek közül a legalapvetőbb az ún. “tízes csoportosítás“, a betűk legjellemzőbb stílusjegyei alapján. Ezen csoportokba számos betűtípus tartozik, melyek egy-egy betűcsaládot alkotnak.
A CSS3 öt általános betűtípus családot határoz meg:
- serif (talpas)
- sans-serif (talpatlan)
- cursive (hajlított, kézírás jellegű)
- fantasy (dekoratív)
- monospace (azonos betű szélesség, főleg számítógépes kódok megjelenítésére)
Ezeket a családokat minden böngésző ismeri, de nem teljesen egyformán jeleníti meg.
Betűtípus megadása CSS-ben
Betűtípust CSS-ben a font-family tulajdonsággal lehet megadni:
selector { font-family: family-name1, family-name2, generic-family; }
- egymás után, vesszővel elválasztva több betűtípust is meg lehet adni
- “fallback” rendszerben, azaz először azt, amelyiket leginkább szeretnénk, majd a következőt, ha az első nem található, és így tovább, majd a végén egy általános betűtípus család nevét az öt közül
- szóközt tartalmazó betűtípusok nevét idézőjelben vagy aposztrófok között kell megadni, pl: “Times New Roman”
A különböző böngészőkben való egységes megjelenés érdekében, a felsorolásban jellegében egymáshoz hasonló betűtípusok-at célszerű megadni. Például:
- font-family: “Times New Roman”, Times, serif; (talpas)
- font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif; (talpas)
- font-family: Arial, Helvetica, sans-serif; (talpatlan)
- font-family: “Courier New”, Courier, monospace; (fix szélességű)
Font formátumok
A betűtípusokat tároló font fájlok legelterjedtebb típusai:
- TrueType Fonts (.ttf): Mac OSX és Microsoft Windows operációs rendszerek leggyakoribb font formátuma
- OpenType Fonts (.otf): Microsoft fejlesztette ki, a TTF utódja
- Web Open Font Format (.woff): 2009-ben fejlesztették ki, kifejezetten webes használatra a W3C ajánlásával. Gyakorlatilag a OpenTpye vagy TTF tömörítéssel kiegészítve, a gyorsabb letöltés érdekében
- Web Open Font Format 2.0: jobb tömörítésű, mint a WOFF 1.0
A TTF/OTF és WOFF típusokat minden modern böngésző támogatja.
Web fontok
A betűtípusok tehát font-fájlokban vannak tárolva, és az operációs rendszeren vannak telepítve. Tehát egy adott eszközön megjeleníthető betűtípusok nem a böngészőtől függenek. Mivel egy weboldal készítésekor nem tudhatjuk előre, hogy az oldal leendő látogatóinak eszközein milyen betűtípusok lesznek telepítve, illetve a böngészők által ismert 5db általános betűtípus család pedig elég szegényes, ezért hiányzó betűtípusok problémáját másképpen kell megoldani.
A web-fontok alkalmazásával lehetőség van olyan betűtípusok használatára, melyek nincsenek a felhasználó számítógépén telepítve.
Lehetőségek:
- fontok hosztolása saját kiszolgálón
- fontok betöltése CDN hálózatból (pl. Google Fonts)
Betűtípusok hosztolása saját kiszolgálón
Miután beszereztük a használni kívánt fontokat (online font gyűjteményekből pl. 1001fonts.com, dafont.com), a CSS3-ban lehetőségünk van a @font-face szabállyal saját típust létrehozni, amire utána a font-family tulajdonsággal lehet hivatkozni.
Pl.:
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }
Ezután hivatkozhatunk rá:
p { font-family: myFirstFont; }
A sansation_light.woff font fájlt a fel kell tölteni a kiszolgálónkra, és az url() függvénnyel adhatjuk meg a helyét, hasonlóan, mint mondjuk a háttérképek esetén.
Google Fonts
A Google Fonts használatával még egyszerűbb a helyzet, nem kell font fájlok le- és feltöltésével vesződni, pusztán HTML és CSS kódok beillesztésével meg lehet oldani a dolgot.
A kezdő oldalon megkeressük a használni kívánt betűtípusokat. Érdemes a Preview Text-hez a jól bevált “Árvíztűrő tükörfúrógép” szöveget beírni, és azzal tesztelni, mert gyakran előfordul, hogy a font nem tartalmazza az összes magyar ékezetes karaktert, ami igen bénán tud mutatni, miután a kész oldalon derül ki…
A kikeresett fontokat az “Add to Collection” gombbal hozzáadjuk az oldal alján levő gyűjteményhez, majd ha végeztünk, akkor a “Use” gombbal lehet továbblépni.
A következő oldalon az 1. pontban a betűcsaládon belüli stílusokat lehet kiválogatni (normal, dőlt, vastag, stb), a 2. pontban a karakterkészletet, majd 3. és 4. pontból egyszerűen csak ki kell másolni a kódokat, és az oldalunkba illeszteni a megfelelő helyre.
A 3. pontbeli kód kerül a HTML dokumentum fejlécébe (<head> ), a 4. pontbeli kóddal lehet rá hivatkozni a CSS-ben:
Ikonok
[icon name=”html5″ class=”fa-4x fa-pull-left fa-border”] A modern HTML5 / CSS3 alapú web dizájnban nagyon elterjedt az ikonok használata. Az ikonok lehetnek képek is, de ehelyett egyre inkább ikon fontokat alkalmaznak. Az ikon fontok olyan betűtípus fájlok ahol a karakterek helyett ikonok vannak. Windows operációs rendszerekben is nagyon régóta vannak ilyen fontok (webdings, wingdings), a modern, webes ikon fontok csak annyiban különböznek, hogy az ikonok jobban a webes igényekre szabottak (közösségi médiával kapcsolatos ikonok, stb…).
Az ikon fontok alkalmazásának előnyei a képekkel szemben:
- méretezhetőség
- formázhatóság
- betöltés CDN-ből
A legelterjedtebb ikon fontok:
Mintapéldák: http://www.w3schools.com/icons/