Når du bygger en webside, anbefaler de fleste fagpersoner at du har størrelsesfonter (og faktisk alt) med et relativt mål som ems, exs, prosentandeler eller piksler. Dette er fordi du virkelig ikke kjenner alle de forskjellige måtene som noen kan se på innholdet ditt. Og hvis du bruker et absolutt mål (tommer, centimeter, millimeter, poeng eller picas), kan det påvirke skjermen eller lesbarheten av siden i forskjellige enheter. Og W3C anbefaler at du bruker ems for størrelser.
Men hvor stor er en em?
Ifølge W3C en em:
"er lik den beregnede verdien av egenskapen" skriftstørrelse "av elementet som den brukes på. Unntaket er når 'em' forekommer i verdien av egenskapen 'skriftstørrelse' selv, i hvilket tilfelle det refererer til til skriftstørrelsen til foreldreelementet. "
Med andre ord har ems ikke en absolutt størrelse. De tar på seg størrelsesverdiene basert på hvor de er. For de fleste webdesignere betyr dette at de er i en nettleser, så en skrift som er 1em høy, er nøyaktig den samme størrelsen som standard skriftstørrelsen for nettleseren.
Men hvor høy er standardstørrelsen? Det er ingen måte å være 100% sikker på, da kundene kan endre standard skriftstørrelse i nettleserne, men siden de fleste ikke kan anta at de fleste nettlesere har en standard skriftstørrelse på 16px. Så mesteparten av tiden 1em = 16px.
Tenk i piksler, bruk ems for målet
Når du vet at standard skriftstørrelsen er 16px, kan du da bruke ems for å la kundene dine endre størrelsen på siden enkelt, men tenk i piksler for skriftstørrelsene dine. Si at du har en størrelsesstruktur noe som dette:
- Overskrift 1 - 20px
- Overskrift 2 - 18px
- Overskrift 3 - 16px
- Hovedtekst - 14px
- Undertekst - 12px
- Fotnoter - 10px
Du kan definere dem på den måten ved å bruke piksler for målingen, men da vil alle som bruker IE 6 og 7 ikke kunne endre størrelsen på siden din godt. Så du bør konvertere størrelsene til ems, og dette handler bare om matematikk:
- Overskrift 1 - 1.25em (16 x 1.25 = 20)
- Overskrift 2 - 1.125em (16 × 1.125 = 18)
- Overskrift 3 - 1em (1em = 16px)
- Hovedtekst - 0.875em (16 x 0.875 = 14)
- Undertekst - 0.75em (16 x 0.75 = 12)
- Fotnoter - 0,625em (16 x 0,625 = 10)
Ikke glem arv!
Men det er ikke alt det er å ems. Den andre tingen du trenger å huske er at de tar på seg foreldrenes størrelse. Så hvis du har nestede elementer med forskjellige skrifttypestørrelser, kan du ende opp med en skrift mye mindre eller større enn du forventer.
Du kan for eksempel ha et stilark slik:
p {font-size: 0.875em; }.footnot {font-size: 0.625em; }
Dette vil resultere i fonter som er 14px og 10px for hovedteksten og fotnoten henholdsvis. Men hvis du legger en fotnote inne i et avsnitt, kan du ende opp med tekst som er 8.75px i stedet for 10px. Prøv det selv, sett dette over CSS og følgende HTML i et dokument:
Denne skrifttypen er 14px eller 0,875 ems i høyde.Dette avsnittet har en fotnote i den.Mens dette bare er et fotnote avsnitt.
Fotnote-teksten er vanskelig å lese på 10px, den er nesten uleselig på 8.75px.
Så når du bruker ems, må du være veldig oppmerksom på størrelsene på de overordnede objektene, eller du vil ende opp med noen virkelig merkelige størrelser på siden din.
