Die reine Schriftvergrößerung veröffentlicht in 2012

Relative Schriftgrößen für ein barrierefreies Web

Relative Maßeinheiten sind von absoluten Maßeinheiten zu unterscheiden. "Relativ" bedeutet, dass die Angabe einer Schriftgröße in Abhängigkeit von einer anderen, bereits festgelegten Größe ermittelt wird. Dabei gibt es unterschiedliche Ansätze:

• Es gibt Schriftgrößenangaben, die sich grundsätzlich auf die Schriftgröße eines Elternelements beziehen.
• In Zukunft wird es Schriftgrößenangaben geben, die sich auf die Fenstergröße beziehen.
• Es ist eingeschränkt möglich, eine Schriftgröße in Abhängigkeit der voreingestellten Schriftgröße im Browser zu wählen.

Geerbte Schriftgrößen

HTML-Elemente "erben" ihre Schriftgröße von Elternelementen bzw. vom Browser-Style-Sheet. Ein Link in einem Absatz erbt seine Schriftgröße vom Absatz:

Mit einer CSS-Regel

würde der Absatz eine Schriftgröße erhalten, die 75% der Schriftgröße des Elternelements beträgt. Wenn das Elternelement 16px vererbt und der Absatz somit eine Schriftgröße von 12px erhält, dann wird der verschachtelte Link die Schriftgröße von 12px vom Absatz erben. Stünde im CSS noch die folgende Anweisung:

so würde der Link eine Schriftgröße von 75% der geerbten Schriftgröße (12px), also 9px erhalten.

Neben % gibt es eine ganze Reihe weiterer relativer Einheiten, die in CSS eingesetzt werden können. Die nachstehende Tabelle führt solche relative Maßeinheiten auf, die sich auf geerbte Schriftgrößen beziehen:

Im Kontext aller Endgeräte und benutzerdefinierten Einstellungen gibt es keine ideale Maßeinheit für alle Elemente einer Webseite. Für Schriftgrößen wird jedoch em bevorzugt. Die Einheiten rem und ch stammen aus der CSS3-Spezifikation. Während rem bereits in sämtlichen aktuellen Browsern unterstützt wird, wird ch noch nicht gut unterstützt.

Die Einheit em war ursprünglich eine Einheit, die die Breite des Großbuchstaben "M" in einer Schriftart angab. Oft — aber nicht immer — entspricht die Breitenangabe für "M" auch der Schriftgröße. Weil aber nicht alle Schriftarten den Buchstaben "M" aufweisen (etwa chinesische Schriftarten), aber jede Schriftart eine Höhe hat, entspricht mittlerweile 1em in CSS der aktuellen Schriftgröße.

Da sich die Maßeinheit em immer auf einen geerbten Wert bezieht, ist der vom Browser umgerechnete, absolute Wert z.B. von 0.75em nicht bekannt. Wenn die Schriftgröße mit der Angabe font-size:0.75em; für das BODY-Element bestimmt wird, so ist die zugrunde gelegte Schriftgröße die Einstellung des Browsers. Sie liegt normalerweise bei 16px, sodass 0.75em für das BODY-Element eine Schriftgröße von 12px ergibt. Diese Schriftgröße vererbt sich an alle weiteren Elemente, es sei denn, die anderen Elemente erhalten eine spezifischere Schriftgrößenangabe.

Die Einheit ex entspricht dem Abstand zwischen Grundlinie und Mittellinie der Schriftart. Mit ex wird die Höhe des Kleinbuchstaben "x" in der verwendeten Schriftart angegeben. Gründe, diese Einheit einzusetzen, sind am Ehesten in der Typografie zu finden. Weil die Höhe des "x" nicht immer zuverlässig bestimmt werden kann, wird 1ex vom Browser manchmal mit 0.5em gleichgesetzt.

Auch Prozentangaben beziehen sich auf die geerbte Schriftgröße. Die Auswirkung einer Prozentangabe sollte mit der Maßeinheit em identisch sein. Beispielsweise sollten die folgenden CSS-Anweisungen zum gleichen Ergebnis führen:

In älteren Versionen des Internet Explorer sind die em-Angaben u.U. problematisch, und Schriftgrößen und Zeilenhöhen werden wahlweise sehr klein oder überdimensional groß, wenn für das BODY-Element eine Schriftgröße in em definiert wurde. Da in der Webentwicklung die Standardschriftgröße gerne reduziert wird, sollte für das BODY-Element mit % statt em gearbeitet werden. Hierzu wird die Schriftgröße des BODY-Elements relativ zur im Browser voreingestellten Schriftgröße gesetzt:

Diese Angabe bewirkt, dass die Schriften in den meisten Browsern mit 12px dargestellt würden. Die Regel formuliert aber etwas anderes, nämlich dass Texte mit 75% der im Browser voreingestellten Schriftgröße dargestellt werden. Wird die Schriftgröße im Browser verändert, dann verändert sich die berechnete Schriftgröße für das BODY-Element und ebenfalls für sämtliche Kindelemente.

Ob die Standardschriftgröße aber überhaupt verringert werden soll oder muss, ist eine Frage des Blickwinkels. Mit einer kleineren Schrift für das BODY-Element erzielt man im Allgemeinen eine "akzeptable", d.h. den Vorstellungen des Designers entsprechende Schriftgröße für Inhalte.

Weitere relative Werte

Mit CSS3 können weitere relative Einheiten eingesetzt werden, welche die Schriftgröße in Abhängigkeit der Fenstergröße berechnen und bei Veränderung der Fenstergröße anpassen. Folgende drei Einheiten stehen zur Verfügung:

vh

1 vh = 1% der Fensterhöhe.

vw

1 vw = 1% der Fensterbreite.

vmin

das Minimum aus vw und vh.

Derzeit unterstützt kaum ein Browser diese Einheiten. Ein Beispiel für Google Chrome 20 habe ich allerdings gefunden.

Relative Schlüsselwörter

Im Gegensatz zu em und % beziehen sich relative Schlüsselwörter wie "small" oder "x-large" auf die voreingestellte Schriftgröße im Browser und nicht auf die geerbte Schriftgröße. Die folgende Tabelle gibt die Schriftgröße an, die bei Standardschrift im Browser angezeigt wird. Werden die Browsereinstellungen geändert, verändern sich auch die berechneten Schriftgrößen.

Die Flexibilität ist mit relativen Schlüsselwörtern eingeschränkt. Mit der oben erwähnten Einheit rem wird eine bessere Möglichkeit geboten, sich auf die Ausgangsschriftgröße im Browser zu beziehen. Alle aktuellen Browser (bis auf Internet Explorer 8) setzen rem um.