Texte proportional skalieren über CSS und Einheit „vw“

Möchte man seine Texte automatisch abhängig von der Fenstergröße skaliert ausgeben, bietet CSS eine clevere Möglichkeit über die Einheit „vw“. Diese Einheit „vw“ nutzt den Viewport.

Was ist der Viewport? Verstehen und Nutzen

Der Viewport ist der Bereich im Browserfenster, in dem der Inhalt einer Website angezeigt wird (ohne Scrollen!). Dieser Bereich wird durch Toolbars, Menüleisten und Lesezeichen je nach Browser verkleinert. Genauso kann durch die Fußzeile des Browsers Platz „verschwendet“ werden, der eigentlich für den Inhalt einer Website geschickt wäre.

Kurzum – als Entwickler wissen wir nicht, mit welchen Anzeigegrößen unsere Besucher die Inhalte unserer Website ansehen. Aber wir können über 2 Einheiten, die sich auf den Viewport beziehen, darauf reagieren.

Einheiten Viewport

Die Breite des Viewports wird über „vw“ genutzt – dabei steht „vw“ für „Viewport Width“. Genauso kann auf die Höhe über „vh“ eingegangen werden – hier steckt in der Abkürzung „Viewport Height“. Wir haben mit diesen Längenmaßen somit relative Einheiten.

Aber welche Größe hat nun z.B. „1vw“? Wenn man sich einfach das Prozentzeichen dahinter denkt, passt es schon. Mit „1vw“ haben wir also 1 Prozent der Breite des gerade genutzten Viewports. Ist der Viewport gerade 1000 Pixel breit, haben wir bei der Angabe von „1vw“ also eine Breite von 10 Pixel. Wird das Fenster und somit der Viewport auf 500 Pixel Breite verkleinert, bekommen wir für unsere „1vw“ somit nur noch 5 Pixel.

1vw = 1 % der Viewport-Breite (width)

Das gleich klappt für die Höhe. Und hier ist es sehr interessant, da es ansonsten kaum Möglichkeiten gibt, auf die Höhe zu reagieren. Beabsichtigen wir beispielsweise ein Bild anzuzeigen, dass die komplette Höhe des Viewports nutzt, geben wir einfach „100vh“ an.

Schriftgröße und „vw“ bzw. „vh“

Bisher hat man eine Schriftgröße gerne über „em“ angegeben. Dabei entspricht 1em i.d.R. 16 Pixel. Warum eigentlich steht im letzten Satz „i.d.R.“? Die Größe bezieht sich auf das Root-Element, und auch das kann über CSS umdefiniert werden. Wird das nicht gemacht, dann haben wir unsere 16 Pixel.

Wie können wir nun unsere Viewport-Breite nutzen für automatisch skalierende Schriften? Die Angabe 3vw würde funktionieren, aber schnell ins Chaos führen:

p {
  font-size: 2vw;
}

Bei einer Viewport-Breite von 1000 Pixel hätte unsere Schrift dann die Größe von 2 Prozent von 1000 = 20 Pixel. Sehr gut lesbar von der Größe.

Allerdings wird es schon eng bei einer Viewport-Breite von 500 Pixel. Hier hätten wir als Schriftgröße von 10 Pixel (2 % von 500). Das wird schon sehr klein.

Schriftgröße in einem bestimmten Rahmen

Vorteilhaft ist, wenn wir den Rahmen mitgeben könnten, in dem unsere Schriften skalieren könnten. Bedeutet, wir wollen das Minimum und das Maximum definieren, ab wann eine Schriftgröße nicht kleiner bzw. größer werden darf.

Hier gibt es die CSS-Anweisung clamp. Das englische Wort „clamp“ steht für Klemme bzw. um etwas zu fixieren bzw. einklemmen. Und genau das machen wir mit der CSS-Anweisung clamp.

clamp(MINIMUM, WERT, MAXIMUM);

Und das ganze als komplette Anweisung für unser CSS-Element:

p {
  font-size: clamp(16px, 2vw, 32px);
}

Unsere Schrift wird also automatisch zwischen 16 Pixel und 32 Pixel skalieren. Diese Skalierung wird erst ab eine Viewport-Breite von 800 Pixel (2 % von 800 sind 16) in Aktion treten und nicht weiter skalieren bei einer Breite von 1600 Pixel (2 % von 1600 sind 32).

Allerdings wollen wir relative Werte, daher werden wir anstelle von 16 Pixel dann „1em“ nutzen (was i.d.R. 16 Pixel entspricht).

p {
  font-size: clamp(1em, 2vw, 2em);
}

Barrierefreiheit und dynamischer Wert „vw“

Die Barrierefreiheit hat ein Problem bei nur dynamischen Werten. Es ist kein Zoomen mehr möglich und somit haben wir ein Problem mit der Barrierefreiheit der Webseite. Hier gibt es den Trick, dass wir dynamische Werte (vw) und statische Werte (em) kombinieren. Lassen wir CSS einfach ein wenig rechnen über die CSS-Anweisung calc().

p {
  font-size: clamp(1em, calc(1em + 1vw), 2em);
}

Und nun sind wir auf der sicheren Seite. Und was ist mit alten Browsern, die weder clamp noch calc verstehen?

Fallback für alte Browser

Für alte Browser geben wir einfach den Fallback als Erstes an:

p {
    font-size: 1em;
    font-size: clamp(1em, calc(1em + 1vw), 2em);
}