När du bygger en webbsida rekommenderar de flesta yrkesverksamma att du tecknar typsnitt (och faktiskt allt) med ett relativt mått som ems, exs, procentsatser eller pixlar. Detta beror på att du verkligen inte känner till alla olika sätt som någon kan se ditt innehåll på. Och om du använder ett absolut mått (tum, centimeter, millimeter, punkter eller picas) kan det påverka visningen eller läsbarheten på sidan i olika enheter. Och rekommenderar W3C att du använder ems för storlekar.
Men hur stor är en em?
Enligt W3C en em:
"är lika med det beräknade värdet på" font-size "-egenskapen för det element som den används på. Undantaget är när 'em' förekommer i värdet på egenskapen 'font-size' i sig, i vilket fall det hänvisar till teckenfönstret för det överordnade elementet. "
Med andra ord har ems inte en absolut storlek. De tar på sig storleksvärdena baserat på var de är. För de flesta webbdesigners, detta betyder att de finns i en webbläsare, så att ett teckensnitt som är 1 em högt är exakt samma storlek som standardstorleken för den webbläsaren.
Men hur lång är standardstorleken? Det finns inget sätt att vara 100% säker, eftersom kunder kan ändra sina standard teckenstorlek i deras webbläsare, men eftersom de flesta inte gör det kan du anta att de flesta webbläsare har en standardstorlek på 16 pixlar. Så för det mesta 1em = 16px.
Tänk i pixlar, använd ems för måttet
När du väl vet att standardstorleken är 16 pixlar kan du sedan använda ems så att dina klienter lätt kan ändra storlek på sidan men tänka in pixlar för dina teckenstorlekar. Anta att du har en dimensioneringsstruktur ungefär så här:
- Rubrik 1 - 20 pixlar
- Rubrik 2 - 18 pixlar
- Rubrik 3 - 16px
- Huvudtext - 14px
- Undertext - 12 pixlar
- Fotnoter - 10 pixlar
Du kan definiera dem på det sättet med hjälp av pixlar för mätningen, men då skulle alla som använder IE 6 och 7 inte kunna ändra storleken på din sida. Så du bör konvertera storlekarna till ems och det här är bara en fråga om matematik:
- Rubrik 1 - 1,25 em (16 x 1,25 = 20)
- Rubrik 2 - 1.125em (16 × 1.125 = 18)
- Rubrik 3 - 1em (1em = 16px)
- Huvudtext - 0,875 em (16 x 0,875 = 14)
- Undertext - 0,75 em (16 x 0,75 = 12)
- Fotnoter - 0.625em (16 x 0.625 = 10)
Glöm inte arv!
Men det är inte allt som finns för ems. Det andra du behöver komma ihåg är att de tar på sig föräldrarnas storlek. Så om du har kapslade element med olika teckensnittsstorlekar kan du få ett teckensnitt som är mycket mindre eller större än du förväntar dig.
Du kan till exempel ha ett formatmall så här:
Detta skulle resultera i teckensnitt som är 14 pixlar och 10 pixlar för huvudtexten respektive fotnoterna. Men om du lägger en fotnot i ett stycke kan du sluta med text som är 8,75 pixlar snarare än 10 pixlar. Prova själv, sätt ovanstående CSS och följande HTML i ett dokument:
Så när du använder ems måste du vara mycket medveten om storlekarna på de överordnade objekten, annars får du några riktigt udda storlekar på din sida.