6 fontos tipográfiai szabály a sikeres weboldalhoz

Olvasási idő: 9 perc
Share Button

Bár a mai trend az, hogy egyre nagyobb arányban képek és videók alkotják a weboldalak lényegi tartalmát, rengeteg mindent szövegesen lehet a legjobban átadni. Azonban nem mindegy, hogy ezek a szövegek hogyan néznek ki. A tipográfia (a betűk megjelenésének művészete) nagymértékben meghatározza egy weboldal sikerét azáltal, hogy milyen mértékben képes átadni az üzenetét.

 

Hiába a tetszetős weboldal és a megfelelő tartalom (legyen az értékes cikk, szuper akciós termék vagy érdekes videó), ha a szövegek megjelenése elriasztja a látogatókat. Lehetséges, hogy nem is tudja megfogalmazni a közönség, hogy mi miatt nem szeretne visszatérni weboldalunkra, de még azok az olvasók is, akik nem érdeklődnek a tipográfia vagy design iránt, reagálnak tudat alatt a szövegek megjelenésére és értékelik azt.

Kit érdekel a tipográfia? Kiválasztok egy betűtípust a weboldalamra (a Wordből már jól ismerem a Times New Romant, legyen akkor az), és kész is vagyunk – gondolhatnánk.  Ne tegyük! Olvassuk előbb el, hogy milyen szempontok alapján érdemes végiggondolnunk weboldalunk kinézetét tipográfiailag, és figyeljük meg, hogy milyen alapvető különbségeket okozhat weboldalunk sikerességében.

A betűk kinézetével kapcsolatos kifejezéseket képpel, angolul, magyarul és magyarázattal ellátva itt nézhetjük meg.

 

A következő 6 pontban összeszedtük az általunk vélt legfontosabb tipográfiai szabályt, amelyeket érdemes figyelembe venni és használni a weboldal tartalmának elkészítése során.

 

1. Tipográfia első szabálya: ne legyenek nehezen olvasható betűvel írva a hosszabb szövegek!

A weboldalak, blogok, webshopok betűkkel megjelenített tartalmait három részre lehet osztani:

  • rövid (maximum pár szavas) egységek (pl. menük, szlogen, „Akció”, „Kattints ide!”),
  • szövegek címei (webshop termékek nevei, cikkek címe és fejezetcímei, kiemelt önálló rövid szövegek),
  • és a hosszabb leírások tartalmi sorai (termékleírás és -adatok, blogbejegyzés szövege).

Mindhárom résznél más szempontok alapján járjunk el a betűk megjelenésének kiválasztásában.

A rövid szövegegységek (pl. figyelemfelhívó szlogenek, ösztönző mondatok, gombfeliratok) nem zavaróak akkor sem, ha nehezen olvashatóak. A tipográfia lehetővé teszi, hogy a brand arculatát becsempésszük a szövegbe, valamint a weboldal hangulatát és stílusát is meg lehet támogatni egy jellegzetesebb kinézetű felirattípussal.

Míg egy-egy menüpont neve vagy egy szlogen még használhat cirkalmasabb, díszesebb vagy egyéni fontot, a hosszabb szövegeket semmiképpen ne bonyolítsuk túl. Főleg kisebb kijelzőkön megterhelő elolvasni őket. Ha nem szeretnénk elveszíteni az olvasók tömegét, akkor óvatosan bánjunk velük.

Könnyebb olvasni olyan könyvet, amely talpas betűket használ. Régebben (amikor még rosszabb minőségű és felbontású monitorokon olvastak az emberek) a kijelzőkön való megjelenítés a talpatlan betűkre koncentrálódott, ám a jelenlegi technológiai fejlődés lehetővé tette, hogy a különböző online oldalak (blogok, hírportálok, magazinok) visszatérjenek a talpas betűk használatára. Egy felmérés szerint 2014-ben az amerikai weboldalak 61,5%-a talpas fontot használt a hosszabb szövegeinek megjelenítéséhez.

Nem csak a betűk formája számít. A háttérhez képest nem kellően magas kontraszt is erősen nehezítheti az olvasást. Lehet, hogy az almazöld betűk a türkizkék háttéren nagyon jól néznek ki a műköröm szalon arculatában, de ha így írjuk le a szolgáltatásainkat, akkor biztosak lehetünk benne, hogy alig páran fognak eljutni a szöveg végéig.

kép háttér és szöveg kontraszt

 

A legnagyobb kontraszt sem ideális: a hófehér, világító monitoron megjelenített fekete betűk is kimerítik a szemet (ezért olyan alacsony például az e-book readerek háttérvilágítása is). Elég néhány százaléknyival világosabbra állítani a szöveget, vagy a fehér hátteret bézs vagy halványszürkére állítani, és máris kimutatható az olvasási idő növekedése az egyes cikkek esetén.

kep-kontraszt

 

