Wenn Sie eine Webseite erstellen, empfehlen die meisten Profis, dass Sie die Schriftgröße (und eigentlich alles) mit einem relativen Maß wie ems, exs, Prozentsätzen oder Pixeln skalieren. Das liegt daran, dass Sie wirklich nicht alle Möglichkeiten kennen, auf die jemand Ihren Inhalt anzeigen kann. Wenn Sie ein absolutes Maß (Zoll, Zentimeter, Millimeter, Punkte oder Pica) verwenden, kann dies die Anzeige oder Lesbarkeit der Seite in verschiedenen Geräten beeinträchtigen. Das W3C empfiehlt, dass Sie für Größen Ems verwenden.
Aber wie groß ist ein Em?
Nach Angaben des W3C ein em:
"ist gleich dem berechneten Wert der Eigenschaft 'font-size' des Elements, für das es verwendet wird. Die Ausnahme ist, wenn 'em' im Wert der Eigenschaft 'font-size' selbst vorkommt. In diesem Fall bezieht es sich auf die Schriftgröße des übergeordneten Elements. "
Mit anderen Worten, ems haben keine absolute Größe. Sie nehmen ihre Größenwerte an, je nachdem, wo sie sich befinden. Für die meisten Webdesigner bedeutet dies, dass sie sich in einem Webbrowser befinden. Eine Schriftart mit der Größe 1em hat also genau dieselbe Größe wie die Standardschriftgröße für diesen Browser.
Aber wie groß ist die Standardgröße? Es gibt keine Möglichkeit, zu 100% sicher zu sein, da Kunden ihre Standardschriftgröße in ihren Browsern ändern können. Da die meisten Benutzer dies nicht tun, können Sie davon ausgehen, dass die meisten Browser eine Standardschriftgröße von 16px haben. Also meistens 1em = 16px.
Denken Sie in Pixeln, verwenden Sie Ems für das Maß
Sobald Sie wissen, dass die Standardschriftgröße 16px ist, können Sie ems verwenden, um Ihren Kunden die Möglichkeit zu geben, die Seite einfach zu skalieren, aber in Pixel für Ihre Schriftgrößen. Angenommen, Sie haben eine Größenstruktur wie diese:
- Überschrift 1 - 20px
- Überschrift 2 - 18px
- Überschrift 3 - 16px
- Haupttext - 14px
- Untertext - 12px
- Fußnoten - 10px
Sie können sie auf diese Weise mit Pixeln für die Messung definieren, aber dann kann jeder, der IE 6 und 7 verwendet, die Größe Ihrer Seite nicht gut anpassen. Sie sollten also die Größen in ems konvertieren und dies ist nur eine Frage der Mathematik:
- Überschrift 1 - 1.25em (16 x 1.25 = 20)
- Überschrift 2 - 1.125em (16 × 1.125 = 18)
- Überschrift 3 - 1em (1em = 16px)
- Haupttext - 0,875em (16 x 0,875 = 14)
- Untertext - 0,75em (16 x 0,75 = 12)
- Fußnoten - 0,625em (16 x 0,625 = 10)
Vererbung nicht vergessen!
Aber das ist noch nicht alles, was Ems bietet. Die andere Sache, die Sie beachten müssen, ist, dass sie die Größe des Elternteils annehmen. Wenn Sie also verschachtelte Elemente mit unterschiedlichen Schriftgrößen haben, kann die Schrift viel kleiner oder größer als erwartet sein.
Zum Beispiel könnten Sie ein Stylesheet wie folgt haben:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Dies würde zu Schriftarten führen, die jeweils 14px und 10px für den Haupttext und die Fußnoten sind. Wenn Sie jedoch eine Fußnote in einen Absatz einfügen, erhalten Sie möglicherweise einen Text mit 8.75px anstelle von 10px. Probieren Sie es selbst aus, fügen Sie das obige CSS und den folgenden HTML-Code in ein Dokument ein:
Diese Schrift ist 14px oder 0,875 ems hoch.Dieser Absatz enthält eine Fußnote.Dies ist zwar nur ein Fußnotenabschnitt.
Der Fußnotentext ist bei 10 Pixeln schwer zu lesen, bei 8,75 Pixeln fast unleserlich.
Wenn Sie also ems verwenden, müssen Sie die Größe der übergeordneten Objekte genau kennen, oder Sie erhalten auf Ihrer Seite einige wirklich ungerade Elemente.
