Olvasás a weben

Szokások

Induljunk ki egy átlagos felhasználóból. Amikor megérkezik egy oldalra, akkor az első dolga, hogy gyorsan átszkenneli az egészet, majd a tartalom olvasásába kezd, ami legtöbbször gyorsan történik. A mondatokon csak átszalad, keresi a szövegben lévő lényeget. Ha úgy gondolja, hogy megtalálta, akkor általában abbahagyja az olvasást, majd megtekinti az oldal további részeit vagy otthagyja azt. Ezek alapján, egy weboldalon fent lévő hosszabb szöveget könnyen olvasható formában kell megjelenítenie a weblap készítőjének. Tökéletes megoldás persze nincs (a megszokott tipográfiai alapszabályokat kivéve), inkább csak meglévő tapasztalatokra lehet hagyatkozni. Ahány ember, annyi féle preferencia.

Mielőtt átvennénk pár jótanácsot a weben lévő tartalmak olvashatóságáról, meg kell említenem, hogy az itt felsorolt tippek a saját megszokásaim alapján születtek.

Kontraszt

A papíralapú tartalmakból kiindulva, sokan úgy gondolják, hogy a weben megjelenő szövegekre is bármilyen színkombináció megfelelő. Általánosan bevett szokás, hogy a háttér fehér, a szöveg pedig szimplán fekete. Nézzük meg az alábbi két példát.

Mint láthatod, a bal oldali fehér/fekete kombináció igaz elég kontrasztos, de túlságosan terheli a szemet hosszabb olvasás után. Érdemes a szöveg színét valamilyen sötét szürke árnyalattal megjeleníteni. Az optimálisnak mondható szövegszín a #333. Ha sötét háttér előtt jelenik meg a szöveg, akkor érdemes fordított rendszer szerint gondolkozni, azaz sötétszürke háttér és világosszürke szövegszín. Azt viszont tartsuk észben, hogy a sötét hátterek előtt lévő tartalom olvasása mindig nehezebb.

Szövegméret, sorköz

A weben általában 12-es betűmérettel jelenik meg a tartalom. Ez a betűméret még elfogadható, viszont a sorköz mindig másfélszerese legyen a betűméretnek. A böngészők alapbeállítása az 1, amivel az a probléma, hogy olvasás közben a szemnek nincs elég hely különválasztani az adott sort. Az éppen olvasott sorba “belelóg” a következő, ami azt eredményezi, hogy az olvasó szeme összezavarodik. Az általam preferált szövegméret a 16/24, azaz 16-os betűméret és 24-es sorköz. →

Tagolás és igazítás

Nagyon fontos, hogy adjunk tagolást a folyamatos szövegnek. Kétféle lehetőségünk van. Az egyik a már jól bevált bekezdéstörés, ami azt jelenti, hogy egy bekezdés után az előbb írt sorköznek megfelelő értékkel adunk margót. Például ha a 16/24-es rendszerben formázunk, akkor egy bekezdés után a sorköz értékét használjuk, ebben az esetben 24 pixelt. A másik lehetőség az első sor behúzása, amire szintén a fentebb leírt szabályok érvényesek. Az első sort a sorköz magasságának értékével húzzuk be.

Ami nagyon fontos, hogy a két módszert sose használjuk egyszerre.

A bekezdések igazítása és szélessége szintén fontos. Lehetőleg az alapértelmezett balra igazítást használjuk, amivel elkerüljük a sorkizárt pozicionálás által megjelenő különböző méretű szóközöket. Hasonlóan a nem megfelelő sorközhöz, az össze-vissza szóközök is megzavarnak a folyamatos szöveg egyenletes olvasásában.

A bekezdések optimális hosszának általában 50-70 közötti karakterszámot szoktak ajánlani. Ez pixelre átszámítva azt jelenti, hogy az egyhasábos tartalom szélessége 460 pixel körül lehet optimális a 16/24-es rendszerben. Érdemes lehet valamilyen baseline grid framework-öt vagy saját gridet használni. Ezzel elkerülhető a szöveg rossz igazítása, mind horizontálisan, mind vertikálisan. A wyctim.com jelenleg a 960.gs rendszer módosított változatára épül, ami 12 darab 60 pixel széles, 10 pixeles margóval ellátott hasábot ad, 24 pixeles baseline-nal a 16 pixeles betűméretre optimalizálva.

Betűtípusok

A papíralapú tartalmaknál általában bevett szokás, hogy a talpas betűtípusokat a szöveg törzsében, a talpatlanokat pedig a tartalom outlinehoz, azaz az alcímekhez használják. Weben persze nincs aranyszabály, amit érdemes megfogadni, hogy könnyen olvasható fontokat használjunk, legyen az serif, vagy sans-serif. Érdemes minden böngészőben megtekinteni a tartalmat, főleg a Mac-en készült oldalakat, ugyanis Windows-on általában rosszabb a betűtípusok élsimítása. Igaz ez főleg a CSS3 @font-face tulajdonságával behívott fontokra. A Mac-en szépen megjelenő betűcsalád Windows-on teljesen olvashatatlan lehet.

Ami nagyon fontos, hogy lehetőleg olyan font-stacket használjunk, ami hasonló betűcsaládokból épül fel, elkerülve ezzel például a különböző böngészők alatt elcsúszó hasábokat. Érdemes megnézni a Way Backen megjelent Revised Font Stacks nevű bejegyzést, ami jó kiindulási pont lehet a megfelelő CSS font-stack összeállításához.