Miért számít ennyire a betűtípus?
A tipó nem csak „szép betű”: olvasási sebesség, megbízhatóság‑érzet, sőt a konverzió is múlik rajta. Egy rosszul megválasztott, túl vékony vagy épp díszes font mobilon fárasztóvá teszi az olvasást. A jó választás viszont csendben dolgozik a háttérben.
Hogyan válassz családot?
Gondolkodj készletben, ne egyetlen fájlban. A cél: legyen normál, félkövér és dőlt stílusod, plusz jól megkülönböztethető méretek a címsorokhoz. Magyar ékezeteknél figyelj az ő/ű formákra és a számok olvashatóságára.
- Szövegtörzshöz: humanista sans (pl. Inter, Source Sans 3), modern groteszk (pl. Roboto), vagy olvasóbarát serif (pl. Source Serif 4).
- Címsorhoz: karakteresebb sans/serif, de ne menjen a kontraszt a használhatóság rovására.
- Ikon‑/monospace igény: kód‑darabokhoz külön monospace (pl. JetBrains Mono) – csak ahol kell.
Hol szerzed be legálisan?
Mindig licencelt forrásból dolgozz. A „letöltöm valahonnan” hosszú távon jogi és technikai kockázat.
- Google Fonts: ingyenes, széles választék, egyszerű használat, változó (variable) készletek is.
- Adobe Fonts: előfizetésben érhető el, nagy prémium kínálattal; betöltés saját CDN‑ről.
- Alapítványok és foundryk: Fontshare, GitHub‑os nyílt készletek, illetve fizetős foundryk.
Variable fontok: egy fájl, sok stílus
A variable font egyetlen .woff2 fájlban hordoz több vastagságot és dőlést. Ez kevesebb kérés, jobb betöltési sebesség, és finomhangolható tipó (pl. 520‑as font‑weight). Ha modern böngészőkre célzol, érdemes velük kezdeni.
A lényeg: kezdd egy családdal (text + címsor), lehetőleg variable változattal; tarts meg egy rövid fallback‑listát és kapcsold be a font‑display: swap beállítást. Így gyors lesz a betöltés, és nem villog percekig „láthatatlan” szöveg.
Teljesítmény: gyors marad a betű?
A tipográfia akkor segít, ha nem lassít. Pár egyszerű szabály sokat számít:
- WOFF2‑t használj (a legjobb tömörítés); TTF/OTF csak szerkesztéshez.
- font‑display: swap, hogy azonnal látható legyen a szöveg.
- Subsetting/unicode‑range: csak a szükséges karakterkészletet szolgáld ki (latin‑ext a magyarhoz).
- Előzetes kapcsolatok: <link rel=”preconnect” href=”https://fonts.gstatic.com”> harmadik félnél.
- Önhosztolás: nagy forgalomnál stabilabb és gyakran gyorsabb; cache‑elés a te kezedben.
Párosítás: hány betűtípus elég?
Gyakran 1 család elég (változó vastagságokkal). Ha párosítasz, maradj legfeljebb kettőnél: egy „munka” betű a szöveghez és egy karakteresebb a címsorhoz.
- Biztonsági recept: Inter + Source Serif 4 (szöveg: Inter 400/600, címsor: Serif 600).
- Monokróm márkákhoz: modern groteszk + erősebb félkövér címsor.
- Karakteresebb arculathoz: letisztult serif szöveg + lágy sans címsor (fordított felállás).
Licenc és jog — röviden, érthetően
Minden készletnek van felhasználási feltétele. Ellenőrizd: webfont engedély (pageview/traffic limit), önhosztolás engedélye, és a logó‑használat külön feltételei. Kétség esetén kérj írásos visszaigazolást.
WordPress/Joomla: hol állítsd?
Ne posztszinten „ragassz” egyedi betűt — állítsd rendszer‑szinten, hogy a szerkesztők ne tudják szétírni az arculatot.
- WordPress: Webhelybeállítások → Tipográfia; sablon/kidsablon CSS; önhosztolt fontok a theme‑assetsben; page builderben globál szöveg‑/címsor‑stílusok.
- Joomla: sablon beállítások; custom.css; modul‑stílus öröklés; System‑/Helix/YOOtheme változók.
Gyakori hibák (és gyors megoldásuk)
- Túl vékony kontraszt: 300‑as vastagság mobilon fakó; használj 400–500‑at.
- Túl sok család: 3+ betűcsalád kaotikus; maradj 1–2‑nél.
- Láthatatlan szöveg betöltéskor: hiányzó
font-display: swap. - Ékezet gondok: nincs latin‑ext; cseréld megfelelő készletre.
Mérés és finomhangolás
A tipó hatása mérhető: olvasási idő, görgetési mélység, CTA‑kattintás. A/B tesztelhetsz vastagságot (400 vs 500), betűméretet (16 vs 18px) és sorhosszt.
Bevezetési ellenőrzőlista a Weboldal Készítőtől
- Válassz 1 családot (variable előny), magyar ékezetekkel.
- Állítsd be a CSS‑t (font‑face, font‑display: swap, fallback stack).
- Önhosztold WOFF2‑ben, vagy preconnecttel hívd külső szolgáltatót.
- Globális tipó beállítása a CMS‑ben (WP/Joomla).
- Gyors A/B: vastagság, méret, sorhossz; mérés GA4‑ben.
