Schriftgrößen kann man entweder fest – in Pixeln (px) oder Punkt (pt) – oder aber variabel in Prozent oder em angeben.
Der unbestrittene Vorteil variabler Größen ist es, dass die Besucher einer Website deren Schrift frei in der Größe verändern können, indem sie Strg + zum Vergrößern bzw. Strg – zum Verkleinern drücken. Dies ist ein wichtiger Schritt in Richtung Barrierefreiheit.

Viele moderne Browser ermöglichen es zwar mittlerweile, auch in Pixeln angegebene Schrift zu vergrößern – der Internet Explorer hingegen nicht.

em – was ist das?

Das Kürzel em steht für em-quad, lautmalerisch für [die Breite des Buchstabens] ‘M’ – früher gab es die Breite jenes Metallstücks an, aus dem ein Bleiletter geschnitten wurde. Heute, im Computerzeitalter, gilt em als ein vertikaler Messwert.

Wie bereits erwähnt, stellt die in em ausgewiesene Schriftgröße eine relative Angabe dar – relativ zu was, fragt sich da. ;-) Ausschlaggebend ist das Elternelement, das seine Eigenschaften an die Kindelemente vererbt (also beispielsweise vererbt ein Absatz seine Schriftgröße an einen darin befindlichen Link, sofern für diesen nichts anderes definiert wird).

Standardmäßig entsprechen 16px einem em, sofern der User dies nicht in seinen Browsereinstellungen geändert hat.
Damit es zu keinen Problemen mit dem IE kommt, legen wir zunächst im Body-Tag fest, dass die Schriftgröße 100.01% betragen soll – bei manchen Versionen des Internet Explorers existiert ein Bug, durch den alles, was kleiner als 0.8em definiert wurde, winzig klein dargestellt wird und nicht in der eigentlich beabsichtigten Größe.
Wichtig ist, dass du diese Angabe im Body-Tag machst und nicht im Universalselektor (*), da es auch hier zu Problemen kommen kann. Der Grund, warum wir 100.01% nehmen und nicht einfach 100%, ist ein anderer Browser: bei exakt 100% macht der Opera 6 Zicken. Oh du Fröhliche… ;-)

body {
font-size: 100.01%;
}

Anschließend werden die übrigen Schriftgrößen – für Überschriften, Absätze usw. – wie gewohnt angegeben, allerdings nun in em.
Untenstehend findet sich eine Umrechnungstabelle.

10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em

nicht nur für Schrift…

Wenn du ein sogenanntes elastisches Layout haben möchtest – eines, bei dem sich nicht nur die Schriftgröße, sondern auch die Größe einzelner Elemente (wie etwa des Menues) durch den User skalieren lassen soll, dann bietet es sich an, auch die Elemente wie Divs relativ in em zu bemessen.