CSS font-size: Viewport Units und andere Einheiten

Es gibt viele Möglichkeiten, wie man mit CSS font-size die Schriftgröße einer Website deklarieren kann. Mit CSS3 sind die Viewport Units dazugekommen, die sich an der Fenstergröße orientieren. Grob kann man alle Einheiten in zwei Gruppen unterteilen: absolut und relativ.

Absolute Einheiten orientieren sich an physischen Längenmaßen und ändern sich nicht, wenn die Schriftgröße des übergeordneten Elementes verändert wird.

Relative Einheiten werden in Abhängigkeit von den Elternelementen angegeben. Ändert man die Schriftgröße des übergeordneten Elementes, passen sich die darin liegenden Elemente an.

Hier folgt eine kleine Aufstellung einiger Einheiten:

Einheit Typ Beschreibung
px absolut 1 Bildpunkt (Pixel) = 96ster Teil eines Zolls (1 Zoll hat 2,54cm), Pixelgröße abhängig vom Anzeigegerät
pt absolut 1 Punkt = 72ster Teil eines Zolls
% relativ prozentual, abhängig von Schriftgröße des Elternelements
em relativ dezimal, abhängig von Schriftgröße des Elternelements
rem relativ dezimal, abhängig von Schriftgröße des Wurzelelements
vw relativ 1vw = 1% der Fensterbreite
vh relativ 1vh = 1% der Fensterhöhe
vmin relativ 1vmin = 1% des kleineren Wertes (Fensterbreite oder -höhe)
vmax relativ 1vmax = 1% des größeren Wertes (Fensterbreite oder -höhe)

Im Selfhtml Wiki gibt es eine vollständige Übersicht der CSS Maße und Einheiten.

In Zeiten der mobilen Internetnutzung wird immer mehr mit relativen Einheiten gearbeitet. Sie passen sich automatisch an das genutzte Gerät an.

Absolute Einheiten, wie z. B. Pixel hängen von den physischen Gegebenheiten (Auflösung des Gerätes) ab. Daher besteht das Problem, dass die Schrift auf einem Bildschirm mit einer Auflösung von 800×600 größer dargestellt wird, als z. B. mit einer Auflösung von 1280×1024. Denn bei einer höheren Auflösung befinden sich insgesamt mehr Bildpunkte auf dem Bildschirm.

Browserstandard 16px

Macht man keine Angaben zur Schriftgröße, greift der Standardwert der Browser, dieser ist in den meisten Fällen:

16px = 12pt = 100% = 1em = 1rem

In folgendem Beispiel habe ich fünf <p>-Elementen jeweils die o. g. Einheiten zugewiesen. Egal, welche Angabe man wählt, es wird auf dem Bildschirm gleich dargestellt:

Standardwerte der Einheiten im Browser

Spannend wird es erst, wenn man dem html-Element eine andere Schriftgröße zuordnet. Das Beispiel habe ich um die Angabe  html { font-size: 150%; } erweitert. Diese Änderung wirkt sich nur auf die relativen Einheiten aus:

Änderung der Schriftgrößen bei relativen Einheiten

Hier zeigt sich der große Vorteil von relativen Einheiten. Nur durch Änderung der Angabe im html-Element kann man die Schriftgröße der gesamten Website anpassen und erspart sich eine Menge Arbeit.

Prozent, em oder rem?

Nun wird das Beispiel noch etwas erweitert, um den Unterschied zwischen rem, em und der Prozentangabe deutlich zu machen. Es wurde die Angabe body { font-size: 150%; } ergänzt. Die Absätze mit Prozentangabe und em haben sich um den Faktor 1,5 vergrößert, da sich Änderungen am Elternelement auf sie auswirken. Zunächst hatte die Schrift 16px, die Angabe html { font-size: 150%; } erhöhte den Pixelwert auf 24px (16 x 1,5). Die weitere Angabe im body-Element erhöhte die Angabe erneut um den Faktor 1,5. Somit beträgt die Schriftgröße nun 36px (24 x 1,5).

