Wie rechne ich Pixel in em um? - Guru 2.0
Wie rechne ich Pixel in em um?

Wie rechne ich Pixel in em um?

Das ist eine Frage, welche sich webDesigner immer wieder stellen und noch dazu selten eine Antwort haben. Aber warum benutzen wir überhaupt em und nicht gleich Pixel. Ist doch viel einfacher alles in fixen Werten anzugeben und noch dazu kann keiner das hübsche Design zerschiessen. Ein einfacher Grund dafür ist, dass em schwierig zu beherrschen sind. Dazu habe ich jetzt eine Hilfe für euch…

Es ist aber so, dass relative Werte wie em das Layout untersützten und bei einer Größenänderung den Rhythmus im Layout beibehalten. Wenn man jetzt aber immer einen Taschenrechner zum umrechnen braucht, wird man langsam aber sicher wahnsinnig.

Nehmen wir ein einfaches Beispiel: Ein h1-Tag hat die Größe von 24 Pixel. Nun ist es eine Layout-Vorgabe, dass genau 9 Pixel Abstand unterhalb des Tags sein sollen. Natürlich kann man den Abstand mit dem margin-bottom-Attribut festlegen. Aber sobald der Benutzer die Textgröße verändert, ist das Layout zerschossen.

em-Tabelle von Aloe Studios

em-Tabelle von Aloe Studios

Nun kann man mit der Formel desired pixel size / current pixel size = em den Abstand in em umrechnen. In unserem Fall wäre das 9px / 24px = 0,375em. Die Formel ist eigentlich einfach zu merken, aber sie dauernd im Rechner einzutippen ist mühsam.

Daher habe die Aloe Studios eine einfache Tabelle dafür geschaffen, bei der man nur mehr nachschauen muss. Die Zielgröße ist in den Spalten und die aktuelle Größe ist in den Zeilen aufgetragen und im Schnittpunkt findet man dann den em-Wert. Praktisch, oder?
Zusätzlich kann man die Tabelle online abrufen oder sich auch als Download lokal speichern.

Es wurde ein Kommentar zu diesem Beitrag geschrieben.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.