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.

Update vom 4. Juli 2016: Durch einen Tweet von Sara Soueidan hat mich wieder auf ein Problem aufmerksam gemacht, das ich direkt nach der Umsetzung für meine Seite auch bemerkt aber nicht weiter beachtet habe:

Es geht also darum, dass ein Text mit vw-Schriftgröße nicht mehr zoombar ist. Aus diesem Grund habe ich die Lösung auf meiner Seite wieder auf em-Angaben umgestellt. Eine Lösung für halbwegs zoombaren Text mit vw ist die Verwendung von calc(Xvw + Xem).

Wenn ihr also vw als Schriftgröße einsetzen wollt, achtet darauf, dass der Text trotzdem per Zoom vergrößert und verkleinert werden kann.

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;
    }
}

Und fertig.

Das könnte auch interessant sein

2 Kommentare zu »Eine zur Viewport-Breite relative Schriftgröße für meine Website«

    1. Florian

      Hi Bernd,

      danke für den Kommentar. Geht es dir pauschal um die Schriftgröße oder darum, dass zu wenig Inhalt in das Browser-Fenster passt?

      LG
      Florian

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.