201008Mai

EmChart: Pixelwerte mit Em-Größen als Übersicht

Schriftgrößen in CSS lassen sich durch etliche Angaben definieren: Pixel, Punkt, Pica, Inch, Millimeter oder Zentimeter sind als Maßeinheiten möglich. Weiterhin gibt es relative Angaben, die sich auf das eigene Element oder das Elternelement beziehen. Neben Prozentangaben gibt es die Größenangabe "em", mit der sich die Schriftgröße auf die Größe des jeweiligen Elements bzw. des Elternelements festlegen lässt. Dadurch können vertikale Rhythmen besser eingehalten werden und bei einer Vergrößerung der Ansicht durch den Benutzer wird eine korrekte Darstellung gewährleistet.
Um Em-Werte aus Pixelgrößen zu ermitteln, ist eine Formel nötig. Dabei muss die gewünschte Zielgröße in Pixel bekannt sein (ersichtlich in der Design-Datei aus einem Grafikprogramm):

  • Gewünschte Pixelgröße / Aktuelle Pixelgröße = Vergrößerungsfaktor

Die aktuelle Pixelgröße lässt sich zum Beispiel sehr schön mit Firebug herausfinden. Im rechten Bereich kann die zugewiesene Schriftgröße über den "Berechnet"-Tab (Computed Styles) eingesehen werden.

Firebug - Berechnete Stile

Um nun nicht jedes Mal den Em-Wert für eine Pixelgröße neu berechnen zu müssen, kann man sich dem Tool EmChart von Andy Ford bedienen. Dabei handelt es sich um eine Übersichtstabelle, in der bereits die Umrechnungen vorgenommen wurden und die gewünschten Em-Werte einfach abgelesen werden können.

EmChart

In einem Blog-Eintrag beschreibt der Autor noch einmal die Thematik und bietet sein Werkzeug auch zum Download an. Für optimale Einstellungen der Abstände, die durch verschiedene Angaben (margin, line-height, etc.) erreicht werden können, bietet sich die Seite auf jeden Fall an.