Fontok (betűk) beállítása a honlapodon

A betűk, más néven fontok – mondanom sem kell -, lényeges elemei a honlapodnak.

Általánosságban érdemes tudni, hogy két, legfeljebb három betűtípusnál többet nem célszerű használnod.

Azt, hogy hol állítsd be őket, elsősorban a sablonod, oldalépítőd határozza meg.

Ha egy ingyenes sablont használsz, amit a WordPress sablonkönyvtárából választasz ki, akkor a legegyszerűbb, ha a sablon által felkínált betűtípusnál maradsz, így nem kell beállítanod semmit.

Ha ez valamiért mégsem lehetséges – például az ékezetes betűk nem jelennek meg helyesen -, akkor általában a Megjelenés – Testreszabás alatt keresheted a megoldást, vagy – ha van ilyened – egy Theme Options menüpont alatt is nézelődhetsz.

 

Törzsszöveg betűtípusa

 

A fontok kiválasztásakor fő szempont, hogy a „text”, vagy törzsszöveg betűtípusa a lehető legegyszerűbb, általánosan használt, lehetőleg talpatlan betűtípus legyen, mint például az Arial, vagy a Roboto.

A szövegnél ne akarj „dizájnolni”, az egyetlen szempont a jó olvashatóság! Semmi szükség a szivárványos betűkre, a millió féle formázásra, és méretre! Legyen szimpla, és lehetőleg sötét, világos alapon.

És ha már szóba került a méret: A törzsszövegnél, ha megoldható, célszerű 16 px körül tartani a méretet, szintén az olvashatóság érdekében.

 

Header – A címsorok

 

A header, vagy címsorok betűtípusa a második fontos csoport, amit be kell állítanod.
Van, ahol Primary, vagy elsődleges betűtípusnak is nevezik.

A lényeg, hogy a címsoraid (és, a sablonodtól függően esetleg más – menü, oldalsáv – elemek is) ezzel a betűtípussal fognak megjelenni.

Itt már lehet egy kicsit „művészkedni”, és a honlap hangulatához illő, feltűnőbb (de jól olvasható) betűtípust választani.
Én a magam részéről például nagyon szeretem a handwriting/cursive/script típusú fontokat, amik kézíráshoz hasonlóak… :)

 

Ha úgy alakul, hogy te választasz betűtípust, érdemes ún. web safe fontokat használnod, ezeket a legtöbb eszköz és böngésző támogatja.

A legjobb web safe betűtípusok listája:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

 

Választhatsz a népszerű Google fontok közül is, ezt így tedd meg:

Hazai weboldalra az ékezetes betűk megfelelő megjelenése különösen fontos, így azonban előre ellenőrizheted, hogy az adott fontnak van-e például „ő” és „ű” betűje.

A Google fontok hivatalosan nem számítanak web safe fontnak, de azért általában megfelelően jelennek meg, ingyenesek, és hatalmas a választék. Hátrányuk lehet, hogy a betöltődés bizonyos esetekben lassíthatja a honlapodat.

Fontos, hogy miután beállítottad a betűket, többféle böngészőből, eszközből is ellenőrizd az olvashatóságot!

 

Font beállítása, ha oldalépítőt használsz

 

A legnépszerűbb page builder-ekben a font kiválasztásával egyszerű dolgod lesz, azonban hogy ne vesződj el a rengeteg lehetőségben, érdemes átlátnod a teljes képet.

 

• Biztosan van egy olyan lehetőség (a Divi és az Elementor esetén meg is nézzük alább), ahol a globális font párt kiválaszthatod. Ez általános érvényű lesz a honlapodon, és mindig ez lesz az alap betöltődés, amikor egy új elemet viszel fel. Erre a már meglévő elemeket (ahol nem a globális font van beállítva) külön kell beállítanod.
• A szerkeszthető elemeket, blokkokat egyesével is állítgathatod, technikailag tehát használhatsz ezer féle betűtípust is, minden elemhez egyesével hozzárendelve valamit.
  A fentiek miatt ezt nem javaslom, de ez a lehetőség jól jöhet, ha egységesíteni szeretnéd a honlapod kinézetét.
• Ha előre elrendezett megjelenést (template/layout, vagy – kissé megtévesztően „sablon” is lehet a neve) töltesz be, az a saját betűtípusával érkezik. A harmonikus kinézet érdekében tehát célszerű az adott layout betűtípusát beállítani a globális beállításoknál is – amennyiben az megfelelően jelenik meg. Vagy a betöltött layout elemeinél cserélgeted ki a fontot a globális fontra.
• Az elemeknél egyesével beállíthatod a mobil verziót is, tehát ha az adott font túl nagy, vagy túl kicsi, akkor külön-külön is állíthatsz a méreten!

 

Nézzük, hogyan is lehet ezt megoldani!

 

Betűk beállítása DIVI-ben

 

A Divi alapértelmezett betűtípusa az Open Sans.

Ha állítanod kell a globális (egész honlapra kiható) fonton, azt a Megjelenés – Testreszabás – Általános beállítások – Tipográfia alatt éred el:

 

Ha az egyes oldalak, vagy bejegyzések szakaszainak betűtípusát szeretnéd állítani, akkor először is menj be az adott oldal szerkesztőjébe, válaszd ki az elemet, és a beállításoknál a Tervezés fülecske alatt megtalálod az adott szakasz szövegének és címsorának beállítási lehetőségeit. Ha a betűtípus Default-ra van állítva, akkor az adott szakasz azt a globális megjelenést használja, amit az előbb a Testreszabóban beállítottál. A mobil megjelenést is itt tudod változtatni:

 

Betűk beállítása Elementorban

 

Az ingyenes Elementor négyféle alapértelmezett szövegtípust kínál:

• Primary, Secondary (Elsődleges, Másodlagos) – ők címsorok
• Text (Szöveg) – ő a törzsszöveg
• Accent (Hangsúly) – bizonyos tartalmi elemek (gombok, linkek, tab-ek) szövegei

Ezt a legújabb verzió szerint az Elementor szerkesztőjében (ha Elementorral szerkesztesz egy adott oldalt, vagy bejegyzést; illetve a Sablonok alatt megtalálható szakaszt), a hamburger menüt megnyitva, a Webhelybeállítások alatt találod meg.

Ugyanezen a panelen az egyes elemeket külön-külön is szerkesztheted, illetve a mobil beállításokat is itt találod meg az elemekhez.

Így:

 

Összefoglalva:

 

• Ha a választott sablonod, vagy az oldalépítőd előre elrendezett megjelenése egységes, jól olvasható képet ad az egész honlapnak, akkor örülj – nincs dolgod, a font-cserével csak ronthatsz a helyzeten.
• Ha választanod kell, válassz két elérhető (a használt sablon, vagy oldalépítő által is felkínált) betűtípust. A törzsszövegnek szimpla elterjedt, inkább talpatlan (pl. Arial) betűtípust válassz (minimum 16 pixelre állítsd be), a címsorok számára pedig ízlés szerint egy megfelelően megjelenő, cifrább fontot is kereshetsz.
• Állítsd be mindenhol, ahol lehet – legyen a teljes honlapod egységes, harmonikus megjelenésű!
• Ellenőrizd le! Többféle eszközről, böngészőből nézd meg – ügyelj az olvashatóságra és az ékezetes betűkre.

 

Remélem, hogy segített ez a cikk kiigazodni a fontok útvesztőjében! :)

Ha maradt még kérdésed, írd meg hozzászólásban, vagy gyere tanulni a Wp100 Klubba!