How to Change Mobile Font Size in Squarespace

content block

May 6

If your Squarespace site looks great on desktop, but the text feels way too small (or awkwardly large) on mobile, this is the tutorial you have been waiting for. I’ll show you how to use custom CSS to change the font size specifically for mobile devices, so your typography looks just right on every screen.

In the video below, I walk you through step-by-step how to target headings, paragraphs, and even specific content blocks to control font size on mobile. Everything you need to know is written out for you below, plus a few extra tips that didn’t make it into the video. 😉

📏 Why Font Sizes Look Different on Mobile

Squarespace’s built-in design panel doesn’t offer mobile-specific font size controls. That means the font you set for desktop is the same one that shows up on tablets and phones… even if it doesn’t look great squished into a smaller screen.

To fix that, we use a media query in CSS. This lets us tell the browser, “Only apply this code if the screen is under a certain width.” In this case, we’re using max-width: 767px to target smaller mobile devices, in both landscape and portrait mode. With that in place, you can write new font sizes just for mobile, leaving your desktop styles exactly as they are. To be super clear, different people use different breakpoints! In my experience with Squarespace, this is the breakpoint that renders mobile changes, like a single column list section. To learn more about breakpoints, check out this article on creating mobile codes for Squarespace.

// mobile only
@media only screen and (max-width: 767px) {
code goes here
}

🔠 Headings and Paragraphs: What to Target

Squarespace uses predictable names for heading styles, so these are easy to customize using the codes below. But paragraphs? That’s where it gets funky.

Paragraph 1 = .sqsrte-large
Paragraph 2 = p
Paragraph 3 = .sqsrte-small
Monospace Text = code

Each one of these can be styled individually within your media query. Just be sure to preview your mobile layout as you go, and keep readability in mind; super small fonts can make your site harder to use.

@media only screen and (max-width: 767px){
h1 {font-size: 16px!important}
h2 {font-size: 16px!important}
h3 {font-size: 16px!important}
h4 {font-size: 16px!important}
.sqsrte-large {font-size: 16px!important}
p {font-size: 16px!important}
.sqsrte-small {font-size: 16px!important}
code {font-size: 16px!important}
}

🔍 Block ID vs. Selector: What’s the Difference?

Sometimes you only want to change the font size in one part of the page—like a single quote block or just one summary section. You have two ways to do this: block ID or CSS selector.

Block ID: This is a unique identifier Squarespace assigns to each block. You can target one specific block by adding code like #block-yui_3_17_2_1_1234567890_1234 inside your media query. (Use a Chrome extension like the Squarespace ID Finder to grab the block ID fast.)
Selector: This is the actual class name of the type of content you’re styling. For example, all summary block titles use .summary-title, so if you want to change every summary title site-wide, that’s what you’d target.

🧠 Pro Tip: If you're not sure what selector you need, ask Custom Codey. He’s trained on over a thousand Squarespace-specific selectors and can help you write pinpoint-accurate code, instantly.

✨ Stretch to Fit (a.k.a. Scaled Text)

Now, here’s a sneaky setting that overrides your code: Stretch to Fit.

If you’ve enabled this in a text block, Squarespace will scale the font to fit the width of that container—no matter what font size you set in your site styles or in custom CSS. This is great for big bold headings that you want to fill a banner space, but it’s not ideal if you’re trying to control mobile text size.

To turn it off:

Click into the text block
Toggle off the “Stretch to Fit” (or “Scale Text”) option
Then your custom font size will take effect

📏 Line Height: Don’t Forget the Spacing

Changing the font size is only half the battle; line height matters, too! If your text feels too cramped or too loose, try adjusting the spacing between lines using the property line-height to manually adjust the distance. Play with values between 1.2rem and 1.6rem depending on your font and layout. A well-spaced mobile layout is much easier to read and feels more polished.

📥 Grab My Free Font & Text Property Guide

Not sure what properties you can change? Want a cheat sheet of font styles and spacing options you can use in CSS? I’ve got you covered.

✅ Final Recap

To change the font size just for mobile in Squarespace:

Use a @media screen and (max-width: 767px) query
Adjust h1 through h4, p, .sqsrte-large, .sqsrte-small, and code as needed
Use block IDs to target one block, or selectors to target one content type
Use Custom Codey if you need help finding the specific code you need for your unique project
Watch out for stretch-to-fit text—it overrides font size settings
Don’t forget about line height for legibility