Mobile Font Sizes in Squarespace

Squarespace automatically adjusts many font sizes for smaller screens, but sometimes its decisions aren't quite the ones you would make.

That's where a little custom CSS can help.

In this tutorial, I'll show you how to target mobile screen sizes, adjust different text styles, and change one specific block without affecting everything else.

scaled text is great, until it’s not.

text blocks have a scaled text feature will change text size until the line it fills the width of the content block. That can make text super big or super tiny, and seems like a magic trick for mobile. i’m here to tell you ~ it’s not.

there is not official word from Squarespace on this, but time and time again, it slows down the sites I build, and that’s not good.

this is gunna get a little technical, but stick with me. every time that text is resized, the computer browser has to recalculate the size using some javascript. that takes some time. milliseconds to us which feels like forever to a computer. so, i don’t use it. i use CSS instead. One or two lines of code can be read much fast than a script can calculate the perfect size.

i love that css technique so much i made a home movie about it so you can learn how to do it too.

Meet the media query.

One little rule. A whole lot of control.

A CSS media query lets you apply different styles depending on the characteristics of the screen.

For this tutorial, we're using a maximum width of 767 pixels.

That tells the browser to apply the code when the viewport is 767 CSS pixels wide or smaller.

Here's the basic structure:

@media only screen and (max-width:767p){ (font type) {font-size: (new value)!important}

Anything you put between those curly brackets applies only when the screen is the right size so desktop stays as-is. But before you use this, you gotta know one important detail: 767px isn't a magical Squarespace number.

Different layouts and features use different breakpoints aka changes things at different widths. 767px is one that Squarespace uses for a lot of things, like list sections (my fav feature) but there are other sizes too, so play around with it. test on different screen sizes. see what works for your layout & your design.

See this in action

try this code on your site and see what happens to your heading 1 & heading 2 on mobile

@media only screen and (max-width:767p){
h1 {font-size: 30px!important}
h2{ font-size: 25px!important}
}

What if you only want to change ONE thing and not all of it?

The code above changes all the heading 1 text and all the heading 2 text on your site, but you can get really specific if you need to. Everything on your squarespace site get’s a unique ID number, and this is how you use it.

Squarespace ID finder ⇢