Web tipográfia 3

Az előző két részben összegyűjtött megállapítások után ebben a részben megpróbálunk megoldásokat találni a felsorolt problémákra. Szépen egyenként sorra veszünk mindent amiről szó volt és megpróbáljuk valahogyan kezelhetővé tenni a kétségbeejtő helyzetet.

Konklúziók

Nézzük meg újra milyen megállapításokra jutottunk a web és a papír tipográfiai eltéréseit vizsgálva.

  • a közvetítő média mérete változó
  • a betűk mérete változó
  • a közök mérete változó
  • a sorok hossza változó
  • a színek változnak
  • a betűtípus változó
  • az elhelyezés változó

Figyelembe véve, hogyan hogyan definiáltuk a tipográfiát (miszerint valami ami a fentiekkel dolgozik) mindenki nyugodtan kétségbeeshet. Azon olvasók akik ezen a ponton nem döntenek úgy, hogy erősen elgondolkoznak azon, hogy ezentúl cipők tisztításával fognak foglalkozni szeretnék dobni pár tipográfiai mentőövet.

A közvetítő média

Ezzel nem fogok senkinek semmi újat mondani, de mindenféleképpen idekívánkozik.

  • az oldal statisztikái alapján állapítsuk meg, hogy melyek azok a monitor felbontások amelyet a felhasználóink 95%-a használ
  • ezek közül a legkisebb az amit mindenki biztonsággal meg tud jeleníteni
  • attól függően, hogy mennyire széles skálán mozognak a változatok jó valószínűséggel érdemes lesz a 95%-os rész legkisebb vagy az egyel nagyobb méretére optimalizálni
  • az optimalizálás tipográfiai szempontból most azt jelenti, hogy a fentiekből kihozott szélesség érték-30 pixelben határozzuk meg az oldalunk szélességét
  • vagyis mondjuk ha 1024*768 a legkisebb szereplő felbontás, akkor 990px-ben határozzuk meg a lapunk szélességét
  • jó ha a design kialakításánál gondolunk arra is, hogy várhatóan 1-2 éven belül egy szélesebb verziót kell majd prezentálnunk amint a 95%-ból kiesik a jelenlegi legkisebb

Ennek csak annyiban van köze a tipográfiához, hogy többé-kevésbé lefixáltuk a papírunk méretét. Na, pakolhatjuk rá a cuccot.

Betűméretek

Általános tanácsként azt mondhatjuk, hogy a relatív mértékegységeket (em, %, ex) használjuk. Kis gyakorlat után biztonsággal fogjuk őket kezelni annak ellenére, hogy az öröklés időnként okozhat meglepetéseket.

Közök

A relatív betűméretek használatával általában erre már többnyire automatikusan jó értékeket kapunk. Ha muszáj akkor megpróbálkozhatunk némi finomítással főleg a line-height és a letter-spacing CSS tulajdonságok háza táján.

Sorhossz

Még ha csupa olyan felhasználónk van akiknek a statisztikák szerint 4096*3627-es a legkisebb monitor felbontása akkor sem biztos, hogy érdemes ekkorára venni a weblapot. Egyrészről azért mert ekkora monitor felbontásnál már több mint valószínű, hogy a user csatlakozik a renitenskedők csapatához és nem teljes képernyős böngészőablakkal fog böngészni. Másrészről a webes kommunikáció során foglalkoznunk kell még egy gyengének nevezhető láncszemnek. Ez pedig az emberi szem. Vizsgálatok szerint 45-75 karakter az a sorhossz amit még kényelmesen el tudunk olvasni. Ennél hosszabb sorok esetében elő kell vennünk a mutatóujjunkat, hogy azzal segítsünk a szemünknek, hogy melyik sorban van. Ez két ok miatt nem annyira jó. Egyrészt mert többségünk első osztályos kora óta nem csinált ilyesmit, így nem biztos, hogy eszébe fog jutni, hogy hogy is kell. Másrészt meg maszatos lesz tőle a monitor.

Egyébként ez az oka annak is, hogy az újságok, napilapok hasábokra tördelik a szöveget. Minél kisebb a betűméret annál inkább igaz ez.

Színek

Ez már egy nehezebb ügylet. Anno volt 16 darab szín amellyel a számítógépek dolgozni tudtak. Aztán lett belőle 256, aztán 16 millió, aztán meg annyi, hogy az átlagember már ki sem tudja mondani.

Páran biztos morogni fognak de a magam részéről eléggé háklis vagyok e témát illetően.

… foglalkoznunk kell még egy gyengének nevezhető láncszemnek. Ez pedig az emberi szem.

