Dobrá typografia je neviditeľná: Ako môžeme zlepšiť čitateľnosť

V prvom článku o typografii sme sa zamerali na základné pojmy, rozdelenie a najdôležitejšie prvky typografie. Spomenuli sme aj zásadný vplyv typografie na čitateľnosť, poďme si teda túto tému priblížiť.

Legibility opisuje schopnosť čitateľa rozoznávať a rozlišovať jednotlivé znaky – ide teda o čitateľnosť písma.

Readability opisuje, ako pohodlné, rýchle a efektívne je samotné čítanie. To možno ovplyvniť výberom písma, jeho veľkosťou, farbou, typografickou úpravou – ide teda o čitateľnosť textu.

Či už ide o čitateľnosť písma alebo čitateľnosť textu, v nasledujúcich riadkoch vám poradíme, ako dosiahnuť tie najlepšie výsledky.

Rozlíšiteľnosť znakov 

Serifové písma majú vďaka serifom zvyčajne dostatočne rozlíšiteľné znaky, ale v prípade sans-serifových písiem to môže byť problém, ktorý môže výrazne ovplyvniť čitateľnosť. Pre rýchlu kontrolu rozlíšiteľnosti znakov slúži test: Il1 (Ivona losos 1). Ak sú všetky znaky ľahko rozlíšiteľné, s čitateľnosťou by nemal byť problém.

Otvorenosť tvarov znakov

Pri čítaní textu nevnímame len znaky, ale aj priestor okolo nich a v ich vnútri. Písma, ktorých znaky sú viac otvorené sú pre ľudské oko ľahšie čitateľné.

Kontrast znakov 

Kontrast, alebo aj tieňovanie, je rozdie v hrúbke ťahov v rámci znaku, najčastejšie medzi vertikálnym a horizontálnym ťahom. Kontrast znakov definuje polohu písma na škále čitateľnosti/vzhľadu. 

Nízky alebo neutrálny kontrast je vhodnejší pre čítanie dlhého textu (tzv. body text), pretože text má pokojnejšiu textúru, ktorá je menej únavná pre oko čitateľa. . Na druhej strane vysoký kontrast je expresívnejší a dožaduje sa pozornosti, vytvára emócie a preto je vhodný najmä pre nadpisy.

Mínusky vs verzálky 

Najprv sa pozrime na to, ako ľudia čítajú. Ľudia nečítajú znak po znaku, ale očami skenujú celý riadok, jednotlivé slová vnímajú ako komplexné symboly s určitým tvarom. Práve vďaka tvarovej variabilite mínusiek, najmä ich horným a dolným doťahom, má každé slovo unikátny tvar. Slová vysádzané vo verzálkach pôsobia oproti nim ako jednoliate bloky. To je dôvod, prečo sa mínusky čítajú ľahšie.

‍

Dĺžka riadku 

Z prieskumov vyplýva, že ideálna dĺžka by sa mala pohybovať medzi 40 – 60 znakmi na riadok. Pri čítaní krátkych riadkov musí čitateľ príliš často a rýchlo pohľadom prechádzať z konca na začiatok riadku, čo môže byť únavné. Naopak, pri príliš dlhých riadkoch sa môže čitateľ pri ceste pohľadom z konca na začiatok ďalšieho riadku strácať. 

Zarovnanie odstavca 

Pre lepšiu čitateľnosť je vhodné zarovnať odstavec na ľavú stranu. Vyhnete sa tak vytváraniu veľkých medzier medzi slovami (tzv. riek), ktoré narúšajú vizuálny rytmus textu a zhoršujú čitateľnosť.

Medziznakové medzery (letter spacing) 

Priestor medzi jednotlivými znakmi slov má veľký vplyv na čitateľnosť textu. Spravidla platí, čím je menšia veľkosť písma, tým väčšie by mali byť medziznakové medzery. Do úvahy musíme brať aj typ písma, veľkosť riadku, farbu písma, pozadia alebo či je text písaný mínuskami alebo verzálkami. Verzálky si však zvyčajne vyžadujú väčšie medzery.

Kerning 

Kerning je optická korekcia medziznakového priestoru pre konkrétne dvojice znakov, najbežnejšie páry sú napríklad VA, LT alebo KO. Každé profesionálne písmo by malo obsahovať kerning vytvorený priamo jeho dizajnérom, čiže používateľ písma sa ním vôbec nemusí zaoberať. V prípade, že písmo kerning neobsahuje, je možné v grafických aplikáciách zvoliť možnosť upraviť kerning automaticky pomocou možnosti optical kerning, prípadne ho nastaviť manuálne. 

Výška riadku

Výška riadku predstavuje vzdialenosť medzi účariami po sebe nasledujúcich riadkov. Odporúčaná veľkosť riadkovania pre body text je 120 – 160 % veľkosti písma.

Platí, že čím menšia veľkosť písma, tým väčšie by malo byť riadkovanie – drobné písmo bude mať viac priestoru a bude lepšie čitateľné.

Vertikálny rytmus 

Výška riadku je úzko spojená s pojmom vertikálny rytmus. Vertikálny rytmus je zachovanie konzistentnosti vertikálnych medzier medzi jednotlivými prvkami. To sa týka nielen textu, ale všetkých objektov na stránke.

Veľkosť písma

Na čítavosť a čitateľnosť má zásadný vplyv aj veľkosť písma. Odporúčané veľkosti pre body text sú 16 – 20 pt pre desktop, 15 – 19 pt pre tablet, 12 – 16 pt pre mobil a pre smart hodinky to je 11 pt.

Pýtate sa, čo je to pt?

pt = point (typografický bod) – pochádza z fyzického sveta, súvisí s anglickým palcom(inch) a je definovaný ako 1/72 palca. V bežnom živote sa s ním takmer nestretneme, pt sa však používa na vyjadrenie veľkosti písma.

V digitálnom prostredí sa často môžeme stretnúť aj s vyjadrením veľkosti písma v px, teda pixeloch. Je však potrebné rozlišovať medzi fyzickým pixelom, ktorý predstavuje fyzický zobrazovací bod v displeji, a logickým pixelom, ktorý predstavuje zobrazený bod, nezávislý od počtu fyzických pixelov, ktoré ho reálne zobrazia. Logický pixel je definovaný ako 1/96 palca (čiže 3 pt predstavuje 4 px), a práve tento používame ako px v CSS. 

Typografický trojuholník 

Na vytvorenie dokonalého odseku ho vytvoril typograf a webový dizajnér Matej Latin. Znázorňuje rovnostranný trojuholník, ktorý je dokonalým obrazom toho, ako by výška riadku, dĺžka riadku a veľkosť písma mali fungovať vo vizuálnej harmónii. Odporúčame ti zahrať si túto hru, pri ktorej si vyskúšate cit pre tieto tri atribúty. :)

‍

Za pomoc pri vypracovaní a spätnú väzbu ďakujeme Ondrejovi Jóbovi a Lukášovi Bartošovi.