Kommentare 5

Pixel oder em? Welche Schrifteinheit ist die Richtige?

Soll ich Pixel oder em für mein CSS verwenden? Was sind eigentlich die Unterschiede? Und welche Vor- und Nachteile gibt es? Da ich ursprünglich aus dem Grafikdesign komme, war mir früher eigentlich nur Punkt (pt) als Schrifteinheit geläufig. Im Webdesign begegneten mir dann auf einmal Pixel (irgendwie noch logisch), em (schon etwas komplizierter) und Prozent als weitere Einheiten. Es war also mal wieder an der Zeit, etwas Neues dazu zu lernen.

Pixel oder em

Falls es dir ähnlich geht wie mir, hier eine Übersicht, 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 im Vergleich

Pixel ist also eine statische Einheit. Sie verändert sich nicht. Egal ob du dir die Schrift auf Windows oder Mac, oder in unterschiedlichen Browsern anschaust.

Pixel verändern sich auch nicht in verschachtelten (cascading) Parent-Child-Elementen. Wenn du also in einen Parent-Element mit 18px ein Child-Element mit 16px platzierst, bleibt das Child-Element 16px groß.

Willst du sicher gehen, dass dein Design, auch auf unterschiedlichen Systemen und Browsern, genau so aussieht, wie du es auf deinem eigenen Rechner angelegt 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 definierten Schriftgröße in Pixeln steht.
Wenn du also in deinem CSS Style Sheet die Textgröße mit 10px definierst, ist 1em=10px. Soll deine h1-Überschrift dann 30px groß sein, sind das 3em. Eigentlich gar nicht so schwierig, oder?

Wenn du allerdings nirgends in deinem CSS eine feste Textgröße definiert hat, orientiert sich em an der standardmäßigen Browser-Einstellung, die bei den meisten Browsern bei 16px liegt. 1Em wäre dann also dann =16px.

Du kannst dir bestimmt schon vorstellen, dass diese Rechnung auch komplizierter werden kann. Vor allem wenn du in deinem Style Sheet eine ganze Reihe unterschiedlicher Schriftgrößen verwendest.
Ein beliebter Trick ist deshalb, die Textgöße nicht auf einen festen Pixelwert zu setzen, sondern 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 einfacher 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änderbar ist.

Ems sind außerdem auch auf Webseiten mit elastischen Layouts im Einsatz. Hier werden alle Elemente der Webseite in em definiert, so dass alle Elemente im Verhältnis zueinander stehen.
Das heißt: Wenn du deine Schriftgröße veränderst, passen sich alle Elemente auf deiner Seite an. Das macht ein elastisches Layout natürlich enorm flexibel.

Vorsichtig solltest du allerdings sein, wenn du em vor allem als Ersatz für Pixel verwenden willst. Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

Nützliche kleine Helfer

Beim praktischen 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 hilfreiches Javascript-Tool.

Mit Typetester kannst du Schriften in verschiedenen 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 Übersicht über Pixel, Em, Prozent und Punkt gibt Chris Coyier von CSS-Tricks in seinem Artikel »px-em-%-keyword«.

5 Kommentare

  1. Wieder mal was gelernt :) Vielen Dank für diesen sehr hilfreichen Artikel. Die Frage, ob es besser ist, px oder em zu verwenden, hat mich auch schon verwirrt. Nächstes Mal weiss ich es schon etwas besser ;)

Schreibe eine Antwort