CSS use EM as a relative font-size, instead of PX

It goes back to Internet Explorer 3.0, but EMs are still the better way to define font-sizes. It takes a small learning curve to get the hang of it, but when it comes to quick changes in overall font-size, this is the way to go. Default font-size for most common browsers is 16 pixels. There are only three articles you need to read to tame that size with relative ems.

1em = 12pt = 16px = 100%

Useful reads

The EM formula

Child pixels / Parent pixels = Size in EM

Not good at calculating? Use the EM calculator

Still targeting Internet Explorer 6?

While Internet Explorer handles EM, it does so only when the base font is set to a percentage!

body { font-size: 62.5%; }
body wrapper { font-size: 1em; }

XHTML: some good practices

Some good practices on XHTML

  • <doctype> always use a doctype before <html>-tag: don’t get in quirksmode –recommended list of doctypes (W3 schools)
    • Transitional is most common
    • Strict: prohibits the use of target=”_blank” and a few other HTML tags, like s, center, strike, u, applet, iframe, font, isindex, dir, basefont
  • <h1> Only one h1 per page: use for the main topic
  • <blockquote> Only to refer to bits of text coming from other locations
  • <q> Use for a single ‘quote’
  • <table> Never use for lay-out purposes
  • <cite> References to books, websites, articles
  • <address> identify contact information to the author of a page

Other usefull tips

Disallow compatibility mode

Tell Internet Explorer never to go into compatibilty mode (use an older IE engine than the one installed). Put this after the <title>-tag:

Linking style sheets

Use <link> for simplicity and better performance

Validate your code


Forget about HTML attributes like

  • vspace
  • hspace
  • bgcolor
  • text
  • link
  • alink
  • vlink
  • img align: use CSS-floats instead

Low level format browser specific attributes like

  • leftmargin
  • topmargin
  • marginwidth
  • marginheight