V tomto článku sa pozrieme na to, ako správne naformátovať a graficky upraviť texty v článkoch a ostatných častiach webových stránok. Typografia sa zaoberá grafickou úpravou s použitím vhodných rezov písma a usporiadania jednotlivých znakov, odsekov a zalamovaním textu do odsekov vo vhodnej, pre čitateľa zrozumiteľnej a esteticky prívetivej forme. Ak chcete písať článok alebo máte webovú stránku, kde pridávate obsah a môžete ovplyvniť formátovanie, je dôležité, aby ste zachovávali typografické pravidlá, pretože ich nedodržiavaním odrádzate návštevníka stránky od prečítania obsahu, ktorý je neraz kľúčový na vykonanie konverzie. Každé z týchto pravidiel je dôležité a má svoj význam. Čím väčší máte obsah, tým je dôležitejšie tieto pravidlá dodržiavať. Málokto bude predsa ochotný čítať dlhé, a pritom ťažko čitateľné odseky textu.V úvode ešte spomeňme, že typografická kvalita stránok priamo nesúvisí so SEO. Ak však stránka bude z typografického hľadiska veľmi neatraktívna, môže sa to odraziť v metrikách ako miera odchodu zo stránky, nízky čas strávený na stránke, nižší počet prezretých stránok a pod. Takéto správania zo strany užívateľov sú už pre Google dostatočnými indikátormi, na základe ktorých môže byť stránka v pozíciách vo vyhľadávaní znevýhodnená pred konkurenciou. 

Veľkosť písma

Aby bol text dostatočne čitateľný, je lepšie voliť radšej väčšie písmo s tým, že donútite užívateľa scrollovať alebo vynecháte niektoré slová, akoby malo byť písmo príliš malé. Samozrejme, určenie správnej veľkosti ovplyvňúje mnoho faktorov. Od dôležitosti textu (nadpis, perex, obsahový text, popisný text), cez výber písma a rezu.

Na určenie veľkosti textu je možné na webových stránkach používať niekoľko typov veľkostných hodnôt.

Pixels

Základnou hodnotou je px (pixels): je to hodnota, ktorá udáva počet pixelov – obrazových bodov zariadenia, od dolnej doťažnice písma po hornú doťažnicu (pozri obrázok) s pripočítaním ochrannej zóny od doťažníc v hodnote 4,5 %. To znamená, že napríklad písmo s veľkosťou 100px bude mať výšku od konca písmena p po začiatok písmena h v hodnote 91px (100px – 4,5 % * 2).

Tá sa ale môže v závislosti od typu zariadenia (denzity obrazovky) líšiť v skutočnej veľkosti v centimetroch a môže predstavovať veľkosť od 0,7 cm (iPhone 4) po 3,1 cm (klasická obrazovka).

Rem

V súčasnosti je veľmi dôležité myslieť na mobilné zariadenia, kde musí byť text väčší, aby ho bolo možné ľahko prečítať. Na to je určená hodnota rem.

Rem – je percentuálne vyjadrenie veľkosti (100 % = 1rem) na základnú veľkosť dokumentu webovej stránky, ktorá predstavuje pre väčšinu prehliadačov 16px, no ktorú je možné nastaviť pre potreby mobilných zariadení. Čiže je možné prehliadaču povedať, že pri mobilných zariadeniach bude táto hodnota vyššia, napr. dvojnásobná, teda 32px na 1rem. Keď sa nastaví nadpisu 2rem a základnému textu 1rem, na veľkých obrazovkách budú mať veľkosť 32px a 16px a na mobilných zariadeniach 64px a 32px.

Em a %

Okrem rem existujú hodnoty em a % (a ešte nejaké ďalšie, ako cm, pt…, ktoré nie sú určené na webové stránky, ale na tlač), ktoré sú v podstate veľmi podobné a líšia sa len minimálne:

  • em – na rozdiel od rem preberá veľkosti predchádzajúcich prvkov (čo nie je ale veľmi výhodné pri globálnom zväčšení),
  • % – na rozdiel od em prispôsobuje svoju veľkosť pri príkazoch text-size, ktoré sa už veľmi nepoužívajú a napr. prehliadač Chrome ich ani neprečíta.

Nedá sa preto presne definovať, akú hodnotu by mala mať správna veľkosť písma (kedže záleží od fontu, rezu, dizajnu…), ale môžeme napísať približné odporúčané hodnoty.

Odporúčané hodnoty na základný text by mali byť:

  • minimálne 1rem, respektíve 1em / 100% / 16px
  • maximálne 1.4rem, respektíve 1.4em / 140% / 22px.

 

