Dynamische Schriftgröße in Webflow: Viewport-Breite und -Höhe

Hallo Webflow-Fans! Heute geht es um ein Thema, das uns am Herzen liegt: dynamische Schriftgrößen, also wie sich eine Schriftgröße sowohl an die Breite als auch an die Höhe des Viewports anpasst. Ja, du hast richtig gelesen. Na gut, wir haben geflunkert: Eigentlich mussten wir ein Problem für einen Kunden lösen. Wie die meisten Inhalte im How-to-Bereich unseres Blogs schreiben wir darüber, was wir tun mussten, um ein Problem zu lösen, das Webflow nativ normalerweise nicht löst. Als Webflow-Designer wollen wir alles so No-Code wie möglich halten, aber manchmal braucht es Low-Code.

Die Herausforderung

Stellen wir die Szene auf. Du hast ein Webflow-Projekt. Du hast ein Menü (es muss kein Menü sein, es könnte zum Beispiel auch nur eine Überschrift sein). Bei uns war es ein schönes Menü mit einer Liste von Regisseurnamen und einem Hintergrundvideo, das beim Darüberfahren abgespielt wird, und es gibt einen Haken. Der Kunde möchte, dass der Text im Menü möglichst viel der Seitenbreite ausfüllt, orientiert am längsten Menüpunkt. Und die Viewport-Breite kannst du nicht für die Schriftgröße verwenden, weil der Text den Platz entweder nach Viewport-Breite oder nach Viewport-Höhe ausfüllen muss. Sonst fängst du an zu scrollen, sobald er über den Viewport hinausläuft. Klingt nach einer Herausforderung, oder? Hier ein kurzer Blick auf das Menü, damit du ungefähr siehst, wie es sich anpassen soll, wenn sich Höhe und Breite des Browserfensters ändern.

Nun, meine Freunde, hier fangen wir an.

Die Lösung

Auftritt JavaScript, unser treuer Helfer. Mit einer Prise JavaScript, einem Hauch CSS und viel Kreativität basteln wir eine Lösung, die den Menütext so breit oder „hoch“ wie möglich macht, egal wie groß der Bildschirm in Breite oder Höhe ist. Unsere Version ist etwas komplizierter: Die Vor- und Nachnamen der Regisseure haben unterschiedliche Schriftarten und Schriftschnitte, deshalb können sie nicht dieselbe Schriftgröße haben. Die eine ist einfach größer als die andere. Wir ergänzen außerdem ein vereinfachtes CodePen-Beispiel mit nur einer Schrift, mit dem du herumspielen kannst. Weil der Menütext aus einer CMS-Collection-Liste stammt, ist unsere Anleitung zum Erstellen von Text-Spans in dynamischen CMS-Textelementen in Webflow ein praktischer Begleiter, wenn du Teile dieses Textes anders gestalten willst.

Die Navigation

Wir haben unten zwei CodePens mit den Skripten eingebettet, die wir verwenden. Der erste ist eine vereinfachte Version, ideal für alle, die gerade erst anfangen oder nur eine Schrift anpassen müssen. Der zweite ist etwas fortgeschrittener, ein passendes Beispiel für alle, die eine Herausforderung mögen, mehrere Schriften im Spiel haben oder einfach sehen wollen, wie sich fortgeschrittenere Dinge umsetzen lassen. Wirf gern einen Blick hinein, probiere herum und schau, welche Magie wir gleich erschaffen. Der Code im Pen sollte editierbar sein, für alle Webflow-Profis, die sofort loslegen wollen.

Das einfache Beispiel

// Let's start by declaring our function, adjustFontSize.
function adjustFontSize() {
  // We're grabbing all the elements with the class name 'menu_item'.
  var menuItems = document.querySelectorAll(".menu_item");

  // We're getting the width and height of the viewport.
  var viewportWidth = Math.max(
    document.documentElement.clientWidth || 0,
    window.innerWidth || 0
  );
  var viewportHeight =
    Math.max(
      document.documentElement.clientHeight || 0,
      window.innerHeight || 0
    ) - 60;

  // We're calculating the font size based on the width and height of the viewport.
  var fontSizeBasedOnWidth = viewportWidth * 0.065;
  var fontSizeBasedOnHeight = viewportHeight * 0.21;

  // We're taking the smaller of the two font sizes calculated.
  var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);

  // Now, we're going through each menu item and setting the font size.
  menuItems.forEach(function (item) {
    item.style.fontSize = fontSize + "px";
  });
}

