Dynamic Font Size in Webflow: Fit the Viewport Width and Height

Hey Webflow enthusiasts! Today we're getting into a topic that's close to our hearts: dynamic font size, or how to make a font size adjust to both the width and the height of the viewport. Yes, you heard it right. Well, we just lied: we actually had to solve a problem for a client. Like most content in the how-to section of our blog, we're writing about what we had to do to solve an issue that Webflow usually doesn’t solve natively. As Webflow designers we always want to keep things as no-code as possible, but sometimes you need to go low-code.

The challenge

Let's set the stage. You've got a Webflow project. You've got a menu (it doesn’t have to be a menu, it could just be a heading, for example). In our case it was a nice menu with a list of director names and a background video that plays when you hover over it, and there's a catch. The client wants the text in the menu to fill as much of the page width as possible, based on the longest menu item. And you can't use viewport width for the font size, because the text needs to fill the space based on either the viewport width or the viewport height. Otherwise you’re going to start scrolling when it overflows the viewport. Sounds like a challenge, right? Here’s a peek at the menu to give you a rough idea of how it’s supposed to adjust as the height and width of the browser window change.

Well, my friends, that's where we begin.

The solution

Enter JavaScript, our trusty sidekick. With a dash of JavaScript, a pinch of CSS, and a whole lot of creativity, we can whip up a solution that makes our menu text as wide as possible or “tall”, no matter the screen size width or height. You’ll note our version is slightly more complicated: the first names and last names of the directors have different fonts and weights, so they can’t have the same font size. One’s just bigger than the other. We’ll add a simplified CodePen example as well, with just one font, for you to mess around with. Because the menu text comes from a CMS collection list, our guide to creating text spans in dynamic CMS text elements in Webflow is a handy companion if you want to style parts of that text differently.

The Nav

We’ve embedded two CodePens below with the scripts we'll be using. The first one is a simplified version, perfect for those who are just getting started or who have a single font to adjust. The second one is a bit more advanced, an ideal example for those who like a challenge, have multiple fonts to play with, or would just like to see how you can do some more advanced things. Feel free to take a peek, play around, and see what magic we're about to create. The code in the pen should be editable for those Webflow experts who want to mess around right away.

The simple example

// 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);

More advanced example of what we did

Dynamic text with two fonts

The breakdown

Now, let's break down these scripts like they're hot new dance moves.

First, we're declaring a function called adjustFontSize(). This is the heart of our operation, the engine that's going to drive our dynamic menu.

function adjustFontSize() {
// ...
}

Inside this function, we're grabbing all the elements with specific class names. Think of it as our way of saying, "Hey, we need you for a bit!"

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

We're also getting the width and height of the viewport. It's like asking, "How much space do we have to play with here?"

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

Next, we're calculating the font size based on the width and height of the viewport. The multipliers here are like our secret ingredients to get the font size just right. We're taking the smaller of the two font sizes calculated. It's our way of saying, "Let's not get too crazy with the font size, okay?" This is the bit where you have to experiment with both to get it just right, as it varies based on the font and the length of the text. The numbers in the snippet below are illustrative values from an earlier version of our script; the simple example above uses 0.065 and 0.21, and the advanced CodePen uses 0.095 and 0.25, because each font needs its own tuning.

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

In the advanced script, the last names use a different font from the first names, so we give them their own size, calculated from the first name size with a separate multiplier (the value in the snippet is illustrative, and the advanced CodePen uses 0.91, tuned for its serif font). We're also calculating the letter spacing here, at minus 3% of the font size.

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

Finally, we're applying the styles to our elements. The snippet below is the simple loop that sets the font size. In the advanced CodePen the same step also sets the letter spacing on the first names, the smaller last name size on the last names, and the height of each link block, worked out from the two font sizes and their line heights.

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

And voila! We have a dynamic menu that adjusts its font size to the screen size. You tune the multipliers once for your longest menu item, and the menu then fills the space at any width or height.

The encore

But we're not stopping there. We're calling our function whenever the window is resized. It's like saying, "Hey, if the space changes, let's do this all over again!"

window.onresize = adjustFontSize;

We're also calling our function when the document is ready. It's our way of saying, "Let's get this party started!"

document.addEventListener('DOMContentLoaded', adjustFontSize);

A CSS-only alternative for simple cases

If all your items share one font, you may not need JavaScript at all. The CSS min() function returns the smallest of the values you give it, which is exactly what our Math.min() call does. Something like font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); gives you the same “whichever is smaller, width or height” behaviour on every resize, using the multipliers from our simple example. You’d still tune the numbers for your own font. We reach for JavaScript when we need to size two fonts differently, adjust the letter spacing, or base the calculation on the text itself. The min() function has been available across browsers since July 2020 (source: MDN Web Docs).

If you’re also layering a hover video behind a menu like this, we’ve covered creating CMS-powered background videos in Webflow using the Custom Element. And if inline styles set by a script like ours don’t seem to obey your classes, our guide to CSS specificity in Webflow explains why.

FAQ

How do I make a font size adjust to both viewport width and height?

Calculate one font size from the viewport width and another from the viewport height, then use the smaller of the two. In JavaScript that is Math.min(); in CSS it is min() with vw and vh units. Using the smaller value means the text never overflows in either direction.

Can I do dynamic font sizing in CSS without JavaScript?

Yes, for simple cases. A rule such as font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); reproduces our simple example without a script. JavaScript is still useful when you need two fonts sized differently, custom letter spacing, or a calculation based on the text itself.

Why not just use viewport width (vw) for the font size?

A font size based only on width keeps growing on short, wide windows, so the text can overflow the viewport and force scrolling. Comparing the width-based size with a height-based one and taking the smaller avoids that.

Where do I put the script in Webflow?

Add it as custom code before the closing body tag, either in the page settings or in an embed, and make sure the class you target (here .menu_item) matches the class on your elements. The script runs once when the document is ready and again on every resize.

Wrapping up

So there you have it, folks. A step-by-step guide to making your Webflow text as dynamic as a Cirque du Soleil acrobat. It's a bit of work, but in the end we have a menu that looks great and adapts to your content and your users' screens.

Remember, the key to a great user experience is adaptability. And with this dynamic menu, you're well on your way to creating a site that's as adaptable as they come.

Until next time, keep exploring, keep experimenting, and most importantly, keep creating. The world of Webflow is your playground. Now go make something awesome!

If you liked this post, go check out some of our other how-to posts.