Tekst bepalen met px is evil

Tekst vormgeven met pixels is toch zo gemakkelijk, niet ?
Maar je kan ook vormgeven aan tekst door woorden smal, smaller, xxsmal, bold, bolder, etc…, en em.

em is de waarde die de browser opgeeft als standaard waarde voor hoogte van letters, en die is meestal hetzelfde bij de browsers zonder Internet Explorer.

Dus waarom em gebruiken

Door em te gebruiken draag je bij aan toegankelijkheid, mensen die niet zo goed kunnen zien, of liever grote letters lezen, kunnen daarmee hun browser instellingen aanpassen naar een groter lettertype wat bij als je pixel gebruikt niet het geval is, als je 16pixel aangeeft, zal de tekst ook 16pixel zijn, in eender welke instelling, met em zal de waarde stijgen als de instelling verhoogd wordt.

Tekst stijl geven met em ? Daar zullen velen van terugschrikken omdat het meestal niet juist is, of helemaal niet werkt.

Dus elke moderne browsers geeft een standaard waarde op, en als je standaard waarde op medium (in IE normaal) staat, dan is deze waarde 16px, bij elke moderne browser.

Werken met em

Om gemakkelijk met em te kunnen werken moet je een standaard waarde maken voor je tekst, dus normaal is bij elke browser 16px de standaard waarde, nu gaan we deze gemakklijkshalve naar 10px brengen door:

16px - 62.5% = 10px

body {font-size:62.5%}

Zo nu is alles 10px, en met alles bedoel ik ook alles, zelfs h1 tot h6 etc…, dus vanaf nu is 1em = 10px

  • 0.8em = 8px
  • 1em = 10px
  • 1.2em = 12px
  • 2em = 20px
  • etc…

De tekst bepalen in een layout.

Nemen we nu een 2 kolom layout

<div id="navigatie"> ... </div>
<div id="inhoud"> ... </div>
<div id="zijkant"> ... </div>
<div id="footer"> ... </div>

#navigatie {font-size:1em}
#inhoud {font-size:1.2em}
#zijkant {font-size:1em}
#footer {font-size:0.9em}

Dus vanaf nu is de navigatie en zijkant 10px, de inhoud 12px en de footer 9px.

h1 tot h6 bepalen

Zoals ik al zei, alles in de inhoud is nu 12px, maar h1 tot h6 moet toch even een andere maat hebben.

H1 {font-size:2em} /* wordt 24px */
H2 {font-size:1.5em} /* wordt 18px */
H3 {font-size:1.25em} /* wordt 15px */
H4 {font-size:1em} /* wordt 12px */

Het probleem met geneste dingen

Nemen we nu bijvoorbeeld:

#inhoud li {font-size:0.83em}

Dus tekst in een li is nu 8.3px, maar als we nu een li nesten in een li, zoals we weten neemt de child het over van zijn parent (inherit), dus 8.3px wordt nog een met 0.83em verkleind wat het uiteindelijke resultaat geeft van 6.8px.
Om dit probleem op te lossen moet we het verkleinen dat automatisch optreed als een child de waarde overneemt van zijn parent overtreffen door volgende CSS regel toe te passen:

li li {font-size:1em}

Door dit zal de waarde van een geneste li opnieuw 8.3px ofwel 0.83em zijn. Dit geldt voor alle zaken die je kan nesten.