Pri vytváraní webovej stránky väčšina profesionálov odporúča, aby ste veľkosť písma (a vlastne všetkého) zmenšili relatívnou mierou, ako sú ems, exs, percentá alebo pixely. Je to tak preto, lebo naozaj nepoznáte všetky spôsoby, ako by niekto mohol prezerať váš obsah. A ak použijete absolútnu mieru (palce, centimetre, milimetre, body alebo obrázky), môže to mať vplyv na zobrazenie alebo čitateľnosť stránky v rôznych zariadeniach. A odporúča W3C že pre veľkosti používate ems.
Ale aký veľký je em?
Podľa W3C em:
"sa rovná vypočítanej hodnote vlastnosti 'veľkosť písma' prvku, na ktorý sa používa. Výnimkou je prípad, keď sa znak „em“ vyskytne v hodnote samotnej vlastnosti „font-size“, v takom prípade sa odkazuje na veľkosť písma nadradeného prvku. “
Inými slovami, ems nemajú absolútnu veľkosť. Preberajú hodnoty svojej veľkosti na základe toho, kde sa nachádzajú. Pre väčšinu webdizajnéri, To znamená, že sa nachádzajú vo webovom prehľadávači, takže písmo, ktoré je vysoké 1ém, má presne rovnakú veľkosť ako predvolená veľkosť písma pre daný prehliadač.
Aká vysoká je však predvolená veľkosť? Neexistuje spôsob, ako si byť stopercentne istý, pretože zákazníci môžu meniť svoje predvolená veľkosť písma vo svojich prehliadačoch, ale keďže to väčšina ľudí nemá, môžete predpokladať, že väčšina prehliadačov má predvolenú veľkosť písma 16px. Takže väčšinou 1em = 16px.
Myslite v pixeloch, na meranie použite ems
Keď viete, že predvolená veľkosť písma je 16 pixelov, môžete pomocou ems povoliť svojim klientom ľahkú zmenu veľkosti stránky, ale myslieť na pixelov pre vaše veľkosti písma. Povedzme, že máte veľkosťnú štruktúru podobnú tejto:
- Nadpis 1 - 20 pixelov
- Nadpis 2 - 18 pixelov
- Nadpis 3 - 16 pixelov
- Hlavný text - 14 pixelov
- Vedľajší text - 12px
- Poznámky pod čiarou - 10 pixelov
Takto by ste ich mohli definovať pomocou pixelov na meranie, ale potom by ktokoľvek, kto používa IE 6 a 7, nemohol dobre zmeniť veľkosť vašej stránky. Mali by ste teda previesť veľkosti na ems a toto je len otázka matematiky:
- Nadpis 1 - 1.25em (16 x 1,25 = 20)
- Nadpis 2 - 1.125em (16 × 1,125 = 18)
- Nadpis 3 - 1ém (1em = 16 pixlov)
- Hlavný text - 0,875 em (16 x 0,875 = 14)
- Subtext - 0.75em (16 x 0.75 = 12)
- Poznámky pod čiarou - 0,625em (16 x 0,625 = 10)
Nezabudnite na dedičstvo!
Ale to nie je všetko, čo majú ems. Ďalšia vec, ktorú si musíte pamätať, je, že zaberajú veľkosť rodiča. Takže ak máte vnorené prvky s rôznymi veľkosťami písma, môžete skončiť s fontom oveľa menším alebo väčším, ako čakáte.
Môžete mať napríklad nasledujúcu šablónu štýlov:
Výsledkom by boli písma s veľkosťou 14 pixelov a 10 pixelov pre hlavný text a poznámky pod čiarou. Ak však vložíte poznámku pod čiarou do odseku, môžete skončiť textom, ktorý má namiesto 8px 8,75 pixelov. Vyskúšajte to sami, vložte vyššie uvedené CSS a nasledujúci kód HTML do dokumentu:
Ak teda používate ems, musíte si byť veľmi dobre vedomí veľkostí nadradených objektov, inak na svojej stránke nájdete prvky s naozaj nepárnou veľkosťou.