Eine zur Viewport-Breite relative Schriftgröße für meine Website

In dem Buch „Adaptive Web Design“ von Aaron Gustafson habe ich kürzlich ein interessantes Beispiel gefunden: Eine Website bekommt ab einem Breakpoint eine zur Schriftgröße relative Breite und gleichzeitig eine zur Viewport-Breite relative Schriftgröße. Das Ergebnis sieht aus, als würde die Site ab diesem Breakpoint gezoomt werden, wenn der Viewport weiter verbreitert wird: Die Elemente werden größer, bleiben aber im Verhältnis genau so, wie sie bei dem Breakpoint waren. Wie ich diese Lösung für meine Website umgesetzt habe, zeige ich euch hier.

Warum mache ich sowas?

Es ist irgendwie faszinierend, die Schriftgröße von der Breite des Viewports abhängig zu machen und zu sehen, wie sie dynamisch größer wird und alles stimmig bleibt. Und außerdem finde ich es schön, wenn meine Website möglichst viel des verfügbaren Platzes einnimmt. Praktisch ansehen könnt ihr euch das Ergebnis hier auf meiner Site, wenn ihr euren Viewport auf mehr als 1.600 Pixel Breite bringen könnt.

Vorbereitungen

Meine Website war bisher mit einer festen maximalen Breite aufgebaut, ebenso in größeren Viewports die Inhaltsspalte. Wie Aaron in seinem Buch beschreibt, muss die maximale Breite der Website auf einen em-Wert gestellt werden, damit sie relativ zur Schriftgröße ist (logisch soweit). Vorher war die Website auf maximal 1.400 Pixel festgelegt, und das wollte ich im selben Schritt auf 1.600 erweitern. Da die Schrift im html-Selektor ab 52em den Wert 1.356em bekommt, musste ich mit dieser Größe rechnen, um die 1.600 Pixel in em umzuwandeln.

Folgende kleine Rechnung hat mich auf die neue relative Maximalbreite für das #wrapper-Element gebracht:

16*1.365=21.696
1600/21.696=73.7463

Zuerst habe ich berechnet, welcher Pixelanzahl die relative Schriftgröße 1.356em entspricht, und diesen Wert dafür mit der Basis-Schriftgröße multipliziert. Im Anschluss habe ich die 1.600 Pixel durch den errechneten Wert geteilt und bin auf 73.7463em gekommen, was der relativen Maximalbreite des #wrapper-Elements entspricht. Nun musste ich noch die max-width-Angabe des main-Elements entfernen, um die Vorbereitungen abzuschließen.

vw-Schriftgröße!

Für den gewünschten Effekt musste ich nun einen Breakpoint erstellen, der ab 1.600 Pixeln greift. Hier muss dem html-Element dann eine Schriftgröße in vw übergeben werden. Die em-Angabe des Media-Queries entspricht dabei nicht der max-width-Angabe vom #wrapper, sondern musste noch mit der Schriftgröße des html-Elements multipliziert werden. In meinem Fall also:

73.7463*1.365=100,6637

Um die neue Schriftgröße für das html-Element zu errechnen, habe ich folgende Berechnung angestellt, wie in dem Buch von Aaron erläutert:

1/73.7463*100=1.356

Zufällig entspricht das Ergebnis der em-Angabe für das html-Element, aber das ist wirklich nur Zufall (und mir erst beim Schreiben dieses Artikels aufgefallen). Mit diesem Wert ist die Schrift bei 1.600 Pixeln dann genauso groß wie bei 1.599, wo also noch der em-Wert greift. Damit ist folgender Breakpoint entstanden:

@media screen and (min-width: 100em) {
    html {
        font-size: 1.356vw;
    }
}
Code-Sprache: CSS (css)

Und fertig.