När du bygger en webbsida rekommenderar de flesta proffs att du storlekar typsnitt (och faktiskt allt) med en relativ åtgärd som ems, exs, procentandelar eller pixlar. Detta beror på att du verkligen inte vet alla olika sätt som någon kan se ditt innehåll. Och om du använder en absolut åtgärd (tum, centimeter, millimeter, punkter eller picas) kan det påverka displayen eller läsbarheten av sidan i olika enheter. Och W3C rekommenderar 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 för egenskapen" typsnittstorlek "för det element som det används på. Undantaget är när" em "inträffar i värdet av egenskapen" typsnittstorlek ", i vilket fall det hänvisas till teckenstorleken på moderelementet. "
Med andra ord har ems inte en absolut storlek. De tar på sig sina storlekar baserat på var de är. För de flesta webbdesigners betyder det att de är i en webbläsare, så ett tecken som är 1em högt är exakt samma storlek som standardstorleken för den webbläsaren.
Men hur stor är standardstorleken? Det finns inget sätt att vara 100% säker, eftersom kunderna kan ändra sin standardstorlek i sina webbläsare, men eftersom de flesta inte kan anta att de flesta webbläsare har en standardstorlek på 16px. Så det mesta av tiden 1em = 16px.
Tänk på pixlar, använd ems för åtgärden
När du väl vet att standardfonstorlekstorleken är 16px kan du sedan använda ems så att dina klienter enkelt kan ändra storlek på sidan, men tänk i pixlar för dina teckensnittstorlekar. Säg att du har en dimensioneringsstruktur något som så här:
- Rubrik 1 - 20px
- Rubrik 2 - 18px
- Rubrik 3 - 16px
- Huvudtext - 14px
- Subtext - 12px
- Fotnoter - 10px
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 storlek på din sida bra. Så du borde konvertera storlekarna till ems och det här handlar bara om matematik:
- Rubrik 1 - 1.25em (16 x 1.25 = 20)
- Rubrik 2 - 1.125em (16 × 1.125 = 18)
- Rubrik 3 - 1em (1em = 16px)
- Huvudtext - 0.875em (16 x 0.875 = 14)
- Subtext - 0.75em (16 x 0.75 = 12)
- Fotnoter - 0,625em (16 x 0,625 = 10)
Glöm inte arv!
Men det är inte allt det finns att ems. Det andra du behöver komma ihåg är att de tar på sig förälderns storlek. Så om du har kapslade element med olika teckenstorlekar kan du sluta med ett teckensnitt som är mycket mindre eller större än du förväntar dig.
Du kan till exempel ha ett stilark så här:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Detta skulle resultera i teckensnitt som är 14px och 10px för huvudtexten respektive fotnoter. Men om du lägger en fotnot i ett stycke kan du hamna med text som är 8.75px snarare än 10px. Prova själv, sätt detta ovanstående CSS och följande HTML i ett dokument:
Denna typsnitt är 14px eller 0,875 cm i höjd.Denna paragraf har en fotnot i den.Även om detta bara är en fotnot paragraf.
Fotnottexten är svår att läsa vid 10px, den är nästan oläslig vid 8,75px.
Så, när du använder ems måste du vara mycket medveten om storleken på de överordnade objekten, eller så kommer du att sluta med några mycket oddformade element på din sida.
