How to change font size on mobile on Squarespace
In a mobile-first world, ensuring your website’s content is readable on small screens is critical. While Squarespace automatically adjusts fonts across devices, it doesn’t offer precise control over mobile-specific font sizes through its style editor.
In this tutorial, you'll learn how to use custom CSS to target and resize fonts on mobile devices only—perfect for making your text more readable and user-friendly.
In this tutorial, I will show you how to resize font sizes on Squarespace for mobile screens.
Table of Contents
Why Change Font Size on Mobile?
Improve Readability: Text that looks good on desktop can often appear too large or too small on mobile devices.
Better User Experience: Right-sized fonts improve navigation, reduce bounce rates, and enhance user engagement.
More Design Control: Custom CSS lets you control typography in ways Squarespace’s default style settings don’t allow.
Accessibility: Ensuring your content is easy to read on smaller screens is key to making your site accessible to all users.
Complexity: Easy
Step-by-Step Instructions
Step 1: To change font size on Squarespace for mobile screens, simply copy the code below:
Mobile Breakpoints
/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px) {
/* Start Insert Code for Tablet*/
/* End Insert Code for Tablet */
}
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/
/* End Insert Code for Mobile*/
}
Use this code to resize font size
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem !important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem !important}
A full working example, is shown below, which you will paste in your Design > Custom CSS.
/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px)) {
/* Start Insert Code for Tablet*/
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem !important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem!important}
/* End Insert Code for Tablet */
}
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/
// Header h1
h1 {font-size:1rem !important}
// Header h2
h2 {font-size:1rem!important}
// Header h3
h3 {font-size:1rem !important}
// Paragraph
p {font-size:1rem !important}
/* End Insert Code for Mobile*/
}From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code. You can then adjust the font-size value to your desire size e.g ‘font-size: 1rem ! important’ to ‘font-size: 0.5rem ! important‘.
Key Takeaways
Squarespace doesn’t provide mobile-only font controls in the editor—but custom CSS gives you full flexibility.
Use media queries to target screen sizes (
max-width: 640pxis a good breakpoint for mobile).Apply changes to general elements (like
p,h1) or to specific block classes for more precision.Always test your changes on different mobile devices for consistency.
FAQs
Can I apply changes to only one page?
Yes. Use the page’s unique collection ID in your CSS selector to limit changes to that page only.
Will this affect tablet screens too?
The example above only affects screens 640px wide or smaller (phones). You can adjust the max-width to target tablets as needed.
Can I use this for buttons or nav text?
Yes. Just target those specific elements like .sqs-block-button-element or .header-nav-item a.
Will it impact SEO?
No. Font size changes via CSS are purely visual and do not affect SEO directly—but better readability can improve user experience metrics.
Conclusion
Mobile typography matters—especially when most traffic comes from smartphones. By applying a simple custom CSS snippet, you can fine-tune how your content appears on smaller screens and provide a better, more accessible experience for every visitor.
