# Web tipográfia kisokos: minden fontos tudnivaló egy helyen > A jó web tipográfia azt a célt szolgálja, hogy a szöveged könnyen olvasható legyen és az olvasó tekintetét oda vezesse, ahova te akarod. Ehhez digitálisan jól működő betűt kell választanod, figyelni a magyar ékezetekre, és nem szabad túlzsúfolni a formázással. Forrás: https://brandguide.hu/web-tipografia-kisokos/ · Megjelent: 2022-05-20 · Frissítve: 2026-10-16 Nincs jó webdesign (és honlap) jó web tipográfia nélkül. De mégis mi alapján lesz jó vagy rossz egy tipo. Ebben a cikkben mindent átveszünk az alapoktól, hogy olyan web tipót készíthess, ami megragadja a felhasználó tekintetét és nem végigvezeti egészen addig a pontig, amit mindenképp meg akarsz mutatni neki. ## A tipográfia alapjairól (röviden) A webes tipográfia alapjainak lefektetéséhez tisztáznunk kell néhány dolgot a betűtípusokról, valamint a terek használatáról. ### A betűtípusok Mivel a betűk fedik le az esztétikai megjelenés nagy részét, ezért őket tekinthetjük a tipográfia alapjainak. A technológia fejlődésével egyre több és több betűtípus vált elérhetővé, de ha nagyon-nagyon egyszerűsíteni akarunk, azt mondhatjuk, hogy két nagy csoportra oszthatjuk a betűket: - talpas (serif) betűk - és talpatlan (sans serif) betűk. (Persze más típusok is léteznek, de ezek mentén tudjuk a leghatékonyabb most a cikkben elválasztani őket.) A talpakkal rendelkező betűk a weben manapság kissé háttérbe szorultak. Főként nyomtatott anyagokban (például könyvekben) találkozhatunk velük. Míg a talpatlan betűk általánosságban jobban olvashatóak digitális felületeken, kijelzőkön. A talpas és talpatlan betűtípusok mellett van még valami, amit érdemes figyelembe venni. ### A magyar abc web tipográfiai problémái Időnként abba a problémába ütközhetünk, hogy a kiválasztott betűtípus nem tartalmaz ékezetes betűket. Ennek eredménye, amikor az ékezetes betűk elütnek az egységes stílustól. Erre különös figyelmet kell fordítani a webes tipográfia tervezésekor, hiszen roppant nagy blama a felhasználók szemében. Ha részletesebben is érdekel a [tipográfia](/a-tipografia-jelentese-alapismeretek/), olvasd el a témában írt részletes cikkemet. Ha pedig ennél is mélyebb tudásra vágysz, akkor a tipográfiai könyvemet is érdemes a kezedbe venned. [![Tipográfia - A vizuális kommunikáció alapja könyv.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/02/Typo-onyv-banner@3x-1024x417.webp)](https://typo.brandguide.hu) ### A tipográfia és a white space-ek Van egy feladat, aminek elvégzése azonnal és jelentősen növeli a tipográfiai érzéket. Webdesign készítése úgy, hogy csak tipográfiai elemeket és térközöket, negatív tereket használhatunk. ![Web tipográfia](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/05/Web-2-1024x469.webp) Válogatás néhány volt hallgatóm munkájából (KREA Design Iskola) Ha megnézzük a fenti példákat, a tipográfia segíti a szöveget, kiemeli a hangsúlyokat és vezeti az olvasó tekintetét. Ezzel meg is fogtuk a tipográfia lényegét. De persze, nem elégszünk meg ennyivel. Ássunk egy kicsit mélyebbre. ## A webes tipográfia alapkérdése: milyen egy jó (digitális) betű? Gyakorlatilag naponta jelenik meg új typo. Így a megfelelő betűtípus megtalálása még nehezebb. Támpont lehet, hogy ma már mindenképp olyan betűket kell találnunk, amelyek jól működnek digitálisan is. ![A jó digitális betű a web tipográfia területén](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/05/Web-1-1024x469.webp) A jó digitális betű Amire tehát figyelj: - a **magasabb X magasság** nagyobb belső tereket hoz létre, azaz kisebb méretben is jól olvasható betűket kapunk; - a **betűvastagság** tekintetében arra kell törekednünk, hogy minél kisebb eltérések legyenek a betű egyes elemei között – így a rosszabb minőségű kijelzők is kevés torzítással adják ezt vissza. És még valami. A tipográfia tervezése során nagyon fontos kérdés, hogy a betű olvasható legyen hosszú szöveg esetén is. ![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/05/Web-3-1024x469.webp) Itt arra kell figyelni, hogy minél inkább geometrikus egy betű, annál nehezebben olvasható. Viszont minél inkább geometrikus (alacsony kontraszt a vonalvastagságban), annál inkább működik digitálisan. A feladat tehát, hogy a két véglet között megtaláljuk az arany középutat. ![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2021/09/tipp.webp) Jogi szempontból mindenképpen kérdéses, hogy egy-egy ilyen eredménnyel mihez is kezdhetsz. Így bármelyik AI tool-t is használod, nézz utána a jogi oldalának, ha továbbvinnéd. ### Variable Fonts (Variábilis fontok) Vagy másnéven változó betűtípusok. Korábban megszokhattuk, hogy az egyes betűtípusoknak megvannak a maguk szélesség- és vastagságbeli változatai, amelyeket használhattunk. A variábilis fontok megjelenésével azonban paraméter szerint határozhatjuk meg a betűk szélességét és vastagságát. De akár a dőlésszögbeli értékeket is módosíthatjuk. Azaz a weboldal fejlesztésekor CSS-ből tudjuk meghatározni a fenti jellemzőket. Oké, az alapokat már tudjuk. De van még egy igazán fontos dolog. ## Mindig legyen vésztartalékod (webdesign téren is) A tartalékképzés fontos dolog, design tekintetben is. Gondolj bele mi történik, ha a weboldalon a böngésző valamiért nem jeleníti az adott betűtípust. Ekkor jön képbe a tartalék, vagyis a fallback font. ### Mi a fallback font? A fallback font egy olyan tartalék betűtípus, amely a lehető legtöbb Unicode karakter szimbólumát tartalmazza. Szerepe, hogy ha valamiért nem megjeleníthető egy weboldal saját betűtípusa, akkor a rendszer ezekhez a fallback fontokat használja helyette. ## A font is szoftver Bármilyen furcsán is hangozzon ez első hallásra… … hadd magyarázzam meg: Vannak szabadon felhasználható és licence-köteles (fizetős) betűtípusok. Előbbiek használata ingyenes, utóbbiak esetében viszont meg kell vennünk a lincence-et, hogy használhassuk a fontot. A Midjourney négy variációja később is finomítható: a megfelelő, legjobbnak ítélt verzióból kérhetsz további négyet. Ezek közül pedig jó eséllyel lesz olyan, amely teljesen megfelel az elképzeléseidnek. A licence több felhasználási típusra terjed ki. Nézzünk meg kettőt ezek közül: - **desktop** – a font licence-díja annak függvényében változik, hogy hány munkaállomáson használjuk ezeket; - **online** – a weboldal egyedi látogatóinak számától függ a font licence-díja (és ha ez időközben annyit nő, hogy később a magasabb kategóriába kerülsz, a különbözetet kell fizetned, vagy bérlés esetén egy magasabb havidíjat.) Eltérő, hogy a licence-tulajdonostól megkapod-e a fájlokat (otf, ttf, eot, woff vagy svg formátumban), vagy egy embed kód segítségével tudod megjeleníteni a betűtípusokat az oldaladon. Van lehetőséged [desktop font online fonttá alakítására](https://www.fontsquirrel.com/tools/webfont-generator) is. De itt is érdemes figyelni a licence adta lehetőségeket. ## Gyakran ismételt kérdések a web tipográfia témában Bár nem számoltam össze, de jó eséllyel az alábbi három web tipográfiai kérdést hallottam már a legtöbbször, pályafutásom alatt. ![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/05/Web-4-1024x469.webp) ### Mekkora legyen a betűméret? A rövid válasz, hogy ökölszabály szerint: - mobil – 12-16pt - tablet – 15-19pt - desktop – 16-20pt A hosszabb válasz pedig, hogy a megfelelő betűméret függ a fonttól – hiszen például azonos betűméreten más vastagsága van [egy klasszikus és egy digitális](/digitalis-arculatok-alapja/) fontnak. Valamint kérdés még a megjelenítendő tartalom is. Figyelembe kell ugyanis vennünk, hogy mekkora betűméret szükséges az adott mennyiségű és sűrűségű szöveg kényelmes olvasásához. A folyamatos méretbeli növekedés azonban elkerülhetetlen, hiszen a digitális szövegek fogyasztása már nem olvasással, hanem szkenneléssel zajlik. Így a fontosabb üzeneteket mindenképpen ki kell emelnünk – például nagyobb betűkkel és térközökkel. És még egy tipp. Érdemes tesztelni, milyen kényelmesen olvashatóak adott méretekben a kiválasztott betűtípusok, és a teszteredmények alapján meghatározni a pontos méreteket. (A tesztközeg lehet akár család, barátok, munkatársak szűk köre is.) ### Hány betűtípus legyen egy weboldalon? Először nézzük meg, hogy a brand arculati kézikönyvében van-e ezzel kapcsolatos megkötés. Ha nincs, akkor igazítsuk a betűtípusok számát a tartalmi elemekhez – és közben törekedjünk arra, hogy minél egyszerűbb maradjon a megjelenés. Alapvetően egynél több fontot szoktunk használni, hogy a címsorok és a szöveg törzsek elkülönüljenek a weboldalon. ### Melyik betűtípust használjam? A választási lehetőség óriási. A [Google fontok](https://fonts.google.com/) egyre több lehetőséget nyújtanak – ráadásul ingyen. Ha pedig nincs ötleted, hogy milyen vonalon indulj el a webes tipográfia terén, [Fonts In Use](https://fontsinuse.com/) weboldal komoly inspiráció lesz. Itt ugyanis gyűjteményekbe rendezve láthatod, hogy egyes betűtípusokat hogyan használtak már. ## Tehát mit is tanultunk a web tipográfiáról? Elsősorban azt, hogy a legfontosabb célja a szöveg olvashatóságának javítása a weboldalon. Emellett mindenképp kerüljük a felesleges formázást. Ha egy oldalon túl sok a különböző kiemelések száma, az nemhogy nem segíti, de még rontja is az olvasási élményt. A szöveget tehát inkább megfelelő tördeléssel (sorok hossza és sűrűsége, terek és negatív terek használata) és egyszerű, olvasható tipókkal gazdagítsuk. Továbbá a jó webdesign grafikai elemként kezeli a betűket. (A művészi önmegvalósítást hagyjuk máskorra.) Ha ezekre figyelünk (és a fallback fontról sem feledkezünk meg), jó eséllyel igényes, jó web tipográfia születik. Ha tetszett a cikk, vagy ismersz valakit, akinek tetszene (hasznos lenne), ne hagyd kattintás nélkül a megosztás gombot. Ha pedig kiegészítenéd valamivel az írást, esetleg kérdésed van, a kommentszekció elbírja még a te hozzászólásod is. [![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/02/Typo-onyv-banner@3x-1024x417.webp)](https://typo.brandguide.hu) ## Mit vigyél haza - Válassz talpatlan betűt, mert digitális felületen általában jobban olvasható. - Ellenőrizd, hogy a betűtípus tartalmazza a magyar ékezetes karaktereket is. - Mindig állíts be fallback fontot arra az esetre, ha a böngésző nem jeleníti meg a sajátodat. - Ne halmozz túl sok kiemelést, mert az rontja az olvasási élményt. - Teszteld a betűméretet valós olvasókkal, mielőtt véglegesítenéd. ## Gyakori kérdések ### Mekkora legyen a betűméret a weboldalamon? Ökölszabály szerint mobilon 12-16pt, tableten 15-19pt, desktopon 16-20pt a jó méret. A pontos érték függ a fonttól és a tartalom mennyiségétől is, ezért érdemes kipróbálni más emberekkel, mennyire kényelmesen olvasható. ### Hány betűtípust használjak egy weboldalon? Először nézd meg, van-e megkötés az arculati kézikönyvben, ha nincs, igazítsd a tartalmi elemekhez. Alapvetően egynél több fontot szoktak használni, hogy a címsorok és a szövegtörzs elkülönüljön, de a megjelenés maradjon egyszerű. ### Melyik betűtípust válasszam a weboldalamhoz? A Google fontok ingyen kínálnak nagy választékot. Ha nincs ötleted, a Fonts In Use oldal inspirációt ad arra, hogyan használták már mások az egyes betűtípusokat. ### Mi az a fallback font és miért van rá szükség? A fallback font egy tartalék betűtípus, amely a lehető legtöbb Unicode karaktert tartalmazza. Akkor lép életbe, ha valamiért nem jeleníthető meg a weboldal saját betűtípusa.