Wanneer u een webpagina aan het bouwen bent, raden de meeste professionals aan dat u lettertypen (en in feite alles) op maat maakt met een relatieve maat, zoals ems, ex's, percentages of pixels. Dit komt omdat u niet echt alle verschillende manieren kent waarop iemand uw inhoud zou kunnen bekijken. En als u een absolute maat gebruikt (inches, centimeters, millimeters, punten of picas), kan dit van invloed zijn op de weergave of leesbaarheid van de pagina op verschillende apparaten. En de W3C beveelt aan om ems voor maten te gebruiken.
Maar hoe groot is een Em?
Volgens de W3C een em:
"is gelijk aan de berekende waarde van de eigenschap 'font-size' van het element waarop het wordt gebruikt.De uitzondering is wanneer 'em' voorkomt in de waarde van de eigenschap 'font-size' zelf, in welk geval het verwijst naar de lettergrootte van het bovenliggende element. "
Met andere woorden, ems hebben geen absolute grootte. Ze nemen hun groottewaarden over op basis van waar ze zijn. Voor de meeste webontwerpers betekent dit dat ze zich in een webbrowser bevinden, dus een lettertype dat 1em groot is, heeft precies dezelfde grootte als de standaardlettergrootte voor die browser.
Maar hoe lang is de standaardgrootte? Er is geen enkele manier om 100% zeker te zijn, omdat klanten hun standaardlettergrootte in hun browsers kunnen wijzigen, maar omdat de meeste mensen niet aannemen dat de meeste browsers een standaardlettergrootte van 16px hebben. Dus meestal 1em = 16px.
Denk in pixels, gebruik ems voor de maat
Zodra u weet dat de standaardlettergrootte 16 px is, kunt u ems gebruiken om uw klanten toe te staan de grootte van de pagina eenvoudig te wijzigen, maar in pixels te denken voor uw lettergroottes. Stel dat je een dimensioneringsstructuur hebt die ongeveer zo is:
- Kop 1 - 20px
- Kop 2 - 18px
- Kop 3 - 16px
- Hoofdtekst - 14px
- Subtekst - 12px
- Voetnoten - 10px
Je zou ze op die manier kunnen definiëren met behulp van pixels voor de meting, maar dan zou iedereen die IE 6 en 7 gebruikt de grootte van je pagina niet goed kunnen aanpassen. Dus je zou de maten naar ems moeten converteren en dit is gewoon een kwestie van wat wiskunde:
- Kop 1 - 1.25em (16 x 1.25 = 20)
- Kop 2 - 1.125em (16 × 1.125 = 18)
- Kop 3 - 1em (1em = 16px)
- Hoofdtekst - 0.875em (16 x 0.875 = 14)
- Subtekst - 0.75em (16 x 0.75 = 12)
- Voetnoten - 0.625em (16 x 0.625 = 10)
Vergeet de overerving niet!
Maar dat is niet alles wat er is voor ems. Het andere ding dat je moet onthouden is dat ze de grootte van de ouder aannemen. Dus als u geneste elementen met verschillende lettergroottes heeft, kunt u eindigen met een lettertype dat veel kleiner of groter is dan u verwacht.
U hebt bijvoorbeeld een stylesheet zoals deze:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Dit zou resulteren in lettertypen die respectievelijk 14px en 10px zijn voor de hoofdtekst en de voetnoten. Maar als je een voetnoot in een alinea zet, zou je kunnen eindigen met tekst die 8,75px is in plaats van 10px. Probeer het zelf, zet deze bovenstaande CSS en de volgende HTML in een document:
Dit lettertype is 14px of 0.875 ems in hoogte.Deze paragraaf bevat een voetnoot.Hoewel dit slechts een voetnootparagraaf is.
De voetnoottekst is moeilijk te lezen op 10px, het is bijna onleesbaar bij 8,75px.
Dus, wanneer u ems gebruikt, moet u zich zeer bewust zijn van de groottes van de bovenliggende objecten, anders zult u eindigen met enkele elementen van heel rare grootte op uw pagina.
