CSS betűtípusok

A betűtípusok alapvető szerepet játszanak a weboldalak megjelenésében. A megfelelő betűtípus kiválasztása nagyban befolyásolja az olvashatóságot, a dizájnt és a felhasználói élményt.

Alap szintaxis: font-family

A <font-family> tulajdonsággal adhatjuk meg, milyen betűtípust használjon az adott elem. Érdemes mindig megadni több alternatívát (fallback), ha a fő betűtípus nem elérhető.

Alapértelmezett betűtípusok

A böngészők több beépített betűtípust is tartalmaznak, például Arial, Times New Roman vagy Courier New. Ezeket egyszerűen beállíthatjuk.

Betűstílus és tipográfia

A CSS-ben további tipográfiai beállításokat is használhatunk: <font-weight> a vastagságért, <line-height> a sorközért és <letter-spacing> a betűközért.

Google Fonts használata

A Google Fonts segítségével ingyenes és modern betűtípusokat importálhatunk. Ehhez a <link> elemet használjuk a <head> részben, majd a CSS-ben hivatkozunk rá.

@font-face és egyedi betűtípusok

Saját betűtípusokat is hozzáadhatunk az @font-face szabállyal. Ilyenkor feltöltjük a betűtípus fájlt (pl. WOFF2), majd megadjuk a CSS-ben.

Tippek a betűtípusok használatához

A jó tipográfia javítja az olvashatóságot és a felhasználói élményt. Az alábbi tanácsok segítenek:

Mindig adj meg fallback betűtípusokat.
Kerüld a túl sok különböző betűtípus használatát egy oldalon.
Figyelj a reszponzív tipográfiára, hogy mobilon és asztali gépen is jól olvasható legyen a szöveg.