Der Absatz mit der rem-Angabe hat sich gegenüber dem vorherigen Beispiel nicht verändert, er hat weiterhin die Schriftgröße 24px (16 x 1,5) und beachtet nur die Angabe im html-Element, egal wie viele verschachtelte Elemente noch dazwischen sind.

Die Einheit rem beachtet nur Angaben im root-Element

Viewport Units: Schriftgröße orientiert sich an Fenstergröße

Für flexiblere Größenangaben wurden vom W3C die Viewport Units eingeführt. Mit vw (view width) und vh (view height) kann man einem Element eine Größe zuweisen, die in Relation zur aktuellen Breite oder Höhe des Browserfensters berechnet wird.

1vw entspricht hierbei 1% der Breite des aktuellen Fensters, 1vh entsprechend 1% der Höhe des Fensters. Wenn man das Browserfenster verkleinert oder vergrößert, kann man in Echtzeit beobachten, wie sich das Element anpasst. Das funktioniert auch bei Typografie. Hier zeige ich ein Beispiel mit einer h1-Überschrift und der Einheit vw:

Viewport Units orientieren sich an Fenstergröße

Das Fenster ist 1366px breit und die h1-Überschrift hat die Angabe  h1 { font-size: 4vw; } erhalten. Bei der Schriftgröße muss man zunächst etwas rechnen, um den aktuellen Wert zu ermitteln. In diesem Falle teilt man die 1366px durch 100 und multipliziert das Ergebnis mit der angegebenen font-size, hier vier. So erhält man eine Schriftgröße von 54.64px.

Ganz anders sieht das Ergebnis aber schon aus, wenn man das Browserfenster verkleinert:

Überschrift mit Viewport Units Bei Mobilgeräten

Bei einer Fensterbreite von 480px kommen wir bei dieser Rechnung auf eine Schriftgröße von 19.2px. Das kann, gerade bei Fließtext, allerdings dazu führen, dass der Text auf Smartphones viel zu klein dargestellt wird oder auf großen Bildschirmen überdimensioniert.

Browsersupport

Die altgedienten px, pt und em funktionieren in allen gängigen Browsern. Rem (root em) wird vom Internet Explorer 8 gar nicht unterstützt (falls man diesen noch bedienen möchte oder muss) und von 9 und 10 nicht in jedem Fall. Die Viewport Units werden ebenfalls vom IE8 nicht unterstützt und von den nachfolgenden IE-Versionen und vom Apple Safari Version 7.1 nur teilweise. Doch in den übrigen Browsern und Apple Safari ab Version 8.1 hat man volle Unterstützung (Stand: 20.04.2015 Quelle: caniuse.com).

Fazit

In Zeiten der verbreiteten mobilen Nutzung und vieler verschiedener Endgeräte treten Pixel und Punkt immer mehr in den Hintergrund.

Informiert man sich auf den Seiten der W3Schools über CSS Einheiten, erhält man den Tipp, dass em und rem die geeignetsten Einheiten sind, um perfekt skalierbare Layouts zu gestalten.

Die w3schools empfehlen em und rem für skalierbare Layouts (Quelle: Screenshot http://www.w3schools.com/cssref/css_units.asp)

Absolute Einheiten weiterhin zu verwenden, führt zu einem unnötigen Mehraufwand.

Die Viewport Units haben Potential, doch bisher hat man zu wenig Kontrolle darüber. Da alles starr nach der Fenstergröße berechnet wird, kann es passieren, dass ein Smartphone-Nutzer viel zu winzige Texte sieht oder ein Desktop-Nutzer mit großem Bildschirm die Buchstaben in Großdruck angezeigt bekommt. Wenn man nicht gerade Senioren als Zielgruppe hat, kann das von Nachteil sein. Der Browsersupport ist bisher auch noch nicht durchgehend.

Letztendlich entscheidet jeder selbst, was ihm am besten liegt. Die „perfekte“ Einheit gibt es sowieso nicht. Je nach Anwendungsfall und Stand der Technik verwendet man auch Kombinationen aus den vorhandenen Einheiten. Im Zweifel kann man mit Fallbacklösungen arbeiten.