Tipográfia, betűkép, betűtípus, ikonok…

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.

Google Fonts 1.

Google Fonts 1.

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:

Google Fonts 2.

Google Fonts 2.

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/

 

Leave a Reply

Your email address will not be published. Required fields are marked *