Change Font Size on Mobile for Squarespace Website

If you’ve ever built a site on Squarespace, you’ve probably noticed something frustrating — the font size stays the same on desktop and mobile.

That might look fine on a big screen, but on mobile? Headings can appear way too large, and body text might feel clunky or unbalanced.

The good news is you can fix this easily with a small piece of custom CSS.

Code


@media screen and (max-width: 640px) {

h1 {

font-size: 20px;

}

}

Why This Happens

Squarespace uses one global font size setting by default. It doesn’t adjust your text for different screen sizes — unless you tell it to.

How to Adjust Font Size on Mobile Only

Here’s a simple way to change your font size just for mobile (using a media query):

1. Go to your Custom CSS panel
   → Home > Design > Custom CSS
   (Or press /, type “CSS”, and hit enter)

2. Paste in the code at the top of this blog post.

You Can Use px, rem, or em

Instead of 20px, you can also write:

• 2rem (responsive to root font size)

• 1.5em (responsive to parent element)

Choose what fits your design system best.

Need Help?

Have questions or want this done for you? Get in touch via the links below.

If this was helpful, feel free to explore more tutorials on the blog — and if you’re looking for a Squarespace expert to design your site properly from the start, get in touch with me here →