Webová typografia – veľkosť fontu a riadkovanie

Kvalitná prezentácia textu na webstránke je rovnako dôležitá ako krása grafiky a zmysel textu.

Na dobré usporiadanie textu na webe mnoho slovenských dizajnérov zabúda. Grafik, ktorý vymyslí vizuál stránky, má často o riadkovaní, odstavcoch a zarovnaniach len letmú predstavu a kóder je rád, že sa mu grafikovu predstavu podarí nasekať do CSS.

Pravidlá typografie na webstránke sa odlišujú od typografie v iných médiách. Pozrime sa na niekoľko základných pravidiel formátovania textu v CSS, konkrétne určovanie veľkosti písma, riadkovania a vertikálneho odsadenia.

Vypočítanie veľkosti písma

Vypočítanie veľkosti fontu na webstránke je jednoduché.

Pravdepodobne ste sa už stretli s jednotkou veľkosti s názvom em. Je to relatívna jednotka veľkosti. Jeden em je rovný výške použitého fontu. Ak máte problém premýšlať v emoch, radím predstaviť si emy prosto ako percentá. Jeden em je 100 % veľkosti fontu.

Osobne v CSSkách na nastavovanie typografie používam percentá aj emy. Percentá pre základné veľkosti písma a emy pre line-height, marginy a paddingy. Nemá to žiaden natvrdo daný racionálny základ, je to len vec môjho dlhoročného zvyku.

Spôsobov, ako nastaviť základnú veľkosť písma pre celý dokument je viacero.

Defaultna (prednastavená) hodnota veľkosti písma (font-size) v prehliadačoch je spravidla 16 pt (16 points – 16 bodov, ak si užívateľ veľkosť písma nezmenil). Keďže väčšina užívateľov si veľkosť písma nemení, a 16 pt je pomerne veľké písmo, tendencia dizajnérov je základnú veľkosť pre celý dokument zmeniť na menšiu.

Nastavme teda veľkosť písma v dokumente napríklad na 75 %.

body {font-size: 75%;}

Od tejto hodnoty sa teda budú odvíjať všetky ostatné veľkosti v našom body.

Ak teda 100 % sa rovná 16 pt (prednastavená veľkosť v prehliadači), potom 75 % (alebo 0.75 em) je v prepočte 12 pt. To je veľkosť písma približne vhodná na text webstránky. 

Odstavce

Line-height, teda riadkovanie

Je zrejmé, že text na stránke by mal byť ľahko čitateľný, musí plynúť pravidelne a bez prerušení a náhlych skokov.

Dostávame sa k vlastnosti riadkovania: line-height. Line-height určuje výšku riadku.

Rozdiel medzi tradičným riadkovaním a riadkovaním na webe je v tom, že na webe sa pri zväčšení line-height pridáva rovnako veľa miesta nad aj pod text, v tlači len nad text. Okrem iných efektov je tento fakt dôležitý tým, že sa pomocou neho dajú vertikálne centrovať rôzne objekty. O vertikálnom centrovaní si v tomto blogu určite ešte hovoriť budeme.;]

Line-height je jediná vlastnosť v CSS, ktorá umožňuje zadanie nenulovej číslenej hodnoty bez jednotiek (teda sa dá zadať iba číslom).

Doplňme pre celý dokument riadkovanie:

body {font-size: 75%; line-height: 1.5;}

S nastavením font-size na 75% (12 pt) je line-height prepočítaná 12 pt x 1,5 = 18 pt. Hodnota 1,5 je spravidla pre text webstránky výborná, ak nemajú príliš dlhé alebo príliš krátke miesto. Text s takýmito riadkami je ľahko čitateľný a dostatočne vzdušný.

Úzke sĺpce textu potrebujú menší font a line-height pre lepšiu čitateľnosť. Široké stĺpce potrebujú väčší line-height, aby oči čitateľa dokázali sledovať, na ktorom riadku sa nachádzajú.

Ak chcete vedieť viac o miere a šírkach stĺpcov a ako ovplyvňujú vertikálne rozostupy prečítajte si napríklad článok Marka Boultona s názvom Five simple steps to better typography.

Margins, teda okraje

O vertikálnych medzerách medzi odstavcami a nadpismi nebudem v tomto článku priveľa písať, je už beztak dosť dlhý. ;] Povedzme si len, že pre dodržanie vizuálneho rytmu textu by vertikálne odsadenie odstavcov a nadpisov malo byť násobkom základného riadkovania. 

Prednastavené hodnoty horného a spodného okraja pre odstavce <p></p> v prehliadačoch sú spravidla 1 em. Pre istotu ich však nastavíme na pevno, keďže nie každý prehliadač má nutne nastavené rovnaké hodnoty.

p {margin: 1em 0 1em 0;}

Dosiahnem tak vizuálne oddelenie začiatku nového odstavca.

Záver

Toľko len tak v úplnej skratke k základnym nastaveniam niektorých vlastností textu.

Keďže webová typografia je moja obľúbená téma, ďalšie nastavenia rozoberiem v budúcich článkoch. Napríklad polemiku o vertikálnych a horizontálnych odsadeniach odstavcov, patkové fonty, letter-spacing a ďalšie perly. ;]