Webes tipográfiát tervezni

Hogyan kell webes szöveget grafikailag megtervezni?

A webes tipográfiában a legnagyobb nehézséget azt jelenti, hogy ami az egyik képernyőn jól néz ki és tökéletesen jelenik meg, az egy másik monitoron másképpen is mutathat a képernyő vagy a böngésző beállításainak függvényében. Bár egy weboldalt a tipográfia szemszögéből tökéletesen kivitelezni szinte művészet, az alábbiakban összefoglaltuk azokat az általános szempontokat, amelyekre mindenképp érdemes figyelni.

Lépések

1. Fő az olvashatóság! A webes szöveg lehet bármilyen szép – értéktelenné és hasztalanná válik, ha nem lehet első ránézésre elolvasni a szavakat. Ezért a betűtípus, szín és minden más tényező kialakításánál az olvashatóságnak kell lennie az első szempontnak, a dizájn csak ezután következhet. Jó teszt lehet, hogy egy ismeretlen szöveg ugyanolyan hosszúságú bekezdéseit a különböző megjelenítési módok mellett milyen gyorsan lehet elolvasni – azt válasszuk, amelyet a legkönnyebben tudják feldolgozni az emberek.
2. Ismerd meg a korlátaidat! A web hőskorában a CSS1 specifikáció még csak arra adott lehetőséget, hogy a honlap készítői egyetlen névvel hivatkozzanak a használni kívánt betűtípusra. Ha az olvasó számítógépén ez a font nem volt telepítve, helyettesítő fontok illetve általános fontcsaládok megadásával lehetett szabályozni, hogy hozzávetőlegesen hogyan nézzen ki a weboldal – az eredmény azonban nem mindig volt tökéletes, és a rendelkezésre álló „web-safe” fontok száma is korlátozott volt. A későbbi CSS specifikációkban lehetőség nyílt arra, hogy a fontokat hivatkozásként adják meg a webfejlesztők, így az letöltődik a honlap megnyitásakor. Azonban ez sem jelent száz százalékos megoldást, mivel a különböző böngészők eltérő formátumokat támogatnak (EOT, TTF/OTF, WOFF, SVG). Ezért a legjobb megoldás olyan betűtípust választani, ami sok formátumban elérhető, de emellett a biztonság kedvéért érdemes továbbra is megadni a helyettesítő és általános fontcsaládokat is– bízva abban, hogy többnyire azok a betűk jelennek meg, amelyeket kiválasztottunk.
3. Legyen a kenyérszöveg az alap! A kenyérszöveg (body text) teszi ki egy-egy írás legnagyobb részét, ezért a használni kívánt betűtípusok kiválasztását ezzel érdemes kezdeni. Olyan betűtípust válasszunk, amely kis méretben (10 pixel) is jól olvasható. Ehhez párosítsd aztán a többi stílusban használni kívánt betűtípust (címek, esetleg jegyzetek, idézetek stb.). További tanácsok a megfelelő betűtípus megtalálásához
4. Figyelj a kontrasztra! Minél kontrasztosabb a szöveg, annál olvashatóbb – és annál könnyebben értelmezhető. Ha nem is ragaszkodunk a fehér háttér-fekete szöveg párosításhoz, azt mindenképp ellenőrizzük, hogy a szövegek minden esetben (a honlap minden részén) elég jól elválnak-e a háttértől.
5. A méret is lényeg! Nem keltünk jó benyomást az érdeklődőkben, ha úgy érzik, olvasószemüvegre van szükségük a monitoron megjelenő szöveg elolvasásához. Ezért a betűméretet sehol se állítsuk 10-12 pixelnél kisebbre, sőt, ha kétségeink támadnak, mindig inkább a nagyobb betűméretet válasszuk. A betűméret természetesen a betűtípustól is függ (bizonyos fontok ugyanakkora méret mellett is nagyobbnak tűnnek), de nem kell megijedni attól sem, hogy akár 14-16 pixelesre állítsuk a betűk nagyságát. A címek nagyságánál általában arra kell figyelni, hogy ne legyenek sokkal nagyobbak a szükségesnél, vagyis annál, ami még kellően irányítja, vezeti az olvasó szemét és érdeklődését.
6. Alakíts ki világos hierarchiát! A címek, fejezetcímek, alcímek rendszerében még a tervezés legelején alakítsunk ki egy következetes struktúrát, amit minden esetben követhetünk. A különböző funkciójú szövegeket nem csak a betűmérettel és a kiemelésekkel különböztethetjük meg, hanem akár eltérő betűtípust is választhatunk a különböző stílusokhoz. Az összeillő karakterek megtalálása nehéz feladat, érdemes sokat kísérletezni.
7. Állítsd be jól a térközöket is! Ha jól állítjuk be a sorok közötti üres terület nagyságát, akkor a szövegünk könnyebben olvasható, a szem egyszerűen tudja követni az egymást követő betűket. „Ökölszabályként” azt tanácsolják, hogy állítsuk a CSS-ben a line-height értéket legalább a betűméret 140-150 százalékára. Ha a kenyérszövegnél kisebb méretű szöveget használunk, akkor lehet kisebb a térköz, nagyobb méretű betűk mellett azonban arányaiban nagyobb térközt is érdemes használni.

