Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-05-240 komment

Lehet, hogy nagyobbra kellene venned a betűméretet a weboldaladon?

A weboldalak többsége 15-18 pixel méretű betűket használ fő szövegeinél. Néha ugyan már találkozhatunk 20 px-es vagy nagyobb kenyérszövegekkel, de lehet, hogy ennél még mindig lehetne tovább növelni a méretet? Lehet, hogy így hatékonyabb lenne a weboldal?
A kenyérszöveg valószínűleg a weboldalad legfontosabb eleme, még akkor is, ha az emberek csak átfutják, és talán csak a címsorokat olvassák el rajta. Ennek az elemnek a hatékonyságát korlátozzuk Christian Miller szerint azzal, hogy túl kisméretű betűket használunk. Persze itt nem arról van szó, hogy a kisméretű betűk feltétlenül rosszak, hiszen egy 18 pixel méretű betű is olvasható a megfelelő távolságból. Helyük is van a designban, hiszen vannak olyan pontok a weboldalon, ahol jól alkalmazhatók. Ugyanakkor a kenyérszövegnél jobb választás a nagyobb betűméret.

Egy kis történelem

A jelenleg is használt betűméret még a print korszakból eredeztethető, amikor az írógépeknél használt 12 pt-os betűk tökéletesek voltak. Többek között azért is, mert minél kisebb volt a betű, annál kevesebb papírra volt szükség, így költséget lehetett megtakarítani vele. 1990-ben, a digitális platformok elterjedésével a pont alapú méretezést felváltotta a pixel. Az Apple Mac OS-nál a 12 pontos méretnek a 12 pixeles felet meg 72 ppi-nél. A Microsoft ugyanakkor a 12 pontos betűméretet 16 pixelesként határozta meg 96 ppi mellett.

Az 1990-es és a korai 2000-es évek között a weboldalak szövegmérete 9-14 pixel között változott, mivel a designerek ekkor még úgy gondolták, hogy a 16 pixel egyszerűen túl nagy, hiszen 12 pixeles méretet használtak a Macjeiken. 2011-ben a reszponzív oldalak elterjedésével jutottunk el oda, hogy a nagyobb felbontású kijelzők miatt a 16 px-es betűméret vált az elfogadott minimummá.

Miért nem nagyobbak a szövegméretek?

Ennek oka elsősorban az elvárásokban keresendő. Vagyis a webdesignerek abból indulnak ki, hogy adott méretű szövegeket szoktak meg az emberek a weben, és ha mindenki egy bizonyos méretet használ, akkor ők miért térnének el ettől?

A mobile first megközelítésnél a szövegeket a mobilok kijelzőjére optimalizálják, ami 15-18 pixeles méretet jelent. Ami rendben is lenne mobilon, azonban ugyanez a méret marad a nagyobb eszközöknél is, mint a laptopok, asztali gépek, vagy okostévék. A designerek nem bonyolítják a dolgokat azzal, hogy nagyobb szövegméreteket alkalmazzanak a nagyobb kijelzőkön.

Ráadásul a nagyobb szövegméretek sok designer szerint túlságosan nehézkesnek vagy gyerekesnek tűnnek. Pedig nem a méret az, ami miatt erre következtethetünk, hanem a betűtípus hibája. A betű kialakítása az, ami befolyásolja a képünket a szövegről. Nagyon sok olyan betűtípus van, ami egész egyszerűen nem néz ki jól nagy méretben.

További problémát jelent, hogy az kibetűzhetőséget összekeverjük az olvashatósággal. Tehát attól, hogy egy szöveg betűi jól láthatók, még nem jelenti azt, hogy könnyen is olvashatók. Utóbbi egy lépéssel tovább megy, hiszen figyelembe veszi azt az erőfeszítést, melyet a szöveg elolvasása érdekében kell megtennie a felhasználónak.

