2019.08.22. 22:06, Kathryne
Talán az egyik legmeghatározóbb része egy honlapnak a rajta használt betűtípus(ok), valamint ezek összhangja a kinézettel, a tartalommal, a színekkel és az egész lap megjelenésével. Manapság rengeteg olyan felület található az interneten, ami lehetőséget ad arra, hogy egyéni betűtípust alkalmazzunk a kódolás során, erre a legismertebb példa talán a Google Fonts.
Mégis, sokan belesnek abba a hibába, hogy össze nem illő betűtípusokat alkalmaznak, vagy szinte minden egyes modul más-más formában íródik. Ez lényegesen ront az oldal minőségén, teljesen mindegy mennyi időt töltöttél a kódolással. Nem véletlen, hogy az ismertebb oldalakon, hírportálokon mindössze 2-3 betűtípust alkalmaznak.
A mai nap 10 tippet hozok arra, hogyan használjunk a betűtípusokat az oldalunkon!
1. Kevés betűtípust használj
Mint ahogy említettem, az egyik leggyakoribb probléma az, hogy minden egyes szekció (pl: oldalmodul cím, középmodul cím, linkek, félkövér, aláhúzott, dőlt, stb) más-más betűtípust kap. A túl sok típus és méret elronthatja az összhangot. Célszerű 2-3 típus használata egy honlap elkészítése során, ugyanis ekkora mennyiségnél kicsi az esélye, hogy átláthatatlanná válik a szöveg.
Ha mégis több típust szeretnél használni győződj meg arról, hogy kiegészítik egymást, mégis figyelemfelkeltők (ha címsornak használod).
2. Használj szabvány betűtípusokat
A Google fonts segítségével könnyedén tudjuk szűkíteni a kört a betűtípusok között, válasszuk ki a Sans Serif családot. Ebben a csoportban olyan típusokat találsz, amelyek nem tartalmaznak semmilyen díszítő elemet, hosszabb szövegben is lehetővé teszik a gyors és könnyed olvasást.
Természetesen én is támogatom, hogy a címsorokat kiemeljük valamilyen szinten, ám ez nem mehet az összhang rovására. A modulcímek részére is érdemes olyan típust választani, amely valamilyen szinten kapcsolódik az oldal tematikájához (egy rajongói oldalra ne válassz kézzel írt szövegre hajazó betűtípust, hiszen ott a hangsúly a minőségen van, te sem olvasnál szívesen egy olyan ismeretterjesztő magazint, ahol a szabvány betű mellett egy handwritten stílusú sor is bekerül. Nem odavaló.).
3. Korlátosság
Szintén egyik alapköve az igényes oldalnak az, hogy a sorok nem lógnak ki a modulból, és nem is érnek a modul szélégi. Ez olyan, mintha egy könyv szövege egészen a lap széléig érne, zavaró és kicsi igénytelenség érzését kelti az olvasóban. A CSS formázás segítségével könnyedén be tudod állítani, hogy mekkora legyen a távolság a modulok széle és a szöveg között (padding: érték px;).
4. Olyan karakterek válassz, amely jól alkalmazkodik a formázáshoz
A látogatóid különböző felbontású monitorokról, esetleg tabletről vagy telefonról fogják látogatni az oldalad, így neked muszáj tekintettel lenni rájuk. Telefonról teljesen más felbontásban jelenik meg a szöveg (gyakran az általad kiválasztott típus nem is kompatibilis telefonnal, így lecseréli egy szabványra), ezért olyan típust válassz, amely ha kicsinyítik sem válik olvashatatlanná.
Ide tartozik még, ha betűformázást végzel ezeken a szövegeken, szintén legyen olvasható és ne zavaró a megjelenés. A Google fonts erre remek lehetőséget ad, ha rákattintasz a betűtípus nevére egy olyan lapra navigál, ahol megnézheted különböző formázások mellett hogy néz ki a betű.
5. Használt könnyen értelmezhető betűtípust
Sok olyan betűtípus van, amely megkönnyíti a szöveg olvashatóságát. Erre a legjobb példa a nagy I betű és a kis l betű közötti hasonlóság. Bár nem hiszem, hogy ez egy jól felépített kódolású kinézetnél probléma lehet, ugyanis kicsi rá az esély, hogy az ember egy betű helyett másikat olvas (így nem is értelmes a szó) (és tudom, hogy vannak olyanok, akik olvasási nehézségekkel küzdenek, most nem rájuk gondolok). De, az előbb említett példák mellett hasonlóság jelenhet meg a r és a v, valamint az n, és az m betűnél is, ami tényleg zavaró lehet.
Ide tartozik még, hogy bár a Google Fonts-ot használjuk nagy szeretettel, nem minden betűtípus képes arra, hogy a magyar ABC-ben található összes betűt megjelenítse. A leggyakoribb nehézségek az ö,ü,ó,ő,ú,ű betűkkel adódik, de erre is van egy szuper tipp. Ha a betűtípus kiválasztás során rámész a „Customize” részre, ott (ha szerencséd van) ki tudod választani a „Latin Extended” kis négyzetet, ez a bővítés pedig tartalmazza a magyar ABC összes betűjét.
6. A nagybetűs szövegek
Szerintem a nagybetűs szövegeket célszerű címek, alcímek, menüpontok és néhány fontosabb kiemelésnél használni, de összefüggő szöveget nem érdemes ilyen stílusban megírni. Egy kutatás már bebizonyította, hogy a nagybetűs szöveg olvasása sokkal több energiát vesz igénybe, mint a kisbetűs szöveg olvasása, ez pedig okot adhat arra, hogy a látogató ne jöjjön vissza az oldalunkra.
7. A sorok közti távolság
A kódolásban a két sor közötti eltolódást line-height-nek nevezzük. Ez az érték azt mutatja meg, hogy hány pixeles rés legyen két sor között. Ha ez az érték kicsi, a szöveg összeolvad, könnyen olyanná válhat, mint egy soha véget nem érő mondat, és első ránézésre még visszataszító is lehet egy ilyen megjelenésű szöveg. Viszont, az sem jó, ha a sorok közti eltolás magas, így első ránézésre egy pár mondatos bekezdés egy fél oldalas szövegnek is tűnhet, amit lehet nem mindenki fog elolvasni. Azt mondják, hogy a jó sortávolság 1-2 px-el nagyobb, mint maga a betűméret. Tehát, ha a font-site: 10px;, akkor a line-height: 12 px;.
8. Színek, kontraszt, olvashatóság
Szintén egy alappillér, hogy hiába választasz megfelelő betűtípust, hiába állítasz be minden értéket, ha egy olyan háttérszínt vagy színt adsz a szövegnek, ami olvashatatlanná teszi azt. Én ezt elsőként egy középiskolás prezentációs feladat során hallottam, és őszintén, nem gondoltam, hogy ezt el kell mondani. De mégis, voltak olyanok, akik a fehér háttére világos színű betűket használtak, és a fekete háttérre sötétkékkel írtak. Nem szép, nem néz ki jól, olvashatatlan. Lehet játszani a modulok hátterével, de egy világos háttérhez értelemszerűen sötét legyen a betűszín, és fordítva is. Itt teljesen érvényes az az állítás, hogy: ha neked zavaró, a látogatónak is az lesz.
9. Kerüld az oda nem illő színeket
Ha már kiválasztottad a design alapszíneit (ez általában 3 max 4), még véletlenül se akarj más színeket belecsempészni a betűformázás során. Lehet játszani sötétebb-világosabb árnyalatokkal, de egy már kész kinézetet nem kell még jobban „feldobni” egy sokadik színnel, ami egyedül csak pl: a félkövér betűnél jelenik meg. A neten szerencsére rengeteg színkombináló oldal található, ahol kedvedre lehet variálni a színeket, de mégis összhangban maradnak.
10. Változatos betűméret, figyelemfelkeltés
Nem egy olyan oldalt láttam már, ahol azzal próbálják felkelteni a látogató figyelmét, hogy egy-egy sort nagyobb betűmérettel írnak, esetleg valami idióta keretet is tesznek egy sornak. Bár ezt leginkább a (szerintem) nem jól dizájnolt, valamint nagyon eladni akaró oldalak alkalmazzák, de személyes blogokon és rajongói oldalakon is láttam már hasonlót. Ha szeretnéd, hogy iratkozzanak fel a hírleveledre, esetleg töltsék le valamelyik általad tervezett kis kitölthető valamit, vagy hogy regisztráljanak az oldaladra, akkor a tartalommal akard megfogni őket, ne pedig a képükbe tolni.
Remélem valamennyire hasznosnak találtátok ezt a kis összefoglalót, és van benne olyan tipp, amin még nem gondolkoztatok el.:) Annakidején több webdesign témájú külföldi oldalt olvastam, így a java részét én is csak onnét ismertem meg. Mindenesetre, néhány aprósággal még szebbé és esztétikusabbá lehet tenni egy weblapot. Érdemes próbálkozni.:)