Hogyan szoktátok áthidalni azt a problémát, hogy a weboldalon használt betűtípus nincs benne az alap windows szettben?

1. Alapvetően websafe fontokat használnak, tehát amelyek a legtöbb oprendszerben megtalálhatók, vagy jól helyettesíthetők. (Arial, Helvetica, Verdana, Times New Roman, Courier, stb…)

2. A dizájn elemeknél – pl. fejléc – gyakori, hogy a szöveget grafikával, képpel helyettesítik. (Lásd pl. a gyakorikerdesek.hu fejlécét.)

3. A CSS3 lehetőséget ad a betűtípusok „embedálására”, így azt letölti a szerverről. Viszont régebbi böngészőkön ez nem működik.

4. Lehetőség van ilyen-olyan trükközésre. Pl. a szöveget lecserélni egy flash-re, mert ott ugye tudod a flashben embedálni a betűk képét.

Amúgy hol akarsz extra fontot használni? Statikus vagy dinamikus tartalomnál?

Mint írtam fejlécben képként érdemes beszúrni. Statikus tartalomnál úgyszintén (pl. egy plakát). Dinamikus tartalom – fórum, számláló, CMS-el szerkeszthető tartalom – esetén meg jók az alap betűtípusok. Ha nem, akkor a terv rossz.

Először tisztázzuk azt, ami a kérdésre irányul:

A betűtípus nem dizájn formáló eszköz, illetve nagyon rosszul tud elsülni, ha arra akarja valaki használni, a fő szempont rovására. Mi a fő szempont? Az olvashatóság. Használhatsz akármilyen csilli-villi betűtípust, ha olvashatatlan. Ilyen szempontból az általános fontok nagyon jók. Menjünk bele kicsit a részletekbe:

Általános elv:

A proporcionális (arányos) betűtípusok – ahol a W sokkal szélesebben jelenik meg mint az i betű – sokkal jobban olvashatók, mint a fix szélességűek.

A talpatlan (sans-serif) betűtípusok általában sokkal könnyebben olvashatók monitoron – főleg kikapcsolt, vagy nem jól beállított élsimítás mellett –, mint a talpas (serif) betűtípusok, viszont nyomtatásban a talpas betűk rendezettebb képet adnak, könnyebben olvashatók.

Tehát honlapon, hosszabb szövegeknél a legjobb proporcionális, sans-serif betűtípust használni. Ettől eltérni erősen indokolt esetben érdemes, de ehhez nem árt, ha kellően kifinomult az ízlésed. (A rövid szövegek, címek esetén az olvashatóság ugye nem olyan jelentős mértékben sérül, tehát ott már inkább lehet dizájnként használni a betűtípusokat.)

Proporcionális sans-serifből több választási lehetőség lehet. Az egyik a Verdana, ami kicsivel szélesebb betűkkel dolgozik, így vékony betűk halmozódása esetén szebb képet ad, viszont Windows specifikus. A másik az Arial, ami szintén Windows specifikus, illetve a Helvetica, amely szinte megszólalásig ugyanazt a látványt nyújtja (nota bene az Arial is belőle származik.)

A betűtípus meghatározásához érdemes CSS-t használni, mert ott meg lehet adni azokat a betűtípusokat, betűcsaládokat, amelyek a betűtípus hiánya esetén alkalmazandók. Így sokkal inkább lehet az eltérő operációs rendszerek alap betűtípusainak különbözőségéből fakadó problémákat.

A két leggyakrabban alkalmazott betűtípus deklaráció CSS-ben:

Verdana, Geneva, Helvetica, sans-serif

Arial, Helvetica, sans-serif

A másik tényező a stílus. A dőlt betűk nagyon olvashatatlanok tudnak lenni. A vastag betűk is fárasztják a szemet. Tehát alapból érdemes normál betűképet használni. A félkövér és dőlt stílus így nagyon jól használható kiemelésre.

Persze nem csak a betűtípus járul hozzá a jó olvashatósághoz, hanem a szöveg jó tördelése, amennyiben szükséges a fontos szövegrészek kiemelése is. A színek is fontosak. Lehetőleg legyen a szöveg kontrasztos. Érdemes kerülni a szöveg mögötti háttérképet. (Mert van érvényesül, de akkor rontja az olvashatóságot, vagy nem rontja az olvashatóságot, de akkor nem is nagyon érvényesül. Maximum textúra jellegű hátteret lehet használni, de én személy szerint azt is kerülném.) A sötét alapon világos betűk sem annyira elegánsak, mint fordítva. A legjobb a fehér háttér - fekete betű páros. Viszont a fehér nem baj, ha inkább nagyon világos szürke, a fekete meg nagyon sötét szürke. Így nem olyan éles a kontraszt.

Egy kis elemzés a honlap többi részéhez:

Felejtsd el a kereteket (frameset). Nem túl szép látvány és a keresők sem szeretik, illetve okoznak gondot. Pl. a kereső a belső oldalon fogja megtalálni a keresett szöveget, amit megnyitva a menü és fejléc nélküli oldal fog megnyílni ( így: [link] ) A navigációt is meg tudja zavarni. (Sokan szeretnek egyszerre több ablakban navigálni. Így viszont a Ctrl+klikk megint megöli a feljécet és navigációt.)

A teljes szélességű honlap nagyon bosszantó tud lenni mondjuk egy HD monitoron. Mivel túl hosszúak lesznek a sorok, nagyon nehezíti az olvasást. Olyan se vége, se hossza hatást kelt. Inkább legyen az oldalad fix szélességű (ajánlott szélesség: 960-1000 pixel körül), és az legyen középre igazítva. Lásd: gyakorikerdesek.hu

Legyen nagyobb margó az oldal széle és a szövegek között. Így az embernek olyan érzése van, hogy a menüpontok szinte kiesnek az oldal szélén. A belső szöveg és a menüpontok szövege szinte összeér. Semmi margó, semmi határozott határolóvonal nincs közöttük.

Legyen valami dizájn is. A háttérképen kívül minden csak szöveges. Nekem ez így túl sötét. A fa mintázat meg valahogy nagyon nincs összhangban az oldal tartalmával (testmozgás, edzsés). Valami életvidámabb, dinamikusabb megjelenés kellene.

A menüpontok szebben néznek ki nagy kezdőbetűvel. A címsoroknál meg kvázi kötelező pl: miért a fegyenc? helyett Miért a fegyenc? Én magában a fejlécben is nagybetűssé tenném. A kisbetűs formának olyan önlekicsinylő jellege van.

A fix betűméret olvashatatlan. De erről ugye már írtam. Kerüld a különböző betűtípusok keverését is, ha lehet. Vagy legalább harmonizáljanak valamennyire.