Betűtípus (06:22)
Ha 2022. márciusa óta megnézted az azonos című leckét a Weboldal tervezés kurzusban, akkor nem érdemes megnézned, mert sok különbség nincs a 2 videó között.
Jól működő betűtípusok sablon: Klikk a megtekintéshez
Kiemelt linkek:
- Google Fonts (webre optimalizált betűcsaládok gyűjtőhelye)
- A Canva képszerkesztő betűpárosítója előre megadott betűtípushoz
- A Fointpair.co betűpár-gyűjteménye
- A Fonts Ninja betűtípusleíró bővítmény a Google Chrome Web Store-ban
Bevezetés
A weboldalad kinézetét meghatározó egyik legfontosabb „dizájnelem” az általad használt betűtípus lesz. A küllem mellett azonban pár dologra érdemes odafigyelni az oldaladon használt betűtípusok kiválasztásánál.
A “font”, vagyis betűtípus kifejezést általában rosszul használjuk: az Open Sans, Roboto és társai úgynevezett typeface-ek, vagyis betűcsaládok, ezeken belül vannak a konkrét betűtípusok.
Melyik betűtípus(oka)t válasszam?
- legyen olvasható (ne legyen túlcizellált)
- illeszkedjen a stílusa a bizniszedhez /a témához
- a speciális magyar karaktereket jól megjeleníti (üűöőúóáéí)
- a sablonod is támogassa a betűkészletet (a jobb sablonoknál ez nem lesz gond)
- ideális esetben 2, de maximum 3 betűtípust használj egy weboldalon
A hosszabb webes szövegekhez valamilyen talpatlan, azaz Sans Serif kategóriájú betűtípust érdemes választani, a címsoroknál használhatsz “extrább”, talpas betűtípust is.
Ha nincs kedved válogatni, és biztosra akarsz menni az olvashatóság, átláthatóság kérdésében, használd az Open Sans vagy Roboto betűtípusokat, amikkel nehéz melléfogni.
Ha megtetetszik egy weboldalon valamilyen betűtípus, és szeretnéd kideríteni, hogy mi a neve, a Fonts Ninja nevű Chrome bővítményt ajánlom.
Milyen méretben használjam a weben a betűket?
A weben alapvetően egy kicsivel nagyobb méretben használjuk a betűket, mint a nyomtatott kiadványok esetében. Ennek oka a monitoron, kütyükön való olvasás könnyítése.
Sztenderd betűméretek:
Általában 16 pixel a törzsszöveghez (body), azaz a bekezdésekhez.
A címsorok (heading) pedig hierarchikusan csökkenő sorrendben és méretben:
- H1 = 36 px (1 db ilyen lesz egy oldalon, egy cikknél tehát a cikk címe)
- H2 = 32 px (gyakori a használata, ez a fő tagoló a cikkben)
- H3 = 28 px (ritkább a használata, de hosszú cikkeknél még előfordulhat)
- H4 = 24 px (szinte egyáltalán nem jellemző már ilyen mélységi szint)
- H5 = 20 px (hacsak nem szakdolgozatot írsz, felesleges)
- H6 = 18 px (enciklopédiát ne a neten szerkessz… )
Pár hasznos tipp:
- válassz egyszerű, olvasható, sans serif betűtípusokat
- a body text legyen Open Sans vagy Roboto
- válaszd ugyanazt a betűtípust az összes címsorhoz 700-as vastagsággal
- elsőre használj egy ajánlott, bevált párosítást
- a logó betűtípusa és a weboldal betűtípusai passzoljanak egymáshoz
- gombokon, alcímekben használunk csupa nagybetűs szövegeket
- próbáld ki a sablonunkba illesztve és teszteld az ékezetekre
A különféle betűtípusok között órákig el lehet bogarászni. Javaslom, hogy szabj magadnak egy maximum időlimitet, amit még bűntudat nélkül ezzel tölthetsz! Változtatni később is könnyen lehet majd, ha pedig az elején a hosszas válogatást félretéve helyből egy népszerű, bevált betűtípus mellett döntesz, akkor nyugodt lehetsz felőle, hogy nem ezen múlik a sikered.