Koristeći Ems za promjenu veličina fonta
Kada pravite Web stranicu, većina stručnjaka preporučuje vam da veličine fontova (i zapravo sve) sa relativnom merom kao što su ems, exs, percentages ili pixels. To je zato što zaista ne znate sve različite načine na koje neko može videti vaš sadržaj. A ako koristite apsolutnu mjeru (inči, centimetri, milimetri, tačke ili picke) to može utjecati na prikaz ili čitljivost stranice na različitim uređajima.
W3C preporučuje da koristite ems za veličine.
Ali koliko je veliki?
Prema W3C-u em:
"je jednak izračunatoj vrednosti veličine" font-size "elementa na kojem se koristi. Izuzetak je kada se 'em' pojavljuje u vrijednosti same veličine font-size, u kom slučaju se odnosi na veličinu fonta roditeljskog elementa. "
Drugim riječima, ems nemaju apsolutnu veličinu. Oni uzimaju svoje veličine u zavisnosti od toga gde se nalaze. Za većinu Web dizajnera to znači da su u Web pretraživaču, pa je font veličine 1m visok iste veličine kao i podrazumevana veličina fonta za taj pretraživač.
Ali koliko je visoka osnovna veličina? Ne postoji način da budete 100% sigurni, jer korisnici mogu promijeniti svoju podrazumevanu veličinu fonta u svojim pregledačima, ali pošto većina ljudi ne može pretpostaviti da većina pregledača ima podrazumevanu veličinu slova od 16px. Dakle, većinu vremena 1em = 16px .
Razmislite o pikselima, koristite Ems za meru
Jednom kada znate da je podrazumevana veličina fonta 16px, onda možete koristiti ems da biste svojim klijentima omogućili jednostavno promjenu veličine stranice, ali razmislite u pikselima za veličinu fonta.
Recimo da imate veličinu strukturu nešto ovako:
- Naslov 1 - 20px
- Naslov 2 - 18px
- Naslov 3 - 16px
- Glavni tekst - 14px
- Pod tekst - 12px
- Fusnote - 10px
Možete ih definisati na taj način pomoću piksela za merenje, ali onda tko bilo ko koristi IE 6 i 7 ne bi mogao promijeniti veličinu vaše stranice dobro. Dakle, trebalo bi da pretvorite veličinu u ems i ovo je samo pitanje neke matematike:
- Naslov 1 - 1.25em (16 x 1.25 = 20)
- Naslov 2 - 1.125em (16 × 1.125 = 18)
- Naslov 3 - 1em (1em = 16px)
- Glavni tekst - 0.875em (16 x 0.875 = 14)
- Sub tekst - 0.75em (16 x 0.75 = 12)
- Fusnote - 0.625em (16 x 0.625 = 10)
Ne zaboravi narodu!
Ali to nije sve što postoji za ems. Druga stvar koju treba da zapamtite je da oni uzimaju veličinu roditelja. Dakle, ako imate ugnežene elemente sa različitim veličinama fontova, možete završiti s fontom mnogo manji ili veći nego što očekujete.
Na primer, možda ćete imati ovakav stilski stil:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
To bi rezultiralo fontovima koji su 14px i 10px za glavni tekst i fusnote, respektivno. Međutim, ako stavite fusnotu u paragraf, možete završiti sa tekstom koji je 8,75px, a ne 10px. Probajte sami, stavite ovo gore CSS i sledeći HTML u dokument:
Ovaj font je visoka 14px ili 0.875 ems.
Ovaj pasus ima fusnotu u njemu.
Iako je ovo samo paragraf fusnote.
Tekst fusnote je teško čitati na 10px, skoro je nečitljiv na 8.75px.
Dakle, kada koristite ems, morate biti svesni veličine osnovnih predmeta ili ćete završiti sa nekim stvarno čudnim veličinama na vašoj stranici.