Font Size Scaling Problem in Squarespace 7.1 (Causes & Fixes)
Scaling font sizes: Scaled up or scaled down, the inability to scale fonts is a bugbear for many people in Squarespace 7.1, especially when the text looks just right on desktop but comes across as too big, too small or unevenly scaled on tablet and mobile.
This occurs because Squarespace 7.1 relies on fluid responsive typography from which we don't always get the result you'd expect (especially when custom CSS, global styles or section layouts are in play).
What Does the Font Scaling Problem Look Like?
You may notice:
Headings look oversized on mobile
Paragraph text shrinks too much on smaller screens
Fonts scale unpredictably between breakpoints
Line breaks look awkward or uneven
Custom fonts behave differently than expected
Why Font Scaling Happens in Squarespace 7.1
Squarespace 7.1 typography is affected by several factors:
Fluid typography (viewport-based scaling)
Global Site Styles font settings
Heading size presets (Small / Medium / Large)
Section width and layout structure
Custom CSS overrides
Browser zoom and device resolution
Because font sizes are not fixed, text scales automatically based on screen size—sometimes too aggressively.
Solution 1: Use Built-In Typography Controls Correctly
Before using CSS, always check Site Styles.
Steps:
Go to Design → Site Styles
Open Fonts
Adjust:
Heading sizes
Paragraph size
Line height
Letter spacing
Preview on desktop, tablet, and mobile
👉 Avoid setting headings to the largest preset unless necessary.
Solution 2: Fix Font Scaling With Mobile-Specific CSS (Recommended)
If fonts still scale poorly, use a media query to control mobile typography.
Go to Website → Pages → Custom Code → Custom CSS and add the following:
Fix Large Headings on Mobile
@media only screen and (max-width: 767px) {
h1 {
font-size: 32px !important;
}
h2 {
font-size: 26px !important;
}
p {
font-size: 16px !important;
}
}
This ensures:
Headings don’t overpower the layout
Body text remains readable
Consistent spacing on mobile
Solution 3: Fix Text Inside Specific Sections Only
If the issue appears in one section (hero, banner, intro text), target that section only.
Steps:
Right-click the section → Inspect
Copy the data-section-id
Use it in your CSS
@media only screen and (max-width: 767px) {
section[data-section-id="YOUR-SECTION-ID"] h1 {
font-size: 30px !important;
}
}
This prevents global font changes.
Solution 4: Avoid Viewport Units for Text
If you’re using CSS like:
font-size: 6vw;
This can cause extreme scaling on large or small screens.
Better Alternative:
Use clamp() for controlled scaling:
h1 {
font-size: clamp(28px, 4vw, 56px);
}
This keeps font sizes within a safe range.
Common Mistakes to Avoid
Relying only on desktop preview
Using vw units without limits
Overriding global typography unintentionally
Ignoring line height on mobile
Mixing multiple font overrides
Best Practices for Typography
Design mobile-first
Media queries for the finer control
just keep it in the 15-18px range and you should be gold on mobile!
Keep headers visually strong but not too large
Test on actual devices, not just with preview mode
Final Thoughts
Squarespace 7.1 font size scaling is generally an overall result of fluid typography and maintaining constraints on the document layout. Though the system is meant to be responsive, you won’t always get fabulous results right out of the box.
Using Site Styles tweaks and specific CSS targeting, take full control over how your type scales at every screen size—without losing responsiveness.
FAQ: Font Size Scaling in Squarespace 7.1
-
Because Squarespace scales fonts dynamically based on screen width.
-
Not always—but CSS gives precise control when Site Styles fall short.
-
Yes. Typography changes do not affect indexing or rankings.
-
Yes, by targeting the section ID in CSS.
-
Yes. Modern browsers fully support it.
