1 100
szerkesztés
Módosítások
Innen: Hogyankell.hu
Ú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…”
== Hogyan kell webes szöveget grafikailag megtervezni? ==
[[Fájl:Webes_tipografia.jpg|right]]
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 ==
#'''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.
#'''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.
#'''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.). [[betűtípust választani| További tanácsok a megfelelő betűtípus megtalálásához]]
#'''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.
# '''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.
#'''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.
#'''Á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 ==
* [http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15 A „praktikus” webes tipográfiáról]
* [http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ Az I Love Typography útmutatója]
[[Kategória:Internet]]
[[Kategória:Munka-karrier]]
[[Fájl:Webes_tipografia.jpg|right]]
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 ==
#'''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.
#'''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.
#'''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.). [[betűtípust választani| További tanácsok a megfelelő betűtípus megtalálásához]]
#'''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.
# '''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.
#'''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.
#'''Á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 ==
* [http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15 A „praktikus” webes tipográfiáról]
* [http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ Az I Love Typography útmutatója]
[[Kategória:Internet]]
[[Kategória:Munka-karrier]]