Először is kíváncsi lennék arra, hogy az emberi szem biológiailag hány szín felismerésére van beállítva. Nincs róla adatom de az a sejtésem, hogy a számítógépek messze túlprodukálják ezt.

Másodszor arra lennék kíváncsi, hogy a biológiai adottságunkon belül hány olyan szín van amit valóban képesek vagyunk beazonosítani. Egy művész valószínűleg nagyon sokat (mondjuk 2-300-at), egy hölgy sokat (50-100), de uraim mi általában olyan kifinomultak vagyunk a színek tekintetében mint egy víziló a balett órán. Fehér, fekete, kék, sárga, zöld, piros, barna, szürke. Körülbelül ezek a színek léteznek egy átlagos férfiember szótárában. A türkiz egy ékszer, a bézs egy süti a ciklámenről meg fogalmunk sincs, hogy mi lehet talán valami tengeri csigafaj.

A múltkor csináltam egy design adoptációt weblapra egy design terv alapján. A munka során a designer egyszer csak azt mondta, hogy az mégse ilyen fehér legyen, hanem valami világosabb fehér. Na erre ledobtam a láncot. Eddig azt hittem, hogy a fehérnél nincs világosabb.

Harmadszor láttam már rémülettől döbbent arcot amikor a halálra finomított csúcsszuper designt megmutattam a megrendelőnek egy átlagosan rossz monitor beállítással.

