Schriftgrößen besser kontrollieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

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%:

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:

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:

Diskussion

Da sich die Browserdarstellung aufgrund unterschiedlicher Betriebssysteme und Videoeinstellungen stark unterscheiden kann, ist die Verwendung von festen (oder absoluten) Werten wenig sinnvoll. Am besten vermeiden Sie absolute Längenangaben für Webdokumente ganz, es sei denn, Sie gestalten Dokumente, bei denen die Ausgabegrößen vorher festgelegt sind. Für die Druckausgabe sind feste Längenangaben jedoch die bessere Wahl. Näheres zum Anlegen von Stylesheets für die Druckausgabe finden Sie unter Druck.

Pixel verwenden

Pixel sorgen bei den meisten Systemen und Browsern plattformübergreifend für eine konstante Größe der Typografie in einem Webdokument. Obwohl Pixel häufig für Längenangaben in der Webtypografie und auf den meisten Plattformen und Browsern verwendet werden, sollten Sie bei den folgenden Browsern besonders vorsichtig sein:

• Netscape Navigator 4.x stellt Pixelwerte nicht korrekt dar.
• Opera 5 für Macintosh zeigt Pixelwerte kleiner als die im Stylesheet angegebene Größe an.

Falls die meisten Besucher Ihrer Website einen anderen Browser als Netscape Navigator 4.7 und Opera 5 benutzen, so ist eine Verwendung von Pixelwerten weitgehend unproblematisch.

Barrierefreiheit und Webtypografie

Der Hauptaspekt bei der Verwendung von Pixeln besteht nicht in der Angabe einer akkuraten Größe, sondern in der Zugänglichkeit. Personen mit Sehproblemen wollen die Schriftgröße eventuell anpassen, um das Dokument besser lesen zu können. Leider kann aber Internet Explorer für Windows Größenangaben in Pixeln nicht verändern. Da dies jedoch der Browser mit der größten Verbreitung ist, führt die Verwendung von Pixeln unweigerlich zu Problemen, wenn Benutzer versuchen, die Schriftgröße anzupassen.

Wenn Sie absolute Maßangaben benötigen, sollten Sie Pixel der Einheit Punkt vorziehen, auch wenn die meisten Designer aus dem Druckbereich mit Punkten vertrauter sind. Der Grund liegt darin, dass die Betriebssysteme Windows und Macintosh Größenangaben in Punkten unterschiedlich darstellen, während Pixel bei beiden Systemen die gleiche Größe haben.

Hinweis:
Selbst wenn Pixel technisch gesehen eine relative Maßeinheit sind, bezeichnen Designer sie als absolute Längeneinheit. Ein Pixel ist – als physikalische Einheit betrachtet – relativ, bezogen auf die Größenverhältnisse einer Webseite jedoch absolut – und das ist, was für Designer ausschlaggebend ist.

Wenn die Zugänglichkeit Ihrer Seiten für Sie besonders wichtig ist, sollten Sie em-Einheiten verwenden. In der Lösung zu diesem Rezept definieren wir die Textgröße des Absatzes mit 1.9em. Diese Angabe entspricht 190% der Standardschriftgröße, die in den Voreinstellungen des Browsers angegeben wurde.

Allerdings birgt die Benutzung von em-Einheiten ein anderes Problem, das mit der Benutzbarkeit zu tun hat. Zwar können Sie nun die Schriftgröße einer Webseite ändern. Wenn Sie jedoch eine kleinere als die Standardschriftgröße des Browsers angeben (z.B. 0.7em), so stellt Internet Explorer für Windows den Text in winzigen, fast unlesbaren Zeilen dar (siehe folgende Abbildung). Die Lektion lautet daher: Gehen Sie vorsichtig mit relativen Schriftgrößen um, da der Text leicht unleserlich werden kann.

Abbildung: Fast unleserlicher Text, dessen Größe mit em-Einheiten definiert wurde.

Schlüsselwörter für Schriftgrößen verwenden

Und damit kommen wir zu einer weiteren Lösungsmöglichkeit: der Verwendung von Schlüsselwörtern für die Schriftgröße. In der CSS 2.1-Spezifikation sind sieben Schlüsselwörter für absolute Schriftgrößen definiert (siehe die nächste Abbildung): xx-small, x-small, small, medium, large, x-large und xx-large.

Zwei weitere Schlüsselwörter sorgen für eine relative Änderung der Schriftgröße: larger und smaller. Angenommen, die Schriftgröße des Elternelements wurde mit small festgelegt und das Kindelement hat den Wert larger, so kann der Browser den Wert des Kindelements automatisch auf den absoluten Wert medium erhöhen.

Abbildung: Darstellung der Schlüsselwörter für Schriftgrößen.

Die Verwendung von Schlüsselwörtern hat zwei Vorteile: Erstens lässt sich der Text in den meisten Browsern auf diese Weise einfach vergrößern oder verkleinern; zweitens sinkt die Schriftgröße bei CSS-konformen Browsern nie unter 9 Pixel und stellt auf diese Weise sicher, dass der Text prinzipiell lesbar bleibt. Bei der Verwendung von kleinen Schriftgrößen sollten Sie möglichst einen serifenlosen Zeichensatz, zum Beispiel Verdana, verwenden, um die Lesbarkeit zu erhöhen.

Der Hauptnachteil bei der Verwendung von Schlüsselwörtern besteht darin, dass Internet Explorer in den Versionen 4 bis 5.5 anstelle des empfohlenen medium den Wert small als Standardschriftgröße benutzt. Aufgrund dieser Entscheidung werden alle Schriftgrößen in den genannten Versionen von Internet Explorer jeweils eine Stufe kleiner dargestellt. Der Wert xx-large in Internet Explorer entspricht also x-large in allen anderen Browsern, x-large entspricht large und so weiter.

Um zu erreichen, dass Internet Explorer 5 und 5.5 für Windows die richtigen Werte für die Schlüsselwörter verwenden, können Sie den voice-family-Workaround einsetzen, wie unten gezeigt. Näheres hierzu finden Sie im Rezept Hacks, Workarounds und Fehlersuche.

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:

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.

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:

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

Siehe auch

• Den Artikel "CSS Design: Size Matters", geschrieben von Todd Fahrner (Mitglied der W3C CSS Working Group auf Einladung),
• das Rezept Extrem stark vergrößerter Text zum Vergrößern von Text, um erhöhte Aufmerksamkeit zu erreichen,
• die CSS 2.1-Spezifikation für nähere Informationen darüber, wie ein Browser seine Werte berechnet,
• die CSS2-Spezifikation zu Längeneinheiten und
• den Abschnitt "Schriftgrößen" in Kapitel 5 von CSS – Das umfassende Handbuch von Eric A. Meyer (O’Reilly).