Tipográfia a weben

A honlapok fejlesztéséhez hiányoznak azok a segédeszközök amik egy DTP programban (InDesign, Quark) megtalálhatóak. De van azért néhány lehetőség.

Egy elrendezésben ahol többféle betűfajta, méret és vastagságú betű van könnyen átláthatatlanná tehető ha nem fordítunk kellőképpen figyelmet a kialakításra. Létezik néhány útmutató amiknek a követésével egyszerűen teremthetjük meg a szöveg harmónikus olvashatóságát. Egyrészt lehet egy egységes fokozatot használni a különböző betűméretek és súlyok között. Másrészt az alaprácsot lehet alkalmazni az oszlopok között és a képeknél amik a szövegbe kerülnek.

Nyomdai terméknél ez egyszerű dolog mert egy kiindulási rácsra rakják a tipográfiai mintákat amit akkor használnak amikor a képeket bevágják. A weben nincs ehhez hasonló eszköz és a képméreteket előre meg kell határozni illetve beállítani hogy az oszlopok szövegsorai egymással egy sorba kerüljenek. Bár ha a képnek nincs mérete a kódban akkor a css-ben befolyásolható a max-width és a max-height értékekkel.

A tipográfia a weben sokkal bonyolultabb mint a nyomtatványokban. Jól látszódik, hogy a technikusok alakították ki az eszközöket a tipográfusoknak és formatervezőknek. A mértékegységek, terminológia, viselkedés, és a részletes szabályozásnak semmi köze sincs ahhoz hogyan működnek a dolgok egy DTP programban vagy a régi szedőgépeken.

A  különböző böngészők különbözőképpen mutatják az elrendezést és tipográfiát. Vannak kisebb és nagyobb különbségek ahol a nagyobbak a böngészők új és régi verziói okozzák és a kisebbeket a böngészők és platformok köztiek.

A látogatók is állítgatják a böngészőjük beállításait ami nagy különbségeket okozhat a formatervező által elképzelt kinézettől. A látogatók monitor méretei és minőségei is különbözőek ami a formatervező színkalibrált és nagyméretű képernyőjén látható képhez nem sok köze lesz.

A webre a css nyelvet használják a kinézet definiálásához ami a hagyományos, megszokott szedéstechnikától és mértékegységéktől távol esik. A következő tulajdonságok irányítják a tipográfiát:

font-size: Betűméret
font-variant és font-style: Betű stílus
font-family: Betűcsalád
line-height: Sormagasság
text-align: Szövegigazítás egy blokkszerű elemen belül
text-indent: Behúzás
letter-spacing: Szöveg karakterei közötti hézag
word-spacing: Szavak közötti távolság
margin: Tér előtt és után

A betűméretek meghatározásához többféle mértékegység van amiket akár keverve is lehet használni: px, pt, mm, em. Az "em" olyasmi mint a 18-ad rendszer a tipográfiai kvadráthoz de vannak némi különbségek. Az "em" egy decimális mértékegység aminek az alapuló mértéke az utolsó hierarchikus elem mértékéhez igazodik. Ami azt jelenti, hogy egy teljesen üres szöveges oldal két különböző  mérési em értékeket kap. Az egyik foka, amely relatív a body-hoz, és egy típusmagasság ami relatív a mérethez viszonyított mértékhez.

Az "em" segítségével a tipográfiai mintákat egymásra építhetjük. Ha az eredeti mintában betűméret változás van akkor a többi minta is megtartja a harmóniát és arányait.

A gond a képekkel van mivel a publikáló rendszerek pixelben adják meg a méretüket. Egyenlőre még nem tartunk ott, hogy a képek is skálázhatóak legyenek bár vannak próbálkozások. Ha teljesen pixelméreteket használunk a betűkre és képekre egyaránt akkor a tipográfiai minták elvesztik az öröklő tulajdonságukat.

Hogy még bonyolultabb legyen a pixeles dolog van kétféle pixel a webdizájnban. Az egyik a tényleges pixelek a képernyőn amit fizikai képpontoknak is nevezhetünk. A nagyobb felbontású képernyőn mint az iPhone 4 a szélesség 640 és a magasság 960 pixel.

Ha a méretet pixelben adják meg akkor használják a "CSS pixelt" ahol az iPhone csak 320 pixel széles és 480 pixel magas.

A tipográfiai pont (pt) a CSS-ben úgy számítják, hogy 1 / 72 egy inch (ugyanaz, mint a PostScript pont). Egy inch (in) 96 CSS pixelnek felel meg. Így válik egy nyomdai pont (1 / 72) × 96 ≈ 1,333 CSS pixellé.

Döntő különbség a nyomtatott szöveg és a webes szövegek között, hogy a böngészők soha nem tudnak szavakat elválasztani. Vannak elképzelések erről hogyan legyen de nem sikerült még az összhangot megtalálniuk a böngészőgyártóknak. Ez miatt a webes szövegek sorkizárásnál nem néznek jól ki és nem is érdemes használni.

Bizonyos vélemények szerint a szem a sorkizárásos szöveget nem tudja követni a monitoron, az olvasó a sor végére érve nem találja a következő sort. Ezt befolyásolja a szövegblokk szélessége is mivel a keskenyebb hasábokban könnyebb a következő sort megtalálnia a szemnek. A böngészők csak a szavak közötti távolságokat képesek állítani sorkizárásnál: nem tudják a betűk közötti távolságot sem kezelni.

Gutenberg 600 évvel ezelőtt még olyan megoldást is használt, hogy az ólombetűinek a szélessége is változó volt a sorkizárás miatt.

Magyarországon a 80-as évek végéig használtak ólombetűket a nyomdákban.

Egy korábbi poszt a base font size-ról.








Befejezésnek Danny Cooke filmje az egyik utolsó londoni kéziszedőről. A Nobel díjat a mai napig kéziszedéssel állítják elő és ha valaki látott vagy még emlékszik a magasnyomtatással nyomtatott szöveg képre akkor az összehasonlíthatatlanul jobb az akárhányezer DPI-is nyomtatóval nyomott szövegnél.