// We're calling our function whenever the window is resized.
window.onresize = adjustFontSize;

// We're also calling our function when the document is ready.
document.addEventListener("DOMContentLoaded", adjustFontSize);

Ein fortgeschritteneres Beispiel dessen, was wir gemacht haben

Dynamischer Text mit zwei Schriften

Die Erklärung

Jetzt schauen wir uns diese Skripte genauer an, als wären es heiße neue Tanzschritte.

Zuerst deklarieren wir eine Funktion namens adjustFontSize(). Sie ist das Herzstück unseres Vorhabens, der Motor, der unser dynamisches Menü antreibt.

function adjustFontSize() {
// ...
}

Innerhalb dieser Funktion greifen wir uns alle Elemente mit bestimmten Klassennamen. Stell es dir als unsere Art vor zu sagen: „Hey, wir brauchen euch kurz!“

var menuItems = document.querySelectorAll('.menu_item');

Außerdem ermitteln wir Breite und Höhe des Viewports. Das ist, als würden wir fragen: „Wie viel Platz haben wir hier zum Spielen?“

var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 60;

Als Nächstes berechnen wir die Schriftgröße anhand von Breite und Höhe des Viewports. Die Multiplikatoren sind hier wie unsere geheimen Zutaten, damit die Schriftgröße genau stimmt. Wir nehmen die kleinere der beiden berechneten Schriftgrößen. Das ist unsere Art zu sagen: „Lass es mit der Schriftgröße nicht zu wild werden, okay?“ Hier musst du mit beiden Werten experimentieren, bis es passt, denn es hängt von der Schrift und der Textlänge ab. Die Zahlen im Snippet unten sind Beispielwerte aus einer früheren Version unseres Skripts; das einfache Beispiel oben verwendet 0.065 und 0.21, der fortgeschrittene CodePen 0.095 und 0.25, weil jede Schrift ihre eigene Abstimmung braucht.

var fontSizeBasedOnWidth = viewportWidth * 0.089;
var fontSizeBasedOnHeight = viewportHeight * 0.19;
var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);

Im fortgeschrittenen Skript verwenden die Nachnamen eine andere Schrift als die Vornamen, deshalb geben wir ihnen eine eigene Größe, berechnet aus der Vornamengröße mit einem separaten Multiplikator (der Wert im Snippet ist ein Beispielwert, der fortgeschrittene CodePen verwendet 0.91, abgestimmt auf seine Serifenschrift). Hier berechnen wir außerdem den Buchstabenabstand, und zwar minus 3 % der Schriftgröße.

var fontSizeLastName = fontSize * 1.08;
var letterSpace = fontSize * -0.03;

Schließlich wenden wir die Stile auf unsere Elemente an. Das Snippet unten ist die einfache Schleife, die die Schriftgröße setzt. Im fortgeschrittenen CodePen setzt derselbe Schritt zusätzlich den Buchstabenabstand der Vornamen, die kleinere Größe der Nachnamen und die Höhe jedes Link-Blocks, berechnet aus den beiden Schriftgrößen und ihren Zeilenhöhen.

menuItems.forEach(function(item) {
item.style.fontSize = fontSize + 'px';
});

Und voilà! Wir haben ein dynamisches Menü, das seine Schriftgröße an die Bildschirmgröße anpasst. Du stimmst die Multiplikatoren einmal auf deinen längsten Menüpunkt ab, und das Menü füllt den Platz bei jeder Breite und Höhe.

Die Zugabe

Aber wir hören hier nicht auf. Wir rufen unsere Funktion immer dann auf, wenn die Fenstergröße geändert wird. Das ist, als würden wir sagen: „Hey, wenn sich der Platz ändert, machen wir das Ganze noch einmal!“

window.onresize = adjustFontSize;

