Umrechner: Pixel zu em

Von Perun am 21. August 2008 um 11:12

Umrechner: px zu em

Neben Pixel (px) ist em eine weitere häufig eingesetzte Einheit wenn es darum geht in CSS die Schriftgröße zu definieren, aber auch die Dimensionen einer Fläche zu bestimmen. Pixel ist relativ zu dem Ausgabegerät (Monitor) und em ist relativ zu den Einstellungen des Benutzers.

Standardmäßig ist in allen gängigen Browsern die Standardgröße der Schriften mit 16 Pixel angegeben, was in dem Fall 100% bzw. 1em entspricht. Nun gibt es zwei Vorgehensweisen, wie man jetzt mit em hier weiter arbeiten kann:

Man setzt im body (quasi die oberste Ebene) die Schriftgröße auf 100% und "sagt" noch einmal explizit, das 16 Pixel die Bezugsgröße ist. Wenn man dann die Maße und die Größen benennt muss man sich immer entweder auf die 16 Pixel oder auf die Angabe des Elternelementes beziehen, weil die Angabe zu Schriftgröße vererbt wird. Hier muss man auf jeden Fall sehr häufig entweder einen Taschenrechner oder Stift und Papier griffbereit haben.
Man setzt in body als Bezugsgröße 62.5% ein, was dann einer Größe von 10 Pixeln entspricht. Hier liegt der Vorteil darin, dass man zumindest auf den ersten Verschachtelungsebenen weniger umrechnen muss, wenn man pixelgenaue Layouts umsetzen muss.

Gut, jetzt kann man diskutieren ob pixelgenaue Layouts wirklich sein müssen, aber das soll nicht der Gegenstand dieses Beitrages sein. Egal welche von beiden oben vorgestellten Vorgehensweisen man einschlägt, so kommt man früher oder später dazu umrechnen zu müssen. Auch dazu gibt es feine Helferlein:

em Calculator
Pixel in EM umrechnen (via Markus Kurde)
Nachtrag: Vertical rhythm calculator (via Jens Grochtdreis)

Das zweite Tool kann nur basierend auf der Standardgröße von 16px rechnen, was für viele Anwendungsfälle ausreicht. Bei dem ersten Tool kann man nicht nur die Ausgangsgröße anpassen sondern man kann die Elemente verschachteln und dadurch die Veerbung der Schriftgröße visualisieren. Sehr fein.

Diesen Artikel weiterempfehlen:

2 Reaktionen auf diesen Beitrag »»

Kommentare

Jens Grochtdreis sagte am
21. August 2008 um 11:40 folgendes:

Sehr schön ist auch die AIR-Applikation Em-calculator. Der dazugehörige lange Artikel ist auch lesenswert.

Antworten
Patric Pesch sagte am
21. August 2008 um 14:23 folgendes:

Ich benutze eigentlich nur noch dieses Bookmarklet. Das ist super praktisch, da man direkt den richtigen Selektor angeben kann.

Antworten

Webwork-Tools - Dem Webworker seine Werkzeugkiste