Wenn Sie eine Webseite erstellen, empfehlen die meisten Profis, die Größe von Schriftarten (und eigentlich alles) mit einem relativen Maß wie ems, exs, Prozentsätzen oder Pixeln zu ändern. Dies liegt daran, dass Sie wirklich nicht alle unterschiedlichen Möglichkeiten kennen, auf die jemand Ihre Inhalte anzeigen könnte. Und wenn Sie ein absolutes Maß (Zoll, Zentimeter, Millimeter, Punkt oder Pica) verwenden, kann dies die Anzeige oder Lesbarkeit der Seite auf verschiedenen Geräten beeinträchtigen. Und das W3C empfiehlt dass Sie ems für Größen verwenden.
Aber wie groß ist ein Em?
Laut der 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 'font-size'-Eigenschaft 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 basierend auf ihrem Standort an. Für die meisten
Webdesigner, bedeutet dies, dass sie sich in einem Webbrowser befinden, sodass eine Schriftart mit einer Höhe von 1 cm genau dieselbe Größe wie die Standardschriftgröße für diesen Browser hat.Aber wie hoch ist die Standardgröße? Es gibt keine Möglichkeit, 100% sicher zu sein, da Kunden ihre Einstellungen ändern können Standardschriftgröße in ihren Browsern, aber da die meisten Leute das nicht tun, können Sie davon ausgehen, dass die meisten Browser eine Standardschriftgröße von 16px haben. Also die meiste Zeit 1em = 16px.
Denken Sie in Pixeln, verwenden Sie ems für das Maß
Sobald Sie wissen, dass die Standardschriftgröße 16px beträgt, können Sie ems verwenden, damit Ihre Kunden die Größe der Seite einfach ändern können, aber denken Sie in think Pixel für Ihre Schriftgrößen. Angenommen, Sie haben eine Größenstruktur wie diese:
- Überschrift 1 – 20 Pixel
- Überschrift 2 – 18 Pixel
- Überschrift 3 – 16 Pixel
- Haupttext - 14px
- Untertext - 12px
- Fußnoten - 10px
Sie könnten sie so definieren, indem Sie Pixel für die Messung verwenden, aber dann könnte jeder, der IE 6 und 7 verwendet, die Größe Ihrer Seite nicht gut ändern. Sie sollten also die Größen in ems umrechnen und das ist nur eine Frage der Mathematik:
- Überschrift 1 - 1,25 em (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)
Vergessen Sie das Erbe nicht!
Aber das ist nicht alles, was ems zu bieten hat. Die andere Sache, an die Sie sich erinnern müssen, ist, dass sie die Größe des Elternteils annehmen. Wenn Sie also verschachtelte Elemente mit unterschiedlichen Schriftgrößen haben, können Sie am Ende eine viel kleinere oder größere Schrift als erwartet erhalten.
Zum Beispiel könnten Sie ein Stylesheet wie dieses haben:
Dies würde zu Schriftarten von 14px und 10px für den Haupttext bzw. die Fußnoten führen. Wenn Sie jedoch eine Fußnote in einen Absatz einfügen, erhalten Sie möglicherweise Text, der statt 10 Pixel 8,75 Pixel groß ist. Probieren Sie es selbst aus, setzen Sie das oben genannte ein CSS und den folgenden HTML-Code in ein Dokument:
Wenn Sie also ems verwenden, müssen Sie sich der Größe der übergeordneten Objekte sehr bewusst sein, oder Sie erhalten am Ende einige wirklich ungewöhnlich große Elemente auf Ihrer Seite.