Falls es dir ähnlich geht wie mir, hier eine Über­sicht, die ein wenig Licht ins Dunkel bringen soll. Damit dir die Entscheidung für eine Schrifteinheit, bei deinem nächsten Projekt auf keinen Fall mehr Kopfzerbrechen bereitet.

Pixel (px)

Ein Pixel ist die kleinste Einheit einer Rastergrafik, bzw. deren Bildschirmdarstellung. Eine Schrift in 14px, ist also auf deinem Monitor 14 Pixel hoch, ganz egal welche Schriftart du verwendest.

Pixel ist also eine sta­ti­sche Einheit. Sie ver­än­dert sich nicht. Egal ob du dir die Schrift auf Windows oder Mac, oder in unter­schied­li­chen Browsern anschaust.

Pixel ver­än­dern sich auch nicht in ver­schach­telten (casca­ding) Parent-Child-Elementen. Wenn du also in einen Parent-Element mit 18px ein Child-Element mit 16px plat­zierst, bleibt das Child-Element 16px groß.

Willst du sicher gehen, dass dein Design, auch auf unter­schied­li­chen Systemen und Browsern, genau so aus­sieht, wie du es auf deinem eigenen Rechner ange­legt hast, dann erreichst du das sicher am besten mit Pixeln.

em

Die Schrifteinheit em (aus dem Schriftsatz: equal to M) hat im Gegensatz zu Pixeln keinen festen Wert, da em immer relativ zur defi­nierten Schriftgröße in Pixeln steht.
Wenn du also in deinem CSS Style Sheet die Textgröße mit 10px defi­nierst, ist 1em=10px. Soll deine h1-Überschrift dann 30px groß sein, sind das 3em. Eigentlich gar nicht so schwierig, oder?

Wenn du aller­dings nir­gends in deinem CSS eine feste Textgröße defi­niert hat, ori­en­tiert sich em an der stan­dard­mä­ßigen Browser-Einstellung, die bei den meisten Browsern bei 16px liegt. 1Em wäre dann also dann =16px.

Du kannst dir bestimmt schon vor­stellen, dass diese Rechnung auch kom­pli­zierter werden kann. Vor allem wenn du in deinem Style Sheet eine ganze Reihe unter­schied­li­cher Schriftgrößen ver­wen­dest.
Ein beliebter Trick ist des­halb, die Textgöße nicht auf einen festen Pixelwert zu setzen, son­dern auf 62.5%. Denn wenn die Standard-Browsereinstellung 16px ist, macht das bei 62.5% =10px. So wird eine Schriftgröße von 21px zu 2.1em, was die Rechnung sehr viel ein­fa­cher macht.

Was sind die Vor- und Nachteile?

Ein großer Vorteil der Einheit em ist, dass em, im Gegensatz zu Pixeln, in Internet Explorer 6 oder noch älteren Browsern in der Größe ver­än­derbar ist.

Ems sind außerdem auch auf Webseiten mit elas­ti­schen Layouts im Einsatz. Hier werden alle Elemente der Webseite in em defi­niert, so dass alle Elemente im Verhältnis zuein­ander stehen.
Das heißt: Wenn du deine Schriftgröße ver­än­derst, passen sich alle Elemente auf deiner Seite an. Das macht ein elas­ti­sches Layout natür­lich enorm flexibel.

Vorsichtig soll­test du aller­dings sein, wenn du em vor allem als Ersatz für Pixel ver­wenden willst. Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie ver­än­dern ihren Wert, sobald zwei Elemente inein­ander ver­schach­telt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durch­ein­ander führen kann, wenn du viele Elemente inein­ander verschachtelst.

Nützliche kleine Helfer

Beim prak­ti­schen Pixel zu Em-Umwandler bekommst du den CSS Code für deine Schriften auch gleich mit dazu.

Der Pixel zu Em Rechner ist ein kleines, aber hilf­rei­ches Javascript-Tool.

Mit Typetester kannst du Schriften in ver­schie­denen Größen, Farben, und Fonts testen, und bekommst auch gleich den CSS Code für deine Auswahl generiert.

Noch mehr Lesestoff

»How to size Text in CSS« ein Artikel von Richard Rutter von A List Apart.com.

Einen tolle Über­sicht über Pixel, Em, Prozent und Punkt gibt Chris Colier von CSS-Tricks in seinem Artikel »px-em-%-keyword«.