Squarespace makes it easy to control your website’s typography. In this guide, you’ll learn how to change font size for text, headings, and buttons using built-in style tools and advanced options for better readability and design.
Access the Style Editor in Squarespace
To begin adjusting typography, you’ll need to access the design panel, where you can control various text styles for your website.
- In your Squarespace dashboard, open the website you want to edit.
- Go to Design > Site Styles.
- Click on any text area or use the left panel to navigate to Fonts.
Change Font Size for Headings
If you're wondering how to change font size in Squarespace for headings like titles and subtitles, you're in the right place. Learning how to change text size in Squarespace—especially for your H1 through H6 tags—is key to keeping a clear visual hierarchy and making your design easy to scan. Whether you're trying to make text bigger on Squarespace to catch attention or need to increase font size in Squarespace for better mobile visibility, heading customization plays a central role. Each heading level can be styled independently to help your content stand out in a readable and organized way.
| Heading Type | How to Change |
|---|---|
| H1–H3 (Main) | Go to Site Styles > Fonts > Headings and adjust the size slider. |
| H4–H6 (Subheadings) | In some templates, you may need to click directly on the subheading in preview mode to reveal controls. |
Increase Paragraph Text Size
To adjust text size for general content areas:
- Navigate to Site Styles > Fonts > Paragraphs.
- Use the font size slider or enter a specific pixel/rem value.
- Check for responsiveness across desktop and mobile preview.
Adjust Font Size in Buttons
Knowing how to change font size in Squarespace isn’t just about text and headings—buttons matter too. When you're trying to make text bigger on Squarespace, don’t overlook call-to-action buttons, which play a critical role in conversions and user interaction. Squarespace allows you to change text size in buttons separately using the built-in style editor. This gives you full control to increase font size in Squarespace for clickable elements, improving both readability and visual emphasis.
- Go to Site Styles > Buttons.
- Select the button style (Solid, Outline, or Minimal).
- Change the font size using the slider under Typography.
Enable Responsive Font Sizing
Modern templates in Squarespace support responsive text scaling automatically, but here’s how to make sure it works:
Use fluid text controls
- Some templates like Brine, Five, and Fluid Engine support automatic scaling.
- Check under Fonts > Advanced for “responsive scaling” or fluid size options.
Manual control with CSS
If your template lacks built-in scaling, use this CSS in Design > Custom CSS:
p {
font-size: clamp(16px, 2vw, 20px);
}
Adjust Mobile Font Sizes in Squarespace
Mobile font styles can behave differently. To optimize for mobile:
- Use Squarespace’s device preview to test text scaling.
- For specific overrides, use
@mediaqueries in custom CSS.
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
}
Use Custom CSS for Advanced Typography Control
If you're looking for more flexibility on how to change font size in Squarespace beyond what the style editor offers, custom CSS is the answer. It allows you to change text size in Squarespace precisely—even in places the visual tools can’t reach, such as quotes, footers, or specific sections.
Whether you want to increase font size in Squarespace for better emphasis or make text bigger in Squarespace on mobile views only, CSS gives you full control over typography and layout appearance. It's especially useful when the default design panel font options are too limited for your vision.
Example: Change blockquote text size
blockquote {
font-size: 18px;
line-height: 1.6;
}
Example: Adjust footer font size
footer p {
font-size: 14px;
}
Typography Tips for Readability
Stick to readability-focused sizes. For body text, stay within the 16–20px range. This range has been proven optimal for readability on screens, balancing legibility with overall layout aesthetics. Smaller text can strain users’ eyes, especially on mobile devices, while larger text may disrupt the visual hierarchy of your page.
Limit font types. Avoid using more than two fonts to maintain design consistency. Using too many different typefaces can make your website look chaotic and unprofessional. A clear pairing—like a serif for headings and a sans-serif for body—helps establish visual order and improves cognitive flow for readers.
Maintain contrast. Ensure your font color and background have sufficient contrast. Poor contrast (e.g., light gray text on a white background) makes it difficult for visitors to read your content, especially for users with vision impairments. Strong contrast also performs better in bright environments and increases overall accessibility.
Test on real devices. Simulators are helpful, but real devices give better feedback on text clarity. Font rendering can vary between browsers and operating systems, so it’s essential to preview your website on actual smartphones, tablets, and desktops to ensure that font sizes, line heights, and spacing appear as intended.
Useful Links
Changing Fonts – This official guide provides detailed instructions on how to change fonts across your Squarespace website, including adjusting font sizes and styles.
Styling Text – Learn how to customize your text's appearance, including font size, color, and spacing, to enhance your website's readability and design.
Making Style Changes – This article covers how to edit your site's fonts, colors, and page layout using Squarespace's style settings.
Scaling Fonts in Version 7.0 – If you're using Squarespace version 7.0, this guide explains how to set minimum and maximum font sizes to ensure responsive design.
Good Design Practices – Explore best practices for designing your Squarespace website, including tips on typography, to create a professional and accessible site.
Enhance Your Squarespace with Powerful Plugins!
Elfsight created dozens of useful plugins to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Squarespace!
Conclusion
Changing font size in Squarespace is easy once you explore the style editor and understand how responsive scaling and custom CSS work. Whether you want to make text larger, improve mobile readability, or fine-tune heading styles, Squarespace provides flexible tools to help you create a polished and accessible website.