Tippek

• A szöveg kontrasztosságát színes weboldalakon is könnyen ellenőrizhetjük, ha csinálunk egy képernyőképet, majd megnyitjuk egy képszerkesztő programmal, és a kép megjelenítését szürkeárnyalatosra állítjuk. Ha így is jól olvasható minden szöveg, megfelelő a kontraszt.
• A háttérszín és a betűszín kiválasztásánál legyünk tekintettel a színtévesztőkre – ma már könnyen találhatunk olyan online teszteket, amelyekkel ellenőrizhetjük, hogy a különböző típusú színlátási zavarok mellett hogyan néz ki a honlapunk. Itt is figyeljünk a kontrasztra!
• Nem csak a sorok között, hanem a betűk között is van térköz – ezt azonban a betűméret és a fontkészlet általában jól szabályozza a kenyérszövegnél. A címeknél azonban érdemes lehet 1-2 pixellel növelni a betűk közötti távolságot, ez is hangsúlyosabbá teszi a megjelenést.
• A honlapkészítésnél használt layout vagy drótváz mintájára érdemes egy „tipográfiai tervet” készíteni, amelyben világosan látszik, hogy a különböző stílusú és elhelyezésű szövegek hogyan fognak megjelenni. Így jobban áttekinthető a hierarchia, érezhetőbb a tipográfia által közvetített általános benyomás, valamint ellenőrizhetőbb a színek és a kontraszt beállítása is.

Amire szükséged lehet

• Sokféle formátumban rendelkezésre álló web fontok
• Idő, türelem és kísérletező kedv

Figyelmeztetések

• A webes szöveg tervezésekor el kell fogadnunk, hogy a szöveg nem mindig úgy fog megjelenni, ahogy megálmodtuk. A webes tipográfia részben arról is szól, hogy tudjuk: a megjelenés bizonyos összetevőire milyen keretek között van befolyásunk.
• Ne csak a betűtípus kiválasztásával foglalkozz! Ahogy a fentiekből látszik, a (webes) tipográfia sokkal több a font kiválasztásánál, ráadásul az összes stílushoz tökéletesen harmonizáló karaktereket rendelni szinte művészi feladat. Ezért ha kevesebb gyakorlattal bírsz e téren, inkább menj biztosra, és használj elterjedt fontokat – ezek biztosan jól olvashatók, ami önmagában is előnyt jelent. A betűtípusok kiválasztásánál megspórolt időt inkább fordítsd a többi lépésre (megfelelő hierarchia, kontraszt stb.)!

Források, hivatkozások

• A „praktikus” webes tipográfiáról
• Az I Love Typography útmutatója

Az oldal szerzői

JViki