erm.. em?
Es ist ziemlich einfach, die Schriftgröße auf einer Website im CSS zu definieren. Die meisten werden als Einheit wohl die beliebten Pixel (px) verwenden. Aber da war doch noch was.. oder? Richtig: em!
Diese mysteriöse Einheit ist vielen ein Rätsel und aufgrund der Einfach- und Eindeutigkeit von Pixeln erscheint es auch nicht wirklich notwendig, sich weiter damit zu beschäftigen. Wäre da nicht der allseits gehasste InternetExplorer. Dieser ist nämlich nicht in der Lage, mit px definierte Schriftgrößen zu vergrößern bzw. zu verkleinern. Somit haben Menschen mit Sehbehinderung oder unverhältnismäßig großer Auflösung wenig Chancen, die Schrift auf einer Website zu entziffern.
Doch was hat es mit dieser in keinem Physiklexikon zu findenden Einheit auf sich?
Nehmen wir an, die Standardschriftgröße ist im Browser auf “medium” eingestellt. Das bedeutet im Normalfall 16px. In diesem Fall entspricht 1em = 16px. 0,5em sind demnach 8px. usw. Die Einheit richtet sich also nach der eingestellten Schriftgröße im Browser.
Nun kann man natürlich sagen, dass es ziemlich umständlich ist, seine bisher gewohnten Pixelwerte in dieses Format umzurechnen, zumal 16px ein denkbar ungeschickter Ausgangswert für die Berechnung darstellt (12px wären demnach zB 0,75em).
Doch es gibt einen hübschen Trick, die ganze Sache zu vereinfachen: Man stelle einfach im CSS die Font-Größe vom body auf 62,5%:
BODY {font-size:62.5%}
Somit entspricht 1em = 10px. Das erleichtert die Sache schon enorm, da nun unser Beispiel von vorhin, die 12px, hübschen 1,2em entsprechen. Also alles halb so wild 
Die Informationen für diesen Artikel habe ich schamlos aus dem Artikel “How to size text using ems” im clagnut-Blog geklaut. Dort finden sich noch weitergehende Informationen zum Thema.
]]>
Es ist ziemlich einfach, die Schriftgröße auf einer Website im CSS zu definieren. Die meisten werden als Einheit wohl die beliebten Pixel (px) verwenden. Aber da war doch noch was.. oder? Richtig: em!
Diese mysteriöse Einheit ist vielen ein Rätsel und aufgrund der Einfach- und Eindeutigkeit von Pixeln erscheint es auch nicht wirklich notwendig, sich weiter damit zu beschäftigen. Wäre da nicht der allseits gehasste InternetExplorer. Dieser ist nämlich nicht in der Lage, mit px definierte Schriftgrößen zu vergrößern bzw. zu verkleinern. Somit haben Menschen mit Sehbehinderung oder unverhältnismäßig großer Auflösung wenig Chancen, die Schrift auf einer Website zu entziffern.
Doch was hat es mit dieser in keinem Physiklexikon zu findenden Einheit auf sich?
Nehmen wir an, die Standardschriftgröße ist im Browser auf “medium” eingestellt. Das bedeutet im Normalfall 16px. In diesem Fall entspricht 1em = 16px. 0,5em sind demnach 8px. usw. Die Einheit richtet sich also nach der eingestellten Schriftgröße im Browser.
Nun kann man natürlich sagen, dass es ziemlich umständlich ist, seine bisher gewohnten Pixelwerte in dieses Format umzurechnen, zumal 16px ein denkbar ungeschickter Ausgangswert für die Berechnung darstellt (12px wären demnach zB 0,75em).
Doch es gibt einen hübschen Trick, die ganze Sache zu vereinfachen: Man stelle einfach im CSS die Font-Größe vom body auf 62,5%:
BODY {font-size:62.5%}
Somit entspricht 1em = 10px. Das erleichtert die Sache schon enorm, da nun unser Beispiel von vorhin, die 12px, hübschen 1,2em entsprechen. Also alles halb so wild
Die Informationen für diesen Artikel habe ich schamlos aus dem Artikel “How to size text using ems” im clagnut-Blog geklaut. Dort finden sich noch weitergehende Informationen zum Thema.