Nehéz meghatározni, hogy mekkora betűméret az ideális a különböző szöveges egységek megjelenítésénél: a címek, felhívó szövegek legyenek nagyok, a cikk szövege legyen könnyen olvasható, de az sem jó, ha túl sok helyet foglal.

 

Mi a jó megoldás?

Jelenleg a tendencia azt mutatja, hogy a nagyobb jobb. Legalábbis a címeknél, kiemelt szövegeknél mindenképpen. A Smashing Magazin készített 2009-ben egy átfogó felmérést, amiben kiderítették, hogy a web 2.0 megjelenésével lecsökkentek a betűméretek (átlagosan 12-14 pixeles szövegméretre), ezzel is nehezítve az olvasást.

A Bootstrapbay 2013-as felmérésben kimutatta, hogy szerencsére megfordult ez a tendencia, és 2013-ra már a 14-16 pixeles szövegméret az átlagos, és ez az átlag jelenleg is növekszik. A mobileszközökön, nem ideális fényviszonyok között olvasott szövegeknél az olvasók határozottan igénylik és elvárják a nagyobb betűméretet. A reszponzív weboldalaknál ez nem jelenti azt, hogy nehézkesebb lenne a sorok olvasása, mivel a szöveg igazodik a kijelző méretéhez.

Címsoroknál is megfigyelhető az a trend, hogy egyre nagyobbakká válnak. A Smashing felmérésének idején, 2009-ben még 28 pixeles átlagértékben jelentek meg a címsorok, míg 2013-ban már 10 (!) pixellel nagyobb méretben, azaz átlagosan 38 pixeles méretben íródtak. Az elmúlt években nagyobb igény támadt a vizuálisan jól elkülöníthető címek megjelenítésére, illetve egy-egy portál vagy lista könnyen beazonosítható címsoraira, ezért a weboldalak készítői folyamatosan növelték azok méretét.

A leginkább alkalmazott cím és kenyérszöveg méretaránya 2,5 (címsor betűmérete pixelben elosztva a szöveg pixel méretével).

A font kiválasztásánál a betűk kialakítását is figyelembe kell venni. Két ugyanakkora méretű font is teljesen máshogy olvasható ugyanakkora méret esetén (kisebbnek érződik, nehezebben olvasható). X-magasságnak azon betűk magasságát értjük, amelyek sem felfelé, sem lefelé nem nyúlnak ki (például az x betű, amiről a nevét kapta). Vannak olyan betűtípusok, ahol az x-magasság kicsi, átlagos vagy nagy: ez sokban befolyásolja azt, hogy mely betűméretnél találjuk könnyen olvashatónak a szöveget. A lenti képen három szöveg látható. Mindnél ugyanakkora a betűméret és a sortáv, de a különböző x-magasság miatt különbözőnek hisszük.

betűtípusok

 

2. Ne féljünk az üres felületektől!

Ne faltól falig legyen a szöveg. Ne féljünk a negatív tértől (angolul white space vagy negative space, ahol a grafika hiánya erősíti a többi terület megjelenését). A negatív tér előnyei:

  • felhívja a figyelmet a fontos szövegekre,
  • vezeti a szemet,
  • segíti az értelmezést és a gondolkodást.

Néha elég egy-egy sorkihagyás a fejezetek között, egy kicsit nagyobb távolság a webshopban a termékek között, hangsúlyosan nagy üres tér a feltűnő színű gomb körül, és a látogató figyelmét máris a helyes területek felé tereltük.

sorkihagyás

 

3. A túl sok betűtípus rossz, de a túl kevés is lehet unalmas

Voltak olyan tipográfia időszakok is, amikor divatos volt, hogy minél több betűtípust sűrítettek egy megjelenésbe. Minden fontos mondanivalót egy-egy újabb betűmegjelenéssel próbáltak kiemelni, keverve a talpas, slab, gótikus és lényegében bármilyen betűtípust, ami csak rendelkezésre állt a betűszedőnél.

talpas és talpatlan betűk

 

A számítógépek és letölthető fontok korában már több ezer font áll a rendelkezésünkre, így szabadon választhatunk a különböző megjelenésű, szélességű és vonalvastagságú betűk között (elég csak átnézni a Google Font lehetőségeit, hogy lássuk, mekkora a kínálat).

A mai olvasói igény az, hogy a tartalmakat könnyen átlátható és logikusan felépített külsővel jelenítsük meg. Ebbe maximum két betűtípus fér bele.

Például egy keskenyebb talpas betű a címeknek és egy könnyen olvasható, szélesebb talpatlan betű a kenyérszövegnek. Vagy akár pont fordítva: talpas a kenyérszöveg (de nem keskeny, hogy könnyen olvasható legyen) és talpatlan a cím. Jó párosítás lehet akár két egyforma típusú (talpas vagy talpatlan) font párosítása is, de figyeljünk rá, hogy elegendően nagy különbség legyen a kettő között (akár vonalvastagságban, akár a betűk szélességében), hogy a látogató az első pillanatban meg tudja különböztetni a címeket és kiemeléseket.

