Webes tipográfiát tervezni

Innen: Hogyankell.hu

A lap korábbi változatát látod, amilyen JViki (vitalap | szerkesztései) 2014. december 3., 14:22-kor történt szerkesztése után volt. (Új oldal, tartalma: „== Hogyan kell webes szöveget grafikailag megtervezni? == right A webes tipográfiában a legnagyobb nehézséget azt jelenti, hogy ami a…”)
(eltér) ← Régebbi változat | Aktuális változat (eltér) | Újabb változat→ (eltér)

[szerkesztés] Hogyan kell webes szöveget grafikailag megtervezni?

Webes tipografia.jpg

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.

[szerkesztés] 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.

[szerkesztés] 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.

[szerkesztés] Amire szükséged lehet

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

[szerkesztés] 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.)!

[szerkesztés] Források, hivatkozások

Az oldal szerzői

JViki