Kada izrađujete web stranicu, većina stručnjaka preporučuje da fontove (i zapravo sve) prilagodite relativnoj mjeri kao što su ems, exs, postoci ili pikseli. To je zato što zaista ne znate sve različite načine na koje bi netko mogao pregledati vaš sadržaj. A ako koristite apsolutnu mjeru (inči, centimetri, milimetri, točke ili pike), to bi moglo utjecati na prikaz ili čitljivost stranice na različitim uređajima. I W3C preporučuje da koristite ems za veličine.
Ali koliko su veliki em?
Prema W3C em:
"jednaka je izračunatoj vrijednosti svojstva 'font-size' elementa na kojem se koristi. Iznimka je kada se 'em' pojavljuje u vrijednosti samog svojstva 'font-size', u tom se slučaju odnosi na veličinu fonta nadređenog elementa. "
Drugim riječima, ems nemaju apsolutnu veličinu. Preuzimaju vrijednosti veličine na temelju toga gdje se nalaze. Za većinu web dizajneri, to znači da su u web pregledniku, tako da je font visok 1em potpuno iste veličine kao zadana veličina fonta za taj preglednik.
Ali koliko je visoka zadana veličina? Ne postoji način da budemo 100% sigurni, jer kupci mogu promijeniti svoje zadana veličina fonta u svojim preglednicima, ali s obzirom da većina ljudi ne može pretpostaviti da većina preglednika ima zadanu veličinu fonta 16px. Tako većinu vremena 1em = 16 piksela.
Razmišljajte u pikselima, upotrijebite ems za mjerenje
Jednom kada saznate da je zadana veličina fonta 16 piksela, tada možete koristiti ems kako biste omogućili svojim klijentima da lako promijene veličinu stranice, ali razmišljaju u piksela za vaše veličine fontova. Recimo da imate strukturu dimenzioniranja otprilike ovako:
- Naslov 1 - 20 piksela
- Naslov 2 - 18 piksela
- Naslov 3 - 16 piksela
- Glavni tekst - 14 piksela
- Podtekst - 12 piksela
- Fusnote - 10 piksela
Mogli biste ih na taj način definirati pomoću piksela za mjerenje, ali tada svatko tko koristi IE 6 i 7 ne bi mogao dobro promijeniti veličinu vaše stranice. Stoga biste trebali pretvoriti veličine u ems, a ovo je samo pitanje neke matematike:
- Naslov 1 - 1,25 em (16 x 1,25 = 20)
- Naslov 2 - 1.125em (16 × 1.125 = 18)
- Naslov 3 - 1em (1em = 16 piksela)
- Glavni tekst - 0,875em (16 x 0,875 = 14)
- Podtekst - 0,75em (16 x 0,75 = 12)
- Fusnote - 0,625em (16 x 0,625 = 10)
Ne zaboravite na nasljedstvo!
Ali to nije sve što ima ems. Druga stvar koju morate zapamtiti jest da poprimaju veličinu roditelja. Dakle, ako imate ugniježđene elemente s različitim veličinama fonta, mogli biste dobiti font koji je mnogo manji ili veći nego što očekujete.
Na primjer, možda imate sljedeći stil:
To bi rezultiralo fontovima veličine 14 i 10 piksela za glavni tekst, odnosno fusnotama. Ali ako stavite fusnotu unutar odlomka, na kraju ćete dobiti tekst koji iznosi 8,75 px, a ne 10 px. Pokušajte sami, stavite gore CSS i sljedeći HTML u dokument:
Dakle, kada upotrebljavate ems, morate biti vrlo svjesni veličina nadređenih objekata ili ćete na svojoj stranici dobiti neke stvarno čudne elemente.