Mindennapjaink szerves részéhez tartoznak a tipográfiai elemek. Találkozunk velük, ha újságot, könyvet olvasunk, vagy egy weboldalon böngészünk. De, hogy pontosan, mit is foglal magába az a szó, hogy tipográfia és hogyan kell alkalmazni egy weboldalon úgy, hogy minden eszközön egyformán jelenjen meg és jól nézzen ki? Nos, ezt a témakört jártuk körbe ebben a cikkben, reméljük, a hasznodra válik!
Mi is az a tipográfia?
A tipográfia nem más mint egy formatervezői tevékenység, mely a nyomtatott betűkkel foglalkozó szakmai terület. Maga a tipográfia egy egészen szerteágazó szakmának és tudománynak tekinthető, azért fontos megjegyeznünk, hogy egy adott szöveg tartalmának bírálata nem tartozik a tárgykörébe. Egy tipográfiai tervező olyan elemekkel foglalkozik mint a betűtípus meghatározása, a színek, elválasztások, tördelések stb.
Ha szeretnénk máshogy is meghatározni a tipográfia fogalmát, akkor fogalmazhatnánk úgy is, hogy a tipográfia nem más, mint a betűk tudománya, melynek fő célja, hogy különböző vizuális megoldások segítségével lelket öntsön írott szövegeinkbe.
Betűtípusok
Az egyik legismertebb és legfontosabb eleme a tipográfiának a betűtípus, ugyanis a betűk felelnek az esztétikai megjelenésért. Ahogy fejlődött a technológia, úgy lett egyre több és több betűtípus, melyek elkészítése és alkalmazása is sokkal egyszerűbb lett. Nagy általánosságban a betűtípusokat két nagy csoportra osztjuk: a „talpas” és a ”talpatlan” stílusú betűtípusokra. Azonban ezeken kívül természetesen léteznek még más csoportok is mint például a display, monospaced stb. A következőkben megismerkedünk egy kicsit közelebbről a talpas és a talpatlan stílusú betűkkel.
A „talpas” (serif) és ”talpatlan” (sans serif) betűtípusok
Azokat a betűtípusokat nevezzük talpas betűknek (serif), melyeknek úgynevezett betűtalpuk van. Manapság kissé háttérbe szorultak és többnyire a könyvekben találkozhatunk velük, ugyanis az ilyen típusú betűket könnyebb olvasni, így főként nyomtatásban találkozunk velük. A leggyakrabban használt talpas betűtípusok például: a Times New Roman és a Garamond.
A számítógép képernyőjén azonban jobban olvashatók az úgynevezett talpatlan betűk (sans serif), épp ezért, ha weboldalt készítésén/készíttetésén törjük a fejünket, akkor mindenképp talpatlan betűtípust válasszunk. A leggyakrabban használt talpatlan betűtípusok közé soroljuk például a Veranda, Arial és Futura betűtípusokat.
Tipográfiai hiba a magyar abc karaktereivel
Gyakran előfordul, hogy amikor kiválasztunk egy betűtípust, az nem felel meg a magyar abc-nek, tehát nem tartalmazza az ékezetes betűket. Ezt a tényezőt nem szabad figyelmen kívül hagynunk, ugyanis szarvashibának minősül, ha egy egységes szövegben az ékezetes betűkről már messziről látszik, hogy eltérnek az alap típustól. Ez alapvető tipográfiai hiba, melyet nem követhetünk el, legyen szó akár grafikai anyagokról, akár egy weboldalról.
Tipográfia a weboldalon
A weboldalon alkalmazható tipográfia egyértelműen sokkal korlátozottabb a nyomdászatban szóba kerülő betűkészletekhez képest. Fontos mérlegelnünk mielőtt kiválasztjuk a weboldalon szereplő betűkészletet, ugyanis szem előtt kell tartanunk azt a tényt, miszerint fontos, hogy minden böngészőben és eszközön egyaránt ugyanúgy nézzen majd ki a megjelenített szöveg.
Korlátozott számban elérhető betűkészletek
Egy weboldal CSS-ben (CSS: itt állíthatjuk be a weboldalak színét, betűtípusát, elrendezését és más megjelenéshez kapcsolódó elemeit) bármilyen nekünk tetsző fontot (betűtípust) megadhatunk, azonban ezeket a látogatók csak akkor fogják látni, ha a számítógépükön telepítve van az a betűkészlet. Amennyiben nincs, a böngészőjük megpróbálja majd helyettesíteni egy másik betűtípussal a CSS alapján, vagy egyszerűen az alapértelmezett betűtípust fogja használni, ami többnyire a Time New Roman. Pont ezért szorítkozzunk a széles körben elterjedt, alapértelmezett betűkészletek alkalmazására, hogy minden látogatónak úgy jelenjen meg a weboldalunk, ahogy azt mi megalkottuk. A weboldalakon a leggyakrabban alkalmazott betűtípusok például a következők:
- Arial/Arial Black
- Courier/Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
A fentebb felsorolt betűtípusok jó eséllyel meglesznek a látogatóidnak is, így nyugodtan alkalmazhatod őket a weboldaladnál.
Egynél több betűtípus kiválasztása
Nem rossz megoldás lehet az sem, ha a betűkészlet megadásakor felsorolsz még néhányat a biztonság kedvéért, például: kiválasztod a Verdana betűtípust, de megadod mellé még a Time New Roman és a Georgia típusokat is. Ez azt jelenti, hogy a böngésző először a Veranda típussal próbálja majd megjeleníteni a weboldaladat, és ha nem találja, akkor ugrik a Times New Roman-ra, ha ezt sem, akkor pedig a Georgia-ra.
A webes tipográfia kialakítása
A már említett CSS-ben tudjuk kialakítani azt, hogy a weboldalon hogyan nézzen ki a tipográfia. Itt be tudjuk állítani a betűtípus mellett azt is, hogy a betűnek milyen legyen a színe, mekkora a mérete, mekkora legyen a sorok hossza és magassága, milyen betűközöket használjon. Ezek mellett beállítható még a kapitalizáció is, ami azt jelenti, hogy választhatunk a következőkből: minden nagybetű, minden kisbetű, csak a mondatkezdő betűk nagybetűk, kiskapitálisok. Akár még, ha azt szeretnénk, akkor az első sor első betűjét is megkülönböztethetjük a többitől.
Az első betű/elem módosítása
Az ún. first-letter elem használatával a többi betűhöz képest módosíthatjuk a bekezdés első sorának első betűjét. Mivel egy ilyen módosítás általában 3-4 sornyi helyet is elfoglalhat a bekezdésben, ezért ezt a betűt iniciálénak is szokták nevezni.
Kiskapitálisok
A kiskapitális azt jelenti, hogy a betűk ugyan mind nagybetűk, azonban a kisbetűk helyén méretben a kisebb betűk méretének felelnek meg. Sok betűkészlet tartalmaz kiskapitálisokat, melyek akkor lehetnek hasznosak, ha valamit szeretnénk kiemelni, de nem kívánjuk túlzottan ráterelni a figyelmet, ilyenek lehet például a rövidítések.
Sorok hossza
Ahhoz, hogy fent tudjuk tartani a könnyed olvashatóságot, a sorok átlagos hosszát érdemes 80-95 karakter közé optimalizálni. Ugyanis, ha ennél jelentősen több kerül egy sorba, akkor már az olvasónak akár a fejét is mozgatnia kell ahhoz, hogy követni tudja a szöveget. Előfordulhat, hogy emiatt megerőltetheti a szemét, mely a szöveg nehezebben történő olvasásához és fejfájáshoz is vezethet. Érdekes tény, hogy a gyerekek a rövidebb, míg a felnőttek a hosszabb sorokat preferálják inkább.
Sorok magassága
A sormagasság alatt a sorok közti függőleges távolságot értjük, ha ezt egy kissé megnöveljük a böngésző alapértelmezett beállításához képest, akkor könnyebb olvashatóságot és szellősebb szöveget kapunk. Arra azonban figyeljünk, hogy a túl nagy távolság a sorok között ismét a nehezebben olvashatóság felé billenti a mérleg nyelvét, így próbáljuk megtalálni az egyensúlyt.
Különleges írásjelek helyes alkalmazása
A speciális írásjelek használata egyfajta eleganciát kölcsönözhet a megjelenített szövegednek. Ha szeretnéd őket alkalmazni, akkor a HTML kódok széles skálája áll rendelkezésedre a helyes tipográfiai jelek megjelenítésére, ilyenek például a gondolatjelek (—), az „idézőjelek” és a kötőjelek (-). Mielőtt azonban elkezdenéd ezeket alkalmazni weboldaladon, gondolj arra is, hogy egyes régebbi képernyőkön vagy élsimítás nélküli megjelenítő eszközökön pixelesek lehetnek, ezért mértékkel alkalmazd őket.
Vannak még további speciális karakterek melyeket beilleszthetsz weboldalad szövegezésébe, lásd a képen.
Szövegrészek kiemelése
Kiemelt szövegrészekkel és idézetekkel találkozhatunk nyomdai termékek, például magazinok esetében is. Ezek azt a célt szolgálják, hogy felhívják a figyelmet a kiemelt szövegrész tartalmára. Weben is könnyedén kiemelheted bizonyos szövegrészleteidet, méghozzá úgy, hogy a szöveg méretét nagyobbra állítod, esetleg másik betűtípusra vagy színre. Beállíthatod még azt is, hogy a háttere más színnel jelenjen meg, kaphat keretezést is és állíthatod lebegő módra is, hogy a normál szöveg körbevegye. Természetesen léteznek a kiemelésre komolyabb módszerek is, amelyeknél a JavaScript automatikusan kiemeli az idézetet a szövegből, így azt elég csak egyszer beírnunk a kódba.
Mi az a betűhangulat?
Tudtad, hogy pusztán a betűkkel és karakterekkel kifejezhetsz különböző hangulatokat? Igen így van! Attól kezdve, hogy milyen típust választasz és aztán annak milyen színt állítasz be, egészen addig, hogy kap-e valamilyen formázást: félkövér, dőlt, aláhúzott… Ezek mind-mind kifejezhetnek egy-egy hangulatot vagy érzetet, mint például:
- kontrasztot
- ritmus
- irányt, irányítottságot
- egyenletességet
- valami vicceset
- valami szomorút vagy ijesztőt
- valamilyen emberi értéket.
Végezetül lássunk néhány oldalt, ahonnan ingyenesen tölthetünk le betűtípusokat:
Kíváncsiak vagyunk véleményedre! Írd meg!
A szerző
Szedlák Katalin vagyok. 2014 óta foglalkozom különböző témájú szövegek írásával, az interjúktól egészen a PR cikkekig. Hiszem, hogy alapos kutatómunkával és kellő kreativitással, bármilyen témából kihozhatjuk a maximumot. Kedvelem a marketinghez és a közösségi médiához kapcsolódó témákat, így ezekről szívesen írok.
