Spätestens mit dem Schlagwort „Responsive Webdesign“ sollte sich jeder mit dem Thema der relativen Schriftgrößen auseinandersetzen. Es lohnt sich, denn es gibt noch eine Welt außer px, em und %-Angaben.

Grundsätzlich erben Elemente die Schriftgröße von ihrem Elternelement. Hat etwa ein Absatz als Stylesheet „font-size: 12px;“ hinterlegt bekommen, so wird auch ein Link innerhalb des Absatzes diese Schriftgröße haben. Würde jedoch ein Link-Tag ebenfalls eine font-size zugewiesen bekommen, würde sich dieser entsprechend anders darstellen. Mit der (verkürzten) Angabe

a { font-size: 75%; }

hätte ein Link also nur noch die 75%-fache Größe vom Elternelement, also 9 Pixel.

Soweit, so bekannt, so einfach. Je nach Anwendungsfall können verschiedene Größenangaben verwendet werden. Dabei gibt es neben den bekannten Auszeichnungen auch einige Exoten:

• em: „1em“ entspricht, wie „100%“ der Schriftgröße des Elternelements.
• %: „100%“ entspricht 100 % der Schriftgröße des Elternelements.
• ex: „1ex“ entspricht der Höhe des Buchstaben x des Elternelements.
• ch: „1ch“ entspricht der Breite des Null-Zeichens „0“ des Elternelements.
• rem: „1rem“ entspricht der Schriftgröße des „Wurzelelements“.

Früher war der Einsatz von „em“-Angaben in älteren Versionen des Internet Explorers problematisch, weshalb eher auf die Prozentangabe zurückgegriffen wurde, da mit dieser ein exakteres Schriftbild erzeugt werden konnte. „rem“ und „ch“ wurden mit der Veröffentlichung der CSS3-Spezifikation neu eingeführt. Wichtig zu beachten ist, dass bei der Verwendung von „em“-Einheiten kein absoluter Wert bekannt ist. Ohne konkrete Vorgabe wird die Größe über die Standardeinstellung des Webbrowsers berechnet.

Wo wir gerade CSS3 erwähnt haben: Es gibt noch einige weitere, sehr interessante relative Einheiten, die mit dieser Spezifikation eingeführt wurden: Die Schriftgröße wird dabei in Abhängigkeit an der Größe des Fensters berechnet, womit es sich lohnt, auf diese ebenfalls einen Blick zu werfen:

• vh: „1vh“ entspricht 1% der Fensterhöhe.
• vw: „1vw“ entspricht 1% der Fensterbreite.
• vmin: der minimale Wert aus vw und vh.

Vor geraumer Zeit hätte man vor dem Einsatz dieser Bezugswerte noch warnen müssen, zwischenzeitlich haben aber kaum noch Browser Probleme mit dieser relativen Schriftgrößen-Einstellung. In jedem Fall lohnt sich ein Blick auf die vielen Möglichkeiten, die uns heute geboten werden!