jól felépített szöveg

 

Javasolt fontpárosításokat itt lehet találni. Fontos! Sajnos az itt bemutatott Google Fontok nagy része nem tartalmazza az összes magyar ékezetes karaktert. Ezt úgy tudjuk ellenőrizni, hogy a https://www.google.com/fonts weboldalon, a baloldalon szűkítjük a keresést a script mezőnél a Latin Extended kiválasztásával. Hogy biztosra menjünk, felül a Preview Text mezőnél írjuk be az “Ő” és “Ű” karaktereket is a Grumpy wizards szöveg elé, hogy a keresés által kiadott soroknál láthassuk, megfelelően jelennek-e meg a kényes magyar karakterek.

 

4. A betűknek stílusa van, ne keverjük őket!

Ne használjunk gyerekes kinézetet komoly íráshoz, gótikusat receptekhez vagy punk graffiti fontot játék webshophoz. Hiába tetszik nekünk a kiválasztott betűtípus, gondoljuk át előbb, vajon a megfelelő asszociációt és hangulatot váltja-e majd ki a látogatóból. Ha rossz megjelenést választunk, hiteltelennek tűnhet a weboldalunk. Ki szeretne egy olyan webshopban babajátékot venni, ahol death-metál megjelenésű szövegekkel vannak kiírva a játékok nevei?

betűstílusok

 

 

5. Legyen könnyen értelmezhető a szövegek hierarchiája!

Igen, a tipográfia része a szövegek elrendezése és tördelése is. Annyira sok információ éri ma az olvasót, hogy kiszűrik a pillanatnyilag nem annyira érdekes dolgokat (ez folyamatosan változhat attól függően, ha tanul valaki, vagy keres egy délutáni programot vagy egy blog cikkei között keresi a neki tetszőt).

A cél, hogy a szöveget átfutva is könnyen lássa, mik a fejezetcímek, a kiemelések és a lényeges pontok (erről a weboldal optimalizáló cikkünkben is olvashatsz). Ezáltal rögtön eldöntheti, szeretné-e részletesebben megnézni a többi tartalmat is vagy sem. Ezt egységes logikával alkalmazott fontokkal, betűméretekkel, színekkel és grafikai elemekkel lehet elérni. Mint feljebb már szóba került, a javasolt 2,5-ös cím és kenyérszöveg méretarány már ideálisan elkülöníti a kiemelt szövegeket a környezetüktől.

 

6. A szellős megjelenés nem tavaszi időt jelent

A túl hosszú sorok és a túl kicsi sortáv megnehezíti az olvasást és az értelmezést,  főleg ha egy mobilon nézik a szöveget a buszon ülve és minden apró rázkódásnál elveszítik a sort.

Hány karakter legyen egy sorban?

A felmérések szerint az ideális sorhossz desktop megjelenésnél 84 karakterből áll. Ebben az esetben az olvasók több időt töltenek el a bejegyzésen. Természetesen a kisebb kijelzőkön ezt a karakterszámot csökkenteni kell optimális esetben. Ha bármi okból ennél sokkal hosszabb sorokat szeretnél alkalmazni, akkor növeld a betűméretet és sortávot. Ezen a linken megnézhetjük, hogy ugyanazt a szöveget mennyivel más érzés olvasni 40, 65 és 90 karakteres sorszélességre tördelve.

A sortáv szintén nagy mértékben befolyásolja az olvasói élményt: a túl sűrű sortáv nehezíti az olvasást. Az ideális arány a 1,5-es sortáv (a betűmérethez viszonyítva). A címsoroknál azonban lehet kisebb a sortáv. Sőt! Legyen is kisebb, mivel a nagyobb méretük miatt sűrűbben szedve is olvashatóak. Mivel a betűméretük általában nagyobb, ezáltal értékes helyet takaríthatunk meg, ha nem annyira szellősek, mint a hosszabb szövegek.

 

Bár egy cikk elolvasása után nem lesz senkiből sem professzionális webdesigner és tipográfia szakértő, de reméljük, hogy sikerült megválaszolni olyan tipográfiai kérdéseket, amelyek segítségével optimalizálni lehet a weboldalunk felhasználói élményét. Ez a kis extra figyelem legalább olyan fontos, mint a jól megírt szöveg maga: nagyban befolyásolja, hogy üzeneteink miként érik el az olvasókat, így közvetetten hozzájárul a weboldalunk sikeréhez is.

 

 


Nem tudod, milyen arculat hoz több vevőt a weboldaladon?
Ha szeretnél profi és vevőszerző weboldalt és arculatot készíttetni, akkor ismerd meg az Arculattervezés nevű grafikai szolgáltatásunkat és vedd igénybe itt! –>


 

Tetszett a cikk? Akkor oszd meg, hogy másokhoz is eljusson az üzenet!

Ha van véleményed a cikkel kapcsolatban, írd le azt a lent található kommentekben!

Share Button

Hozzászólások