EmChartConverter: Pixel in EM umrechnen

Mit Online-Tool von EmChartConverter Pixel in EM umwandeln

EmChartConverter: Pixel in EM umrechnen

Festlegung von Schriftgrößen in CSS

Wenn Sie sich näher mit CSS beschäftigen, werden Sie früher oder später auf das Problem der Festlegung von Schriftgrößen stoßen. Dabei gibt es 3 verschiedene Arten, die Größe einer Schrift einzustellen:

Pixel, EM oder Prozent? Welche Einheit ist am besten geeignet?


Ich möchte Ihnen hier in meinem Blog den Unterschied zwischen Pixel und EM näherbringen und Sie auf 2 informative und ausführliche Artikel über den Themenbereich *Festlegung von Schriftgrößen in CSS* hinweisen.

1. Pixel in EM umrechnen – Tabelle

Auf der Webseite von EmChart – Ford Interactive habe ich ein tolles Online-Tool entdeckt, mit dem Sie ganz einfach Pixel in EM (und umgekehrt) umwandeln können. Andy Ford hat dort eine „Pixel in EM umrechnen – Tabelle“ („EmChart pixels to EMs lookup table“) erstellt.

2. Begriffsbestimmung: Was ist nun ein EM?

Ein em war ursprünglich gleich zu der Größe des Metall Blocks, der zum Schneiden eines einzelnen Buchstabens einer spezifischen Schriftart verwendet wurde. Es war in etwa vergleichbar mit der Breite von einem Großbuchstaben ‚M‘.

3. Blogartikel über CSS und Pixel, EM und Prozent

Sehen Sie zum Thema Pixel und EMs einen ausführlichen Artikel von Pascal Pirchler über ‚Die unglaublichen Em & elastischen Layouts mit CSS‘ vom 2.9.2008

Sehr empfehlenswert ist auch der Blogartikel Pixel, em oder Prozent – Welche Einheit ist für Schriftgrößen in CSS am besten geeignet? von Elmastudio vom 18. März 2011.

4. Beispiel: Berechnung Pixel – EM

Beispiel: Berechnung Pixel – EM

Die meisten Browser nutzen die Schriftgröße von 16 Pixel als Standardgröße. Dafür müssen Sie in Ihrem Stylesheet die Standardschriftgröße auf 100% setzen: body { font-size: 100%;}.

Daher ist – mit der Standard-Browsereinstellung: 1em = 16px. Deshalb gilt: Wenn die Schriftgröße 16px hoch ist, dann ist 1em = 16px.

Mit dieser Definition wählen Sie dann im Online-Tool von EmChart Converter zum Beispiel 4 Pixel, dann bedeutet dies im vorliegenden Beispiel: 4px = 0,25em

So können Sie hier für jede x-beliebige Schriftgröße die Pixel rasch in Ems (und zurück) umwandeln.

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *