Når du bygger en webside, anbefaler de fleste fagfolk, at du størrelse skrifttyper (og faktisk alt) med et relativt mål som ems, exs, procenter eller pixels. Dette skyldes, at du virkelig ikke kender alle de forskellige måder, som nogen kan se dit indhold på. Og hvis du bruger et absolut mål (inches, centimeter, millimeter, point eller picas), kan det påvirke visningen eller læsbarheden af siden i forskellige enheder. Og anbefaler W3C at du bruger ems til størrelser.
Men hvor stor er en em?
Ifølge W3C en em:
"er lig med den beregnede værdi af egenskaben 'skriftstørrelse' for det element, som den bruges på. Undtagelsen er, når 'em' forekommer i selve egenskaben 'fontstørrelse', i hvilket tilfælde den henviser til fontstørrelsen på det overordnede element. "
Med andre ord har ems ikke en absolut størrelse. De påtager sig deres størrelsesværdier baseret på hvor de er. For de fleste webdesignere, betyder det, at de er i en webbrowser, så en skrifttype, der er 1 em høj, er nøjagtig den samme størrelse som standardskrifttypestørrelsen for den browser.
Men hvor høj er standardstørrelsen? Der er ingen måde at være 100% sikker på, da kunder kan ændre deres standard skriftstørrelse i deres browsere, men da de fleste ikke gør det, kan du antage, at de fleste browsere har en standard skriftstørrelse på 16 pixel. Så det meste af tiden 1 em = 16 pixel.
Tænk i pixel, brug ems til målingen
Når du først ved, at standard skrifttypestørrelse er 16 pixel, kan du derefter bruge ems til at give dine klienter mulighed for let at ændre størrelse på siden, men tænk ind pixels til dine skriftstørrelser. Sig, at du har en størrelsesstruktur noget som dette:
- Overskrift 1 - 20 px
- Overskrift 2 - 18 px
- Overskrift 3 - 16 px
- Hovedtekst - 14 px
- Undertekst - 12 px
- Fodnoter - 10 px
Du kan definere dem på den måde ved hjælp af pixels til målingen, men så vil enhver, der bruger IE 6 og 7 ikke være i stand til at ændre størrelsen på din side godt. Så du skal konvertere størrelserne til ems, og dette er bare et spørgsmål om matematik:
- Overskrift 1 - 1,25 em (16 x 1,25 = 20)
- Overskrift 2 - 1.125 em (16 × 1.125 = 18)
- Overskrift 3 - 1 em (1 em = 16 pixel)
- Hovedtekst - 0,875 em (16 x 0,875 = 14)
- Undertekst - 0,75 em (16 x 0,75 = 12)
- Fodnoter - 0.625em (16 x 0.625 = 10)
Glem ikke arv!
Men det er ikke alt der er til ems. Den anden ting, du skal huske, er at de tager størrelsen på forældrene. Så hvis du har indlejrede elementer med forskellige skriftstørrelser, kan du ende med en skrifttype, der er meget mindre eller større, end du forventer.
For eksempel har du muligvis et stilark som dette:
Dette ville resultere i skrifttyper, der er henholdsvis 14 pixel og 10 pixel for henholdsvis hovedteksten og fodnoterne. Men hvis du placerer en fodnote inde i et afsnit, kan du ende med en tekst, der er 8,75 px snarere end 10 px. Prøv det selv, sæt ovenstående CSS og følgende HTML i et dokument:
Så når du bruger ems, skal du være meget opmærksom på størrelsen på de overordnede objekter, ellers vil du ende med nogle virkelig ulige størrelseselementer på din side.