Výška riadkovania

Výšku riadkovania je tiež veľmi dôležité nastaviť, pretože základná veľkosť riadkovania je pre väčšinu prehliadačov iba 1.2 (120 % oproti veľkosti písma), čo je pomerne nízka hodnota – text je na seba príliš natlačený a ťažko sa čitateľovi hľadá správny riadok, keď dočíta predchádzajúci.

Hodnoty riadkovania predstavujú vzdialenosť od dolnej doťažnice jedného riadku k druhému. Je možné ju udávať v hodnotách px, em a %, pričom základnou hodnotou sú percentá a nie je nutné ich za číslom písať. Ak sa má meniť veľkosť písma (pri mobilných zariadeniach), je potrebné udávať percentuálne hodnoty. Medzi em a % je opäť rozdiel len pri príkazoch text-size.

Správna hodnota výšky riadkovania závisí hlavne od:

  • počtu slov v riadku (šírka bloku textu) – čím viac slov, tým vyššie by malo byť riadkovanie,
  • počet riadkov – čím má odsek textu viac riadkov, tým vyššie by malo byť riadkovanie, pri dvoch riadkoch môže mať riadkovanie aj veľmi nízke hodnoty – 1.2 či 1,
  • typ písma – serifové (inak povedané pätkové) písmo môže mať riadkovanie nižšie, pretože serif pomáha udržať očný kontakt v jednom riadku.

Odporúčané hodnoty na aspoň 4-riadkový odsek by mali byť niekde medzi 1.4 až 2.

 

Rez písma

Poznáme normálny, hrubý text alebo kurzívu. Rezy by sa na stránke nemali príliš často obmieňať, aby text nepôsobil rušivo a odporúčame vyhýbať sa kurzíve (ťažko sa číta, najmä pre dyslektikov). Ak sa má určitá časť textu zvýrazniť, lepšie je použiť tučný text ako kurzívu. Kurzíva tiež záleží aj od fontu, niektoré písma majú kurzívu až príliš nečitateľnú a vtedy je dobré vyhnúť sa jej úplne.

Ak sa má využiť na stránke citát, lepšie je daný text označiť úvodzovkami, prípadne ešte aj grafickým spracovaním zvýrazniť, ako použiť kurzívu.

 

Zarovnanie textu

Zarovnanie do bloku (justify) je vhodné najmä pre tlačoviny. Zarovnanie do bloku spôsobuje nerovnomerné medzery, čo pri pohľade zhora nadol zobrazuje prúdy bieleho miesta, takzvaný efekt rieky. Hlavne čím je stĺpec s textom užší, tým menej slov sa zmestí do riadku a tak vznikajú hrubšie medzery. Na webovej stránke sa práve oproti tlačovinám, kvôli zvýšeniu čitateľnosti, zvykne používať väčšie písmo, čo spôsobuje, že v jednom riadku je menej slov. Text je potom horšie čitateľný a dyskletikom, ktorým sa vizuálne zväčšujú a zmenšujú medzery medzi písmenami a slovami, toto zarovnanie spôsobí, že text je pre nich takmer nečitateľný.

Riešením je použitie zarovnania textu vľavo.

 

Farba písma

Farba nie je celkom súčasťou typografie, ale netreba zabúdať, že aj farba ovplyvňuje čitateľnosť textu. Text by mal byť kontrastný, ale nie príliš. Čisto čierny text na čisto bielom pozadí je natoľko kontrastný, že u dyslektikov môže spôsobovať efekt rozpíjania textu a vpíjania písmen do seba.

Riešením je použitie menej bieleho pozadia alebo sivšieho textu.

Ďalšou častou chybou je, že hypertextové odkazy nie sú dostatočne jasne odlíšené od zvyšného textu, a tak má čitateľ sťaženú možnosť preklikať sa na zdroje či podrobnejšie informácie, hoci na ne odkazujete.

 

Odsadenie obrázkov od textu

Pri obrázkoch je dôležité, aby neboli úplne nalepené na okolitý text. Jednak sa zhorší vnímanie obrázkov, ale tiež sa stránka stane neprehľadnou, pričom to ani nepôsobí esteticky dobre.

Preto medzi obrázkami a textom nechávame dostatočnú medzeru.

 

Poslednou a aj najrozsiahlejšou časťou typografie je výber rodiny písiem, takzvaného fontu. Na túto konkrétnu tému sa vzhľadom na jej rozsah pozrieme až v následujúcom článku.