Dynamic Font Sizing in Webflow: Adapt to Viewport Dimensions

Hey Webflow enthusiasts! Today, we're diving into a topic that's close to our hearts: dynamic font size. Yes, you heard it right, we just lied, we actually had to solve a problem for a client, and like most content on the how-to section of our blog, we just write about what we had to do to solve and issue that Webflow usually doesn’t solve natively. So, as Webflow designers we always want to keep things as no-code as possible, but sometimes you need to low-code.

The Challenge

Let's set the stage. You've got a Webflow project. You've got a menu (doesn’t have to be a menu, could just be a heading etc), in our case it was a nice menu with a list of director names and some background video playing when you hover over it, 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 it needs to fill as much of the space based on either viewport width or viewport height or you’re going to start scrolling when it overflows the viewport. Sounds like a challenge, right? Here’s a peak at the menu to give you a rough idea of how it’s supposed to adjust based on the height and width of the browser window adjusting.

Well, my friends, that's where our journey begins.

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, but we’ll add a simplified codepen example as well for you to mess around with that’s just one font.

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 or have multiple fonts to play with or for those who 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

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 font and the length of the text.

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

In the advanced script, we're also making the last name slightly bigger than the first name. Because why should first names have all the fun, right? And we're calculating the letter spacing here.

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

Finally, we're setting the height of each link block and applying all these styles to our elements.

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

And voila! We have a dynamic menu that adjusts its font size based on the longest menu item and the screen size.

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

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 a journey, but at the end of the day, we have a menu that not only looks great but also 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 the post, go check out some of our other how-tos here.