Quelle: Stux / Pixabay.com (CC0 Creative Commons)
Um den Anforderungen der diversifizierten mobilen Endgeräte gerecht zu werden, sollten auch Schriftgrößen in relativen anstatt absoluten Einheiten definiert werden. Denn Pixelangaben suggerieren bei Schriften eine feste Größe, die aufgrund von unterschiedlichen Pixeldichten und Browser-Zoomeinstellungen faktisch so in den seltensten Fällen vorhanden ist. Relativ definierte Schriftgrößen stehen in Bezug zueinander und können dadurch einfacher für unterschiedliche Displaygrößen angepasst werden. Nie richtig durchsetzen konnte sich die Einheit em – obwohl sie genau zu diesem Zweck entwickelt wurde: Das body-Element erhält eine Schriftgröße in Prozent. 100% entsprechen dabei 100% der im Browser als Standard eingestellten Schriftgröße (meist 16 oder 18px). An allen anderen Stellen wird die Einheit em verwendet. Diese bezieht sich dann auf den für body angegebenen Prozentwert. 2em entspräche beispielsweise der doppelten, 0.5em der halben Schriftgröße. Nachteil dieser Größeneinheit ist, dass sich em-Angaben stets auf die Schriftgröße des jeweiligen Elternelements beziehen. Hat dieses Elternelement (beispielsweise eine div-Box) nun eine von der body-Angabe abweichende Schriftgröße, werden etwaige Kindelemente (auch bei identischer em-Angabe) in einer anderer Größe dargestellt als wenn sie nicht innerhalb des Elements stünden. Ein bloßes Verschieben von Seiteninhalten kann also dazu führen, dass diese eine andere Schriftgröße erhalten (vgl. Zillgens 2013, S. 25–26, 188; W3C 2013a).
Die neue Einheit rem verzichtet auf dieses Verhalten bei verschachtelten Elementen. Nachdem hier für das Wurzelelement html (alternativ: body) eine Größe in Prozent oder Pixel definiert wurde, beziehen sich alle anderen rem-Angaben auf eben diese und nicht auf das jeweilige Elternelement. Um auch ältere Browser zu unterstützen, sollten stets Pixelwerte vorangestellt werden:
In Zukunft werden auch Viewport-abhängige Größen zur Verfügung stehen. Diese sollen dann die exakte Anpassung eines Textes an die Abmessungen des Darstellungsfensters ermöglichen. 1 vw entspricht dabei 1% der Breite, 1 vh 1% der Höhe des Darstellungsfensters. Durch Nutzung von vmin und vmax, die 1 vw oder 1 vh entsprechen, kann automatisch die jeweils kleinere oder größere Einheit gewählt werden (vgl. Zillgens 2013, S. 189–190; W3C 2013a).
