3 ways to fix tiny text on larger screens in 5 minutes (Squarespace 7.1)

It feels backwards, doesn’t it? For the text on your Squarespace project to become smaller on bigger screens instead of larger.

Shouldn’t it be the other way around?

Now, of course there’s a logical reason behind that but, more importantly, there’s also a fix.

In today’s video I’ll show you what the heck is going on and 3 ways to fix the issue where needed, with a bit of CSS.

Let’s get to it!

Video timestamps

00:00 - The problem with font sizes on larger screens

Today we're gonna be talking about font sizes in Squarespace, and in particular, how you can stop them from becoming ridiculously tiny on larger monitors.

Now, this is an issue that has been happening for a while now, and if you work on client sites where you're using font sizes that are on the smaller side, then you've probably noticed that when you're looking at things on your laptop, everything looks great, but as soon as you look at things on a larger screen, then it pretty much becomes unreadable.

Now, this issue can come up for a bunch of different elements, but I'm going to be using the announcement bar and the navigation items as an example.

Now, first I wanna show you why this issue is coming up, and then I'm gonna share with you three ways in which you can fix it with a little bit of code.

00:40 - Why this is happening

So the reason for this problem is fairly simple. It has to do with how Squarespace is calculating the font sizes in 7.1.

So the way that the font sizes worked in the past was that Squarespace was simply using the number that we had set inside the Site Styles panel as the value for that specific element.

However, in order to make things more responsive, Squarespace is now using the number that we had set as part of the calculation that determines how big that font size is going to be at different points.

Now, that method works pretty well when you're using a base font size of about 16px or higher, and when you're using 1rem or more for the different text elements on the site.

But if your project requires you to work with a font size that is on the smaller side, then that's probably why you're watching this video.

01:25 - Apply a specific font size

So now that we know why this is happening, let's see how you can solve the problem for those specific elements that require it, without you having to modify the font size for the whole site.

So what we're going to do here is pretty much what you expect. We're going to modify the font size via CSS.

However, as I mentioned in the beginning, there are three ways that we can tackle this.

If you already know that that particular element or set of elements needs to have a specific font size applied to it at all times, then it's a matter of simply targeting it and applying the pixel, the em or the rem value of your choice.

01:57 - Use the Squarespace variable

Now, if you want to allow your client or yourself to be able to change their minds in the future and alter that font size through the Site Styles panel, then what I recommend instead is working with the variable that Squarespace is using to set that value.

So instead of relying on the whole calculation that Squarespace is using involving that variable, we're going to get the variable out of that equation, and we're going to use it on its own.

Now, keep in mind that Squarespace is using two different variables to set the different font sizes.

One variable carries simply the value without the units, and the other one does include it. So depending on the variable that you're using, you may need to include the unit yourself in the code.

If you rather not do that, then here's a quick tip that you can use.

If you look for the current font size that has been applied to your element, and then you look for the corresponding variable involved, by clicking on it, you'll be able to see all of the other variables that Squarespace is using for that page.

And in general, because it may not apply to all cases, but in general, if you take a look at the variable that is right before the one that you clicked on, you'll notice that that one already includes the unit inside it.

03:01 - The limitation of the first two approaches

Now, keep in mind that these first two approaches are not going to make your font size responsive anymore.

So if you're working with buttons or any other elements that don't really need to be resized, then you're good to go.

But if you're dealing with something like the announcement bar or any other text element that you do want to resize, then the third method is probably better for you.

03:18 - Use the clamp( ) function

This one involves using the clamp( ) function.

Now, I already have a video on that, so if you want more of a deep dive, you can go ahead and check it out, but in general terms, the way that clamp( ) works is with three separate values.

So you have the minimum, the maximum, and let's say the average value that the font size should have at all times.

So with the first value, you need to decide how small that font can get at any point, and then regardless of the other two, the font size is never going to go lower than that number.

On the other end, you have to set how big that font size should be allowed to get.

So if you don't want that font size to blow up in your screen, then you need to set a value that is going to be big enough to match larger screens, but not too big that it becomes overwhelming.

And then the middle one is kind of a tricky value.

That one is associated with the width of the browser, and it's going to help you determine how big the font size should get within those limits, based on the screen size.

So particularly with really big text, you may have to play around with that middle value a little bit more than with regular sized text.

But overall, using this method, you're still going to get the responsive behavior that Squarespace is trying to give us, while being able to have more control over the two extremes.

So the next time that you're dealing with really tiny text on your client websites, now you know how you can fix it.

I really hope that you found this helpful and that you're able to implement it on all of your client projects.

Until next time,

B.

Full code

Custom CSS Window

//Option #1
.element {
  font-size: 12px;
}

//Option #2
.element {
  font-size: var(--announcement-bar-font-font-size);
}

//Option #3
.element {
  font-size: clamp(~"var(--announcement-bar-font-font-size), 2vw, 20px");
}