Problem

Die Schriftgröße soll unabhängig von Browser und Betriebssystem festgelegt werden.

Lösung

Setzen Sie den Wert für font-size im Element body auf einen Wert von 62.5%:

• body { font-size: 62.5%; }

Danach setzen Sie die Werte für font-size, beispielsweise in einem vererbten Formular, auf den Wert 1em. Für Internet Explorer für Windows sähe das so aus:

• input, select, th, td { font-size: 1em; }

Nun entspricht die Schriftgröße 1em in Ihrem Dokument einer Größe von 10 Pixeln. Um einen Absatz mit einer Textgröße von 19 Pixeln darzustellen, verwenden Sie die body-Anweisung aus dem ersten Teil dieser Lösung. Die folgende Regel erledigt den Rest:

• p { font-size: 1.9em // stellt Text mit einer Größe von 19 Pixeln dar }

Schriftgrößen mit em-Einheiten kontrollieren

Obwohl die Verwendung von Schlüsselwörtern eine allgemeine Definition der Schriftgröße ermöglicht, wollen Designer normalerweise eine feinere Kontrolle ausüben. Die in diesem Rezept vorgestellte Lösung von Richard Rutter bietet diese Art der Kontrolle.

Standardmäßig verwenden Browser eine Größe von 16 Pixeln. Diese entspricht dem Schlüsselwort medium. Indem Sie die Schriftgröße im body-Element auf einen Wert von 62.5% des Standardwertes setzen, reduzieren Sie die Größe auf 10 Pixel:

• (16 pixels)62.5% = 10 pixels

Wie zuvor besprochen, entspricht eine em-Einheit der Standardschriftgröße des Browsers. Durch die Änderung dieser Größe im body-Element entspricht 1em nun 10 Pixeln.

• 1em = 10px

Mit dieser Lösung können Designer die gewünschte pixelbasierte Kontrolle über die verwendeten Schriften ausüben, ohne auf die Einschränkungen der Browser für diese Maßeinheit Rücksicht nehmen zu müssen.

Um beispielsweise die Größe einer Überschrift mit 24 Pixeln und die Textgröße in einem Absatz mit 15 Pixeln festzulegen, könnte ein Designer basierend auf der hier gezeigten Lösung folgende Stildefinitionen verwenden:

• body { font-size: 62.5%; }
• input, select, th, td { font-size: 1em; }
• h2 { font-size: 2.4em; }
• p { font-size: 1.5em; }

Ein weiterer Vorteil dieser Lösung besteht darin, dass die Benutzbarkeit und Barrierefreiheit nicht durch die Verwendung absoluter Maßangaben beschränkt wird.

Quelle: Data2Type