Schrift-Größen in vw (viewport-width) angeben

Der größte Hit hier im Blog was die Besucherzahlen angeht ist der Artikel Pixel, Em, rem – was ist der Unterschied? Darin geht es um die verschiedenen Einheiten, mit denen man Schriftgrößen definieren kann.

In diesem Artikel geht es um eine andere Einheit, mit der man Schriftgrößen definieren kann. Die Einheit (vw) bezieht sich auf die Größe des Browserfensters. Im Zusammenhang mit mobilen Geräten würde man statt Browserfenster Bildschirmbreite sagen.

Wie viewport sizes funktionieren

Es gibt zwei viewport-Einheiten, eine für die Breite des Browserfensters (vw = viewport width) und eine für die Höhe des Browserfensters (vh= viewport height). Für die Definition von Schriftgrößen arbeitet man in der Regel mit der Breite des viewports, also vw.
1 vw = 1% der viewport width

h2{
 font-size:5vw;
}

Der Vorteil von vw für Schriftgrößen liegt auf der Hand: Man definiert die Größe in einer Zeile CSS und der Rest passiert automatisch. Die Größe der Überschrift beträgt immer 5vw, das sind konstant 5% der Breite des Browserfensters. Wird das Fenster größer oder kleiner, skaliert die Überschrift mit.

Wie haben wir das früher gemacht?

In der klassischen Herangehensweise würden wir einen Breakpoint definieren z.B. 800px. Ist diese Bildschirmbreite erreicht, hüpft die Überschrift auf die nächste definierte Größe.

h2{
 font-size:2em;
}
@media (min-width:800px){
 h2{
 font-size:4em;
 }
}

Das sieht deutlich weniger elegant aus.

Probleme und Lösungen

Sehr kleine oder sehr große Viewports

Was passiert, wenn das Browserfenster sehr klein oder sehr groß wird und die 5% der Bildschirmbreite nicht mehr überzeugend aussehen? Im einen Fall wird die Überschrift viel zu klein und nicht mehr lesbar, im anderen Fall haben wir eine viel zu große Überschrift.

Für diesen Fall gibt es eine Formel von Mike Riethmuller, mit der man CSS ein bisschen rechnen lassen kann.
Mit dieser Formel definiert man einen minimalen (24px) und einen maximalen Wert (48px) für die Schriftgröße, die beim Skalieren nicht über- bzw. unterschritten werden soll.

h2 {
 font-size: calc(24px + (48 - 24) * ((100vw - 480px) / (1600 - 480)));
}

Die Mindestgröße für die Überschrift soll 24px betragen, die maximale Größe sollen 48px sein. Ist der Bildschirm/das Browserfenster kleiner als 480px, soll die Mindestgröße von 24px aktiv werden. Wird das Browserfenstern größer als 1600px, soll die Schriftgröße bei 48px stehen bleiben.

Die Formel ist aber nur die halbe Miete. Damit die Unter- und Oberkante greift und die Schriften nicht weiter skalieren, ergänze ich das CSS mit einer mobile-first Default-Größe und zwei Mediaqueries.

h2 {
 font-size: 24px;
}
@media screen and (min-width: 480px) {
 h2 {
  font-size: calc(24px + (48 - 24) * ((100vw - 480px) / (1600 - 480)));
 }
}
@media screen and (min-width: 1600px) {
 h2 {
  font-size: 48px;
 }
}

Damit klappt es. Bis zu einer Bildschirmbreite von 480px bleibt die Schriftgröße konstant bei 24px. Wird das Browserfenster breiter als 1600px, bleibt die Schriftgröße bei 48px stehen. Dazwischen skaliert die Schriftgröße automatisch.

EDIT
Wenn man die Schriftgröße ausschließlich in vw angibt, funktioniert das Vergrößern der Schrift im Browser nicht mehr. Das wäre nicht barrierefrei. Wenn man einen Fallback-Wert in Pixeln voranstellt, klappt es wieder.
Danke Florian für den Hinweis.

Bei Ryan Feigenbaum gibt es ein super cooles SASS Mixin dafür. Das Mixin gibt auch gleich einen Fallback-Wert mit aus für Browser, die mit dem CSS Schwierigkeiten haben. Der Fallback-Wert sorgt auch dafür, dass sich die Schrift im Browser vergrößern lässt.

Wenn die Browser wieder einen Schritt weiter sind, kann man diese Anweisung etwas knapper fassen. Bisher können aber nur Safari (11.1+) and Chrome (79+) mit dieser Syntax umgehen.
Das CSS sähe dann so aus.

h2 { font-size: min(max(1rem, 3vw), 24px); }

Mehrspaltige Inhalte

Was passiert, wenn die Inhalte nicht über die gesamte Viewport-Breite gehen, sondern in mehrere Spalten aufgeteilt sind? Das ist ja eher die Regel bei einer Website.

Die Überschrift H2, die in einer Spalte sitzt, die 50% des Browserfenster-Breite einnimmt, weiß natürlich nichts davon, dass sie sich in einem anderen Zusammenhang befindet. Sie verhält sich exakt genauso wie die H2, die den gesamten Viewport zur Verfügung hat.

Das muss man im Auge behalten. Schriftgrößen, die sich in Containern befinden, die kleiner sind als der Viewport, muss man gesondert behandeln.

Wie praxistauglich ist vw als Einheit für die Schriftgröße?

Ich denke, Schriftgrößen in vw zu definieren ist eine interessante Option. Das CSS wird dadurch ein bisschen komplexer. Und man sollte achten, dass die Schrift immer noch zoombar ist.
In dem Artikel Responsive Schriftgrößen mit clamp() habe ich noch etwas dazu geschrieben. Die Funktion clamp() arbeitet nach demselben Prinzip wie min/max oben im Beispiel.

„Hüpfende“ Schriftgrößen sind zwar einfacher zu handhaben, aber sie blenden etwas Wichtiges aus: Im echten Leben gibt es keine definierten Bildschirmbreiten, mobile Geräte kommen mit endlos vielen Bildschirmbreiten daher.

Das heißt, wenn man einen Breakpoint definiert, an dem die Schriftgröße von einer zu anderen Größe springt, ignoriert man damit all die anderen Fälle zwischendrin. Es gibt ihn leider nicht, den einen Breakpoint, der immer passt.