Web Page Design for Designers

 


 

 

Web oldalak esetében a jó tipográfia hasonlóan fontos, mint bárhol máshol. Jóllehet papír helyett képernyőn jelenik meg, ugyanúgy tetszetősnek és jól olvashatónak kell lennie.

Minden esetben, ha betűket kell megjeleníteni - legyen az kiadvány, csomagolás vagy televízió - a tervezőnek a médiumhoz illeszkedő módon kell felhasználnia technikáit. Az a címsor stílus, ami jól mutat az újságban, nem feltétlenül alkalmazható egy plakát esetén. Az újságot mindig szemből, közelről olvassuk, ezért a szöveg tetszőlegesen kis betűközök esetén is olvasható marad. A plakátokat leggyakrabban valamilyen szögből látjuk, ami bizonyos mértékben eltorzítja a betűket. Nagyobb betűközökkel könnyebb az egyes betűket, illetve szavakat felismerni.

A képernyőre tervezésnek eleve megvannak a maga problémái. Ezekhez hozzávéve a web oldal rugalmas természetét - különböző számítógépeken és eltérő méretű képernyőkön is működnie kell -, a nehézségek még komolyabbnak tűnnek. A tervező feladata ezeket a problémákat megérteni és kezelni, némi szabályzási lehetőséget nyerve akkor, amikor minden egyéb változik.

A web oldalak 90 százaléka

nincs megtervezve

A böngészők a szöveget

megfelelő betűtípusban és

ésszerű méretben

jelenítik meg,

de lényegesen kevesebb kontrollal,

mint egy ősi írógép!

 

 

 

 

A tipografikus színhasználat hagyományos

A 'szín' tipográfiai értelemben a fekete és fehér

technikája nem alkalmazható jól

betűk relatív szürke árnyalatait jelenti.

web oldalak esetén a betűtípusok és

A web oldalakon természetesen használhatunk

betűméretek hiánya és amiatt,

igazi színeket is hasonló elkülönítés és

hogy az elérhető méretek némelyikében

kontraszt elérése érdekében.

a betűk igen rosszul mutatnak

Használjunk színeket hierarchia ábrázolására!

 

 

 

Az első probléma az, hogy a sorok túl hosszúra nyúlnak. Nyomtatásban összefüggés van a sorok hossza és egymástól való távolsága (sorköz, 'leading') között. Ha a sor túl hosszú és a sorköz túl kicsi, a sor végéről nehéz a következő elejére ugrani, gyakran kihagyunk, vagy kétszer olvasunk el valamit. A nyomdász használhat másfél vagy dupla sorközt a probléma megelőzésére, de a web oldalon ez nem ilyen egyszerű. A HTML (egyenlőre) nem ismeri a sorköz fogalmát.

Nincs kézenfekvő lehetőség a sorköz beállítására, de korlátozhatjuk a sorok hosszát. A 'BlockQuote' használatával szélesebb bal margót nyerhetünk, táblázatok ('Table') segítségével pedig keskenyebb sorokba rendezhetjük a szöveget.

Az alapértelmezett 'lágy' sortörés ('word wrap') helyett beszúrhatunk 'kemény' sortörés jeleket is ('<BR>'). Ilyen módon röviden tarthatjuk a sorokat és kiigazíthatjuk a szöveg jobb szélének 'egyenetlenségét'.

Nagyobb betűméretű szóközöket illesztve a szövegbe növelhetjük a sorok távolságát, a '<FONT SIZE=+1> </FONT>' segítségével. Ezt legjobb a sor végén, a '<BR>' előtt beszúrni. A 'SIZE=+1' értékét természetesen növelhetjük.

A HTML lehetőséget nyújt hierarchikus címsorok alkalmazására. Ezek félkövérben jelennek meg, méretük pedig a szinteken belül relatív.

Azonban ügyelnünk kell arra, hogy jól is nézzenek ki. Egy fontos különbségre kell figyelni: bizonyos betűtípusokat speciálisan képernyőre terveztek, míg a többi egy alap betűminta alapján történő számítás eredménye.