Sokan azért csökkentik egy weboldal betűméretét, hogy azzal megkíméljék a görgetéstől a felhasználókat, pedig a görgetés teljesen természetes viselkedés (http://blog.webshark.hu/2017/05/11/egyoldalas-webdesign/) a web használatánál: az emberek számítanak arra, hogy egy weboldalnál görgetniük kell. Még akkor is sokszor görgetnek lefelé, amikor egy weboldal a hajtásnál véget ér, mert azt hiszik, hogy további tartalmakat találnak. A szöveg könnyű olvashatósága viszont sokkal fontosabb, mint a görgetés mennyisége.

A betűméretek mozdíthatatlanságához hozzájárulnak egyébként a keretrendszerek, mint például a Bootstrap, ahol a 3-as verziónál az alapértelmezett méret a kenyérszövegeknél 14 px , illetve 16 px a 4-esnél.

De miért is kellene nagyobbra venni a betűket?

A nagyobb betűméretek javítják a weboldal-élményt, hatékonyabbak. Már a 18 px-ről 20 px-re történő növekedés is javulást eredményez nem csak a design, hanem a felhasználói élmény tekintetében is. Hogy miért?

Távolabbról is használható

A designereknek vannak feltételezései azzal kapcsolatban, hogy egy felhasználó egy adott kijelzőméretet milyen távolságból szemlél. Egy kis kijelzőméretnél messze nincs olyan mozgásterünk, mint mondjuk egy nagyképernyős okostévénél. Egy mobilnál vagy egy laptopnál alapvető, hogy nincs messzebb, mint a karunk hossza, de már a nagyobb monitoros asztali gépeknél sem biztos ez a távolság. A felhasználó akár el is feküdhet egy fotelben, miközben a monitor valahol az íróasztal mélyén helyezkedik el.

Minél nagyobb a kijelzőméret, annál kevésbé megjósolható, hogy milyen távolságból akarja azt használni a tulajdonosa. Márpedig a nagyobb távolságoknál javul a felhasználói élmény, ha nagyobbra vesszük a weboldal elemeit, és kihasználjuk a rendelkezésünkre álló felületet.

Javul az olvashatóság

Az emberek mindössze 28 százalékát olvassák el egy weboldalnak, és rendszerint csak átfutják a tartalmat. Ennek oka elsősorban a nagy mennyiségű tartalom, ami a weben fogadja őket, valamint a korlátozott mennyiségű idő, ami a rendelkezésükre áll. Kevesen vannak, akik alaposan elolvassák egy weboldal szövegét, mivel az jelentős erőfeszítést igényel.

Ugyanakkor egy nagyobb betűméret minden felhasználó-típus számára kedvező, mert javítja az olvashatóságot. Hiszen miközben az idősebb felhasználók gyengébb látásuk miatt igénylik a nagyobb betűméreteket, addig a fiatalok azért, mert türelmetlenek, és inkább csak átfutják a szövegeket.

És minél jobb egy weboldal olvashatósága, annál nagyobb a valószínűsége annak, hogy az emberek el is fogják olvasni a rajta szereplő tartalmakat. Hiszen a nagyobb szövegek befogadása kevesebb koncentrációt igényel.

Javítja a használhatóságot

Az emberek számára az egyszerre befogadható információ mennyisége korlátozott. Minél tovább tart valaminek a megértése, annál gyengébb a teljesítményünk. Ezért kell olyan úgy felépíteni a weboldalt, hogy azon csökkentsük az információ sűrűségét. Ez azt is jelenti, hogy egyszerre kevesebb szöveget kell a felhasználók elé tenni. Minél kisebb a zsúfoltság, annál kisebb a kognitív terhelés, ami pedig javuló használhatóságot eredményez.

Növeli a vizuális hatást

Minél nagyobb méretű egy címsor, annál erősebb érzelmi kapcsolatot alakít ki az olvasójával. Ugyanez igaz azonban a kenyérszövegre is. Az üzenetek ezáltal hangosabbak, magabiztosabbak és meggyőzőbbek lesznek.

Ráadásul a nagyobb betűméreteknél olyan részei is megjelennek a betűnek, amelyek kis méretnél láthatatlanok maradtak. Ilyenkor látszik igazán, hogy mi a különbség egy jó és egy rossz betűtípus között.

Tippek a nagyobb betűméretek alkalmazásához

Amikor a kenyérszöveg betűinek méretét határozod meg a weboldaladhoz, akkor fontos felismerni, hogy nincs olyan méret, ami minden helyzetben megfelelő lenne. Ezért nem lehet azt mondani, hogy használj 20 px-es vagy 24 px-es betűméretet. Hiszen számít a betűtípus designja, a háttér színe, a kijelzőméretek.

Először a kenyérszöveget tervezd meg!

Még mielőtt bármit kitalálnál a weboldaladon, tervezd meg, hogy mekkora betűméretet használsz majd a fő szövegeidnél. Hiszen ez az elem foglalja a legnagyobb helyet a weboldalon, és megjelenése mindenképpen hatással lesz a weboldal többi részére. Ez különösen igaz a nagyobb kenyérszövegeknél, mivel ezek nagyobb helyet foglalnak el.

Olyan betűtípust válassz, ami jól méretezhető!

Nem minden betűtípus működik jól nagyobb méreteknél. Némelyik határozottnak és élesnek tűnik kis méretnél, de kínosnak és rosszul tervezettnek látszik, amikor nagyobb a mérete. Ilyen betűtípus például az Arial vagy a Georgia, melyeknél a részletek kevésbé kidolgozottak azért, hogy 14 px-es méretnél is jól olvashatók legyenek. Az ilyen szöveg-betűtípusokat 6-14 pontos, vagy 8-18 pixeles méretre tervezték, de 24-26 px-nél már nem mutatnak jól.

A serif betűtípusoknál viszont előfordul, hogy míg jól használhatók nagyobb méreteknél, csökkentve a méretüket, kisebb kijelzőkön olvashatatlanná válnak. Az olyan serif betűtípusok, mint az Equity, a Franziska, a Leitura News, a Merriweather, a Miller, a PT Serif vagy a Tisa jól használhatók nagyobb méreteknél.

Azt is érdemes megjegyezni, hogy a mostanában tervezett betűtípusok jobban használhatók a reszponzív weboldalaknál, mint azok a betűk, amelyek még a print-korszakban születtek. Néhány modern serif betűtípus például rendkívül jól használható az eltérő méretű kijelzőkön. A lényeg tehát az, hogy a kiválasztott betűtípust meg kell vizsgálni kicsi és nagy méreteknél is, még mielőtt alkalmaznád a weboldalon.

Ne a betűméret értékére hagyatkozz!

Mivel a különböző betűtípusok nagy eltéréseket mutatnak azonos méret mellett, ezért a szemünkre hagyatkozva kell eldönteni, hogy mi a megfelelő méret, nem pedig a betűméretre vagy pedig arra, hogy egy más betűtípus egy más weboldalon jól működött az adott méret mellett.

Ráadásul az észlelt méret annak színétől és a háttér színétől is függ, így érdemes a már megválasztott színeket is figyelembe venni a méret meghatározásánál, illetve a különféle szín-elképzeléseknél külön meghatározni a megfelelő méreteket. A megfelelő kiindulási pont azonban már ne a 16 px-es méret legyen, hanem a 20-as. A 16 px-es méretet érdemes megtartani a nagyon kismértetű mobilok kijelzőjére.

Optimalizáld a betű-térközt!

Megnövelt betűméretnél a betűk közötti térköz növelésére is szükség lehet a jobb olvashatóság és az esztétika érdekében. A különböző betűtípusok különböző térközt igényelnek. Egy szöveg-betűtípusnál például a térköz csökkentésére lehet szükség, hiszen a betűméret növelése miatt túl nagy lehet a távolság. Ugyanakkor óvatosnak kell lenni a változtatásokkal, mivel könnyen ronthatunk a helyzeten. Ráadásul nem is minden betűtípusnál van szükség a változtatásra.

Optimalizáld a sorhosszt és távolságot!

Robert Bringhurst szerint az optimális sorhossz 55-75 karakter között változik. A túl hosszú sorok olvasásánál elfárad a szem, mert keresni kell minden sor kezdetét. Ugyanakkor, ha egy sor túl rövid, akkor olyan szavakat vagy mondatokat kell megtörni, melyek szorosan összetartoznak. A sorhossz mindig a betű nagyságának függvénye.

Josef Müller-Brockmann szerint egy hasáb szélességének mindig arányosnak kell lennie a betű méretével. Tehát, ha növeled a betűméretet, akkor a hasábnak is szélesebbnek kell lennie, hogy megmaradjon az optimális sorhossz. A lényeg tehát az, hogy a tipográfia határozza meg a hasáb szélességét, nem pedig fordítva. Ugyanígy a sortávolság is a betűméret függvénye.

Kategória: Design | Címke: , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.