Når du bygger en webside, anbefaler de fleste fagpersoner at du størrelse skrifttyper (og faktisk alt) med et relativt mål som ems, exs, prosenter eller piksler. Dette er fordi du egentlig ikke kjenner til de forskjellige måtene noen kan se på innholdet ditt. Og hvis du bruker et absolutt mål (tommer, centimeter, millimeter, punkter eller picas), kan det påvirke visningen eller lesbarheten til siden i forskjellige enheter. Og anbefaler W3C at du bruker ems for størrelser.
Men hvor stor er en em?
Ifølge W3C en em:
"er lik den beregnede verdien av" font-size "-egenskapen til elementet som den brukes på. Unntaket er når 'em' forekommer i verdien av selve egenskapen 'fontstørrelse', i hvilket tilfelle den refererer til skriftstørrelsen til det overordnede elementet. "
Med andre ord har ems ikke en absolutt størrelse. De tar på seg størrelsesverdiene sine basert på hvor de er. For de fleste webdesignere, dette betyr at de er i en nettleser, så en skrift som er 1 em høy er nøyaktig samme størrelse som standard skriftstørrelse for den nettleseren.
Men hvor høy er standardstørrelsen? Det er ingen måte å være 100% sikker på, ettersom kunder kan endre sine standard skriftstørrelse i nettleserne, men siden de fleste ikke gjør det, kan du anta at de fleste nettlesere har en standard skriftstørrelse på 16 px. Så mesteparten av tiden 1 em = 16 piksler.
Tenk i piksler, bruk ems for mål
Når du vet at standard skriftstørrelse er 16 piksler, kan du deretter bruke ems for å la kundene dine endre størrelse på siden enkelt, men tenk på piksler for skriftstørrelser. Si at du har en størrelsesstruktur som dette:
- Overskrift 1 - 20px
- Overskrift 2 - 18 px
- Overskrift 3 - 16px
- Hovedtekst - 14px
- Undertekst - 12 px
- Fotnoter - 10 px
Du kan definere dem på den måten ved hjelp av piksler for målingen, men alle som bruker IE 6 og 7 vil ikke kunne endre størrelsen på siden din godt. Så du bør konvertere størrelsene til ems, og dette er bare et spørsmål om matematikk:
- Overskrift 1 - 1,25 em (16 x 1,25 = 20)
- Overskrift 2 - 1.125em (16 × 1.125 = 18)
- Overskrift 3 - 1 em (1 em = 16 piksler)
- Hovedtekst - 0,875 em (16 x 0,875 = 14)
- Undertekst - 0,75 em (16 x 0,75 = 12)
- Fotnoter - 0,625 em (16 x 0,625 = 10)
Ikke glem arv!
Men det er ikke alt det er for ems. Den andre tingen du må huske er at de tar på seg størrelsen på foreldrene. Så hvis du har nestede elementer med forskjellige skriftstørrelser, kan du ende opp med en skrift som er mye mindre eller større enn du forventer.
For eksempel kan du ha et stilark som dette:
Dette vil resultere i skrifter som er henholdsvis 14px og 10px for henholdsvis hovedteksten og fotnotene. Men hvis du legger en fotnote i et avsnitt, kan du ende opp med en tekst som er 8,75 px snarere enn 10 px. Prøv det selv, legg over CSS og følgende HTML i et dokument:
Så når du bruker ems, må du være veldig klar over størrelsen på de overordnede objektene, ellers vil du ende opp med noen virkelig rare størrelser på siden din.