Vegyük észre, hogy mennyivel jobban olvashatóak
a képernyőfontok, mint a nyomtató-betűtípusok képernyőn megjelenő verziói.

 

Képernyőre tervezett betűkészlet esetén a készítője minden egyes betűt képpont szinten kidolgozott, hogy az a képernyő rácsába illesztve jól mutasson. Ezek a betűkészletek meghatározott méretekre készülnek, pl. 8, 9, 10, 12, 14 stb. pont magasságúra. Ha ettől eltérő méretet adunk meg, az eredmény 'számított' betűforma lesz, ami ugyan megközelítőleg a kívánt nagyságot, ám elveszíti a tervezés minden finomságát.

A hagyományos nyomdai betűtípus képernyőre való adaptálása közben a tervezőnek a lehető leghűségesebben kell megőriznie a betű eredeti formáját, a 'képernyő-szimpátia' rovására.

 

 


 

 

 

A dőlt betűk nem igazodnak

a képernyő négyzetrácsához,

ezért ha csak lehetséges,

kerüljük használatukat!

A félkövér betű gyakran számítási folyamat eredménye, ami további képpontokat helyez el a betű körvonalai mentén. Ha 'nem standard' betűméretet ezzel a folyamattal kombinálunk, a dolgok kellemetlenné válnak és ebbe sajnos bele kell törődnünk web tipográfia esetén. Nem csak a karakter alakja szenvedi ezt meg, hanem a 'tracking' és az egalizálás is.

A dőlt betűket legjobb elkerülni. Mivel a képernyő négyzetrácsába kényszerülnek, különösen kis méretben igen rosszul nézhetnek ki.

Sokan képeket alkalmaznak címsorként. Ezeket Photoshop, vagy egyéb grafikus program segítségével lehet létrehozni és GIF formátumban elmenteni. Általában jobban néznek ki, mint a hagyományos betűtípusok, és tágabb teret kínálnak az egyéni fantáziának. Ezzel szemben tovább tart a letöltésük, és fennáll a lehetősége annak, hogy a felhasználó nem tud, vagy nem akar grafikákat megjeleníteni a számítógépén. Emiatt szöveget tartalmazó képek esetén különösen fontos az 'ALT' használata, így a címsor kép nélkül sem veszíti el funkcióját.

H T M L  B E T Ű R I T K Í T Á S


A K Á R  I L Y E N  S Z É L E S

Tipográfiai trükkök - mint például betűköz változtatás- megvalósítása nehezebb HTML-ben, mivel csak egy szóközt enged meg bármely két betű között. Egy szón belül ritkíthatjuk a betűket a közéjük illesztett szóközökkel, de ebben az esetben a szavak között már két, vagy több szóközre lenne szükség. A nem törhető szóköz ('&nbsp;') használatával szúrhatunk be további közöket karakterek, illetve szavak közé. A sorok függőleges széthúzására a '<BR>' és a '<P>' használható.


Ez a HTML választóvonal nem mutat jól
sötétkék háttéren.

 

 

 

 

 

A Photoshopban létrehozott
választóvonalak akármilyen színűek lehetnek
és a file is igen kis méretű.

A HTML-ben vízszintes választóvonalakat is használhatunk szövegrészek elválasztására. A nyelvművelők gyakran helytelenítik a választóvonalak használatát a hagyományos tipográfiában. A HTML-választóvonalak inkább gyakorlati, mint stilisztikai célt szolgálnak, jóllehet, néha csak dekorációként színesítik az oldalt. Vigyázzunk arra, hogy a böngészők eltérően kezelik a választóvonalakat. A Netscape feltételezi, hogy a háttér színe az alapértelmezett szürke, és olyan 3D-s formában jeleníti meg a vonalakat, ami nem feltétlenül néz ki jól más háttérszínnel. Természetesen használhatunk képet is választóvonalként, ami, ha csak egyszínű, nem is növeli számottevően a letöltési időt, mivel az ilyen képek jól tömöríthetőek. A kép (tehát a vonal) szélessége HTML-ből is változtatható, az 'IMG SRC Width' állításával, viszont ez nem történik meg automatikusan a böngésző ablakának átméretezésekor, szemben a standard választóvonalak ('<HR>') működésével.

