Guru 2.0 › 3.0

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

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.

ähnliche Posts:

• CSS-Generator
• Der Honorarrechner und andere Tools
• Ein Jahrzehnt webDesign in Bildern
• 10 WebDesign-Trends für 2009
• css-Layouts

Dieser Eintrag wurde

• am Samstag, 21. Februar 2009 um 12:36 erstellt und wurde unter Design, Hilf mir! abgelegt.
• Der Post besitzt diese Tags: em, Hilfe, Pixel, Tutroial, webdesign
• Du kannst alle Antworten darauf mit dem RSS 2.0 Feed verfolgen.
• Du kannst eine Antwort schreiben.
• Du kannst einen TrackBack von Deinem eigenen Blog setzen.
•  drucken

Der Artikel hat Dir geholfen?

Warum spendierst Du mir nicht einen Kaffee?