Wanneer u een webpagina maakt, raden de meeste professionals aan dat u lettertypen (en eigenlijk alles) vergroot met een relatieve maat zoals ems, exs, percentages of pixels. Dit komt omdat u echt niet alle verschillende manieren kent waarop iemand uw inhoud kan bekijken. En als u een absolute maat gebruikt (inch, centimeter, millimeter, punten of pica's), kan dit de weergave of leesbaarheid van de pagina op verschillende apparaten beïnvloeden. En de W3C beveelt aan dat je ems gebruikt voor maten.
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 aan op basis van waar ze zijn. Voor de meesten webdesigners, dit betekent dat ze zich in een webbrowser bevinden, dus een lettertype dat 1 meter groot is, heeft precies dezelfde grootte als de standaardlettergrootte voor die browser.
Maar hoe hoog is de standaardmaat? Er is geen manier om 100% zeker te zijn, omdat klanten hun standaard lettergrootte in hun browsers, maar aangezien de meeste mensen dat niet doen, kun je ervan uitgaan dat de meeste browsers een standaardlettergrootte van 16px hebben. Dus meestal 1em = 16px.
Denk in pixels, gebruik ems voor de maat
Als u eenmaal weet dat de standaard lettergrootte 16px is, kunt u ems gebruiken om uw klanten toe te staan de pagina gemakkelijk te verkleinen, maar denk in pixels voor uw lettergroottes. Stel dat je een maatstructuur hebt, ongeveer als volgt:
- 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 pixels voor de meting, maar dan zou iedereen die IE 6 en 7 gebruikt, je pagina niet goed kunnen verkleinen. Dus je moet de maten naar ems 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 erfenis niet!
Maar dat is niet alles wat ems te bieden heeft. Het andere dat u moet onthouden, is dat ze de grootte van de ouder aannemen. Dus als je elementen met verschillende lettergroottes hebt genest, kun je eindigen met een lettertype dat veel kleiner of groter is dan je verwacht.
U kunt bijvoorbeeld een stylesheet hebben zoals deze:
Dit zou resulteren in lettertypen die respectievelijk 14px en 10px zijn voor de hoofdtekst en de voetnoten. Maar als u een voetnoot in een alinea plaatst, kunt u eindigen met tekst van 8,75 px in plaats van 10 px. Probeer het zelf, zet het bovenstaande CSS en de volgende HTML in een document:
Dus als je ems gebruikt, moet je goed op de hoogte zijn van de grootte van de bovenliggende objecten, anders krijg je een aantal echt vreemde elementen op je pagina.