Egy nagybetű megjelenítéséhez függőlegesen minimum hét pixel szükséges. Kisbetűk esetén, a felfelé vagy lefelé nyúló részek miatt kilenc képpont kell. Tehát, egy csupa nagybetűt tartalmazó betűkészlet lehet hét pixel magas, míg egy normál betűkészletnek, kis- és nagybetűkkel már legalább kilenc pixel magasságúnak kell lennie.

Macintosh és PC
képernyőfontok méretének
összehasonlítása

 


 

 

A Macintoshon közvetlen összefüggés van pixelben és a nyomdai pontban mért magasság között - egy kilenc pixel magas betűkészlet gyakorlatilag kilenc pontos betűnek felel meg. A Macintosh képernyője 72 pixel/inch felbontásra épült, így minden pixel egy pont méretű négyzet. Valamilyen program által kirajzolt vonalzót összehasonlítva a képernyőhöz tartott igazival, nem sok különbséget látunk. Vegyük figyelembe azonban, hogy a többféle felbontásra képes 'multi-scan' monitorok megjelenése óta ez az elv már nem mindig igaz. Ugyanazon a monitoron 640x480-as felbontásról 800x600-ra váltva a pixelek arányosan kisebbek lesznek, ezzel a vonalzón ábrázolt inch vagy centiméter is.

A PC-s betűkészletek másképp működnek, mivel ott a WYSIWYG elvétől eltérően a képernyőn ábrázolt egy inch valójában kb. 96/72, azaz 1.3 inch méretű. Ennek az az oka, hogy a Windows egy inchet 96 pixel méretűként kezel. 14 collos, 640x480-as felbontású VGA monitoron a pixel nem lehet kisebb, ezért inchnek kell nagyobbnak lennie. Emiatt a PC-s betűk mérete kb. 3/4-e a Macintoshoz képest. Egy 9 pontos PC betű fizikailag 12 pontos Macintosh betűnek felel meg.

A 14 collos PC monitoron 800x600-as felbontás esetén kisebbek a pixelek, ezért a 'virtuális' inch jobban megközelíti a valóságos méretet.

Mindennek az a következménye, hogy a PC-n a 7 vagy 8 pontosnak definiált betűt helyesen meg lehet jeleníteni, míg Macintoshon a legkisebb betűméret a 9 pontos. Ugyanolyan képernyő felbontáson a kettő gyakorlatilag ugyanakkora. A különbség csak nyomtatásban látható, ahol a PC-s betű a valójában korrekt, 8 pontos méretre változik, míg a Macintosh betű papíron is 9 pontos méretű marad.

Ezeken az oldalakon a bal oldali hasáb

rögzített szélességű, a jobb oldali nem,

ezért az ott látható szöveg a

böngésző-ablak szélességének

megfelelően töri a sorokat ('word wrap').

Egy átlátszó, ezért láthatatlan kép

'hidraulikus emelőként' rögzíti a

bal hasáb szélességét.


Még egy tényezőt érdemes megfontolni. A PC-s felhasználók bizonyos felbontások esetén, választhatnak 'nagy' vagy 'kis' betűméret között. A 'nagy' betűméret nagyobb felbontás esetén hasznos, ahol a normál méretű szöveg már nem olvasható kényelmesen. Emiatt a szöveg méretének a mellette elhelyezkedő képhez viszonyított aránya nagyon eltérhet gépenként. Különösen 'hard' oldalak esetén fontos ezt a lehetőséget is figyelembe venni. Azt a trükköt vethetjük be, hogy vegyesen használunk 'hard' és 'soft' elemeket az oldalon, a 'soft' elemek segítségével feltöltve a többi, rögzített rész között esetleg keletkező hézagokat. Ne féljünk a hely kreatív kihasználásától - különösen rugalmas területről van szó.

 

menunext