Wir rufen unsere Funktion außerdem auf, wenn das Dokument bereit ist. Das ist unsere Art zu sagen: „Lasst die Party beginnen!“

document.addEventListener('DOMContentLoaded', adjustFontSize);

Eine reine CSS-Alternative für einfache Fälle

Wenn alle deine Elemente dieselbe Schrift verwenden, brauchst du vielleicht gar kein JavaScript. Die CSS-Funktion min() gibt den kleinsten der übergebenen Werte zurück, und genau das macht unser Math.min()-Aufruf. Etwas wie font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); liefert dir bei jeder Größenänderung dasselbe Verhalten „was kleiner ist, Breite oder Höhe“, mit den Multiplikatoren aus unserem einfachen Beispiel. Die Zahlen musst du trotzdem auf deine eigene Schrift abstimmen. Wir greifen zu JavaScript, wenn wir zwei Schriften unterschiedlich dimensionieren, den Buchstabenabstand anpassen oder die Berechnung am Text selbst ausrichten müssen. Die Funktion min() ist seit Juli 2020 in allen Browsern verfügbar (Quelle: MDN Web Docs).

Wenn du außerdem ein Hover-Video hinter ein solches Menü legst, haben wir das in CMS-gesteuerte Hintergrundvideos in Webflow mit dem Custom Element erstellen behandelt. Und falls Inline-Stile, die ein Skript wie unseres setzt, deine Klassen scheinbar ignorieren, erklärt unsere Anleitung zur CSS-Spezifität in Webflow, warum.

FAQ

Wie passe ich eine Schriftgröße sowohl an die Viewport-Breite als auch an die Viewport-Höhe an?

Berechne eine Schriftgröße aus der Viewport-Breite und eine weitere aus der Viewport-Höhe und verwende dann die kleinere der beiden. In JavaScript ist das Math.min(), in CSS min() mit den Einheiten vw und vh. Mit dem kleineren Wert läuft der Text in keiner Richtung über.

Kann ich dynamische Schriftgrößen in CSS ohne JavaScript umsetzen?

Ja, für einfache Fälle. Eine Regel wie font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); bildet unser einfaches Beispiel ohne Skript nach. JavaScript bleibt nützlich, wenn du zwei Schriften unterschiedlich dimensionieren, einen eigenen Buchstabenabstand setzen oder die Berechnung am Text selbst ausrichten willst.

Warum nicht einfach die Viewport-Breite (vw) für die Schriftgröße verwenden?

Eine Schriftgröße, die nur auf der Breite basiert, wächst bei niedrigen, breiten Fenstern immer weiter, sodass der Text über den Viewport hinauslaufen und Scrollen erzwingen kann. Wenn du die breitenbasierte Größe mit einer höhenbasierten vergleichst und die kleinere nimmst, vermeidest du das.

Wo füge ich das Skript in Webflow ein?

Füge es als Custom Code vor dem schließenden Body-Tag ein, entweder in den Seiteneinstellungen oder in einem Embed, und stelle sicher, dass die Klasse, die du ansprichst (hier .menu_item), mit der Klasse deiner Elemente übereinstimmt. Das Skript läuft einmal, wenn das Dokument bereit ist, und erneut bei jeder Größenänderung.

Zum Schluss

Das war es also, Leute. Eine Schritt-für-Schritt-Anleitung, um deinen Webflow-Text so dynamisch zu machen wie einen Akrobaten des Cirque du Soleil. Es ist ein bisschen Arbeit, aber am Ende haben wir ein Menü, das großartig aussieht und sich an deine Inhalte und die Bildschirme deiner Nutzer anpasst.

Denk daran: Der Schlüssel zu einer großartigen User Experience ist Anpassungsfähigkeit. Und mit diesem dynamischen Menü bist du auf dem besten Weg zu einer Website, die so anpassungsfähig ist wie nur möglich.

Bis zum nächsten Mal: Bleib neugierig, experimentiere weiter und vor allem: Bleib kreativ. Die Welt von Webflow ist dein Spielplatz. Jetzt geh und bau etwas Großartiges!

Wenn dir dieser Beitrag gefallen hat, schau dir auch unsere anderen How-to-Beiträge an.