A fentiekből következően ha csak rajtam múlik akkor maximálisan 4096 színt használok. Ezek azok amelyek leírhatóak a rövid 3 karakteres hexadecimális formában (mint #fff vagy #a33). Ezek közül pedig előnyben részesítem azokat ahol egy érték duplán szerepel (mint #600 és #393 de a #a12 nem)

Ezen felül általánosságban 3-5 színt javaslok egy oldalra és ezt a hármat variálom hátterekre, betűkre és a különböző link állapotokra.

Amiről nem szabad megfeledkeznünk, hogy monitoron jóval kontrasztosabb minden mint papíron. A kontraszt azért fontos, mert a kevéssé kontrasztos szövegeket a színtévesztők, színvakok, rövid és távollátók azaz az olvasóink 70%-a nehezen olvas. Papíron (többek között) ezért terjedt el a fehér alapon fekete írás. A weben használhatunk különböző szürkéket is, jól olvasható, ugyanakkor szép küllemet fogunk kapni.

No lehet a felháborodást befejezni a színekről egyenlőre ennyi.

Betűtípus

A másik kedvenc témám mint már írtam is a betűtípus. A kapott design terveket általában itt támadom meg. A designer átalakít mindent valami egyszerű betűtípusra amitől persze az egész ronda lesz. És akkor kezdődik az alku.

A cikk írása közben csináltam egy kis tesztet, hogy milyen betűtípusokat is használunk a weben. A vizsgált weblapok teljesen önkényesen lettek kiválasztva. Egyrészt fogtam és megnéztem azokat a hazai designnal foglalkozó oldalakat amiket a plastik.hu felsorolt. Ehhez hozzádobtam a 15 jó webes tipográfiai oldalt, valamint találomra még egy-két webes designnal foglalkozó oldalt, így összesen 45 oldal CSS definíciójának eredménye szerepel a felsorolásban. A pontszám azt mutatja, hogy melyik betűtípus hány definícióban szerepelt.

Arial 32 71%
Helvetica 28 62%
Verdana 19 42%
Lucida Grande 8 18% (Mac)
Tahoma 7 16%
Times 6 13%
Georgia 5 11%
Geneva 4 9%
Lucida Sans 4 9% (Lin)
Trebuchet MS 3 7%

Persze a CSS definíciók általában több betűtípust is felsorolnak, mivel azt mindenki tudja, hogy ha a böngésző nem fér hozzá a listában az elsőhöz, akkor továbblép a másodikra, harmadikra és így tovább.

Szóval kedves design gyártók kérek szembesüljetek a ténnyel Arial amink van. Ah igen és ennek a szabad megfelelője a Helvetica. A nevükön és a licenszükön kívül nincs igazán különbség közöttük.

Persze szeretnénk minél többféle felhasználót megfelelően kiszolgálni, így érdemes gondolni a Mac és a Lin felhasználókra is.

Szóval valami ilyesmivel tudunk dolgozni.
body{font-family: ’Lucida Grande’, ’Lucida Sans’, Arial, Helvetica, sans-serif;}

Elhelyezés

A margin, padding with, és float beállítások sietnek a segítségünkre. Körbevágott képek körbefolyatása és hasonló papír eredetből származó ötletek mehetnek a felejtőbe. A nyomtatott médiában a bekezdések behúzása természetes, míg a weben sokszor zavaró. A bekezdések elkülönítésére több lehetőségünk is van a behúzásokon kívül. Kitehetünk mondjuk egy csíkot a bekezdés után (border-bottom), vagy használhatunk a bekezdések elején iniciálékat (:first-letter, :first-line).

Az elhelyezés, elrendezés témakörénél figyelembe kell vennünk azt is, hogy a sorkizárt bekezdések a monitoron (is) nehezebben olvashatóak mint a balra zártak.

Mi még?

A webes tipográfiai rendezkedés során van a fentieken kívül alkalmazhatunk még pár elvet.

  • Ha a címsoroknak (h*) serif betűtípust, az ahhoz tartozó bekezdés szövegének pedig sans-serif betűt adunk meg akkor szép hatásokat érhetünk el
  • Ne használjunk 2-nél több betűtípust
  • Ne használjunk dőlt betűket, monitoron nehezen olvashatóak
  • CSS definíciónkban bíráljuk felül a böngészők alap beállításait, főként a betűméretekre, margókra, paddingre és betűtípusokra vonatkozóan
  • Ha a megrendelő ragaszkodik egy-egy címsor cirkalmas betűihez, akkor a html kódban használjuk a megfelelő h* elemet és az elem háttérképeként adjuk meg a cirkalmas felirat képként elmentett változatát. Ilyenkor ne felejtsük a text-indent értékét -1000em-re állítani, és ezt az oldal keresőoptimalizálással foglalkozó munkatársa előtt gondosan eltitkolni.
  • A linkeket valahogyan emeljük ki vizuálisan is a többi szövegből. Külön pirospont, ha arra is figyelünk, hogy a már látogatott linkek más színnel jelenjenek meg.

Van itt egy jó pdf a témáról

16 thoughts on “Web tipográfia 3

  1. a mélyen tisztelt kolléga okosan megmondta, hogy
    “Szóval kedves design gyártók kérek szembesüljetek a ténnyel Arial amink van. Ah igen és ennek a szabad megfelelője a Helvetica. A nevükön és a licenszükön kívül nincs igazán különbség közöttük.”

    http://www.ms-studio.com/articlesarialsid.html

    és íme valóban csak egy cikkre elegendő apró különbség van közöttük. a kettőt azonosnak nevezni legalább akkora botorság, mint összehasonlítani a gizikét a gőzekével.

  2. neo_21670: Igazad van. Általánosságban a cikkek szövegére értettem ahol a betűméret kicsi és nem észrevehetőek az ilyen különbségek. Köszi a linket jó kiegészítés ide.

  3. Szinekhez:
    Szerintem az is jó (cáfolj meg ha nem), a az elnevezett színeket használjuk, mint: red green gray yellow blue
    (azt a kb 16-ot :-)

    A papíron a fekete, meg azért alakult ki, mert kormos vízzel jól lehetett maszatolni :-)
    A legkontrasztosabb állítólag a kék-sárga párosítás

    A sorhossz meg a változó/változtatható betüméretnél szintén nem lehet megmondani, hogy x pixel/% helyen mennyi betü fér el, sajna. Lásd Ctrl +egérgörgő.

    :first-letter, :first-line, mindenki kedven IE-je azt sem tudja mi az.

    /*
    Volt olyan megrendelő, aki más felbontásnál máshogy tördelődött szövegnél reklamált, hogy
    - Nem úgy néz ki, mint eddig, mi történt?
    - Mondom semmi, csak az internet az nem könyv. Máshol más beállításokkal nézve máshogy néz ki.
    - Nem lehet lerögzíteni, hogy milliméterre ott legyen mindenkinek?
    - De, csak akkor már nem weblap lesz, hanem mondjuk letölthető dokumentum, e-könyv, vagy kép. De attól óvjon téged és látogatóidtól az ég.
    */

  4. Pingback: Mai webdesign tippek 2012. February 7. Tuesday | Amysweb

  5. Pingback: Mai webdesign tippek 2012. February 8. Wednesday | Amysweb

  6. Pingback: Mai webdesign tippek 2012. February 9. Thursday | Amysweb

  7. Pingback: Mai webdesign tippek 2012. February 10. Friday | Amysweb

  8. Pingback: Mai webdesign tippek 2012. February 12. Sunday | Amysweb

  9. Pingback: Mai webdesign tippek 2012. February 14. Tuesday | Amysweb

  10. Pingback: Mai webdesign tippek 2012. February 15. Wednesday | Amysweb

MINDEN VÉLEMÉNY SZÁMÍT!

Email cím (nem tesszük közzé) A kötelezően kitöltendő mezőket * karakterrel jelöljük

A következő HTML tag-ek és tulajdonságok használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>