Mastering Squarespace’s Style Editor: How to Tweak Fonts, Colours, and Page Width
When building a website, establishing a cohesive visual identity is everything. Squarespace makes this easy by clustering your global design settings into a single, centralized panel called Site Styles.
Instead of changing elements page by page, Site Styles allows you to set global rules for your typography, color palettes, and layout spacing so your entire site looks clean, intentional, and perfectly aligned with your brand.
Here is how to navigate and customize these core design elements in Squarespace.
How to access Site Styles
To change any global design element on your website, you first need to open the styling panel:
Log into your Squarespace dashboard and open your website.
Click Edit in the top-left corner of your site preview to enter editing mode.
Look at the top-right corner of your screen and click the Paintbrush icon (Site Styles).
1. Tweaking your typography
The fonts you choose have a massive impact on how your brand is perceived. Squarespace integrates seamlessly with both Google Fonts and Adobe Fonts, giving you thousands of options.
How to change your fonts:
Inside the Site Styles panel, click on Fonts.
Under Switch Font Pack, you can browse curated pairings of serif and sans-serif typeways chosen by professional designers.
To fine-tune specific text, scroll down to Base Sizes or Assign Styles. Here, you can adjust the exact sizing, line height, and letter-spacing for Headings, Paragraphs, and Buttons independently.
💡 Design Tip: To keep your layouts clean and highly legible, stick to a maximum of two font families—one for your headings and one for your body text.
2. Setting up a cohesive color palette
Squarespace organizes colors into a global palette of five primary colors, which it then uses to automatically generate a set of light, dark, and neutral color themes.
How to update your colors:
In the Site Styles panel, click on Colors.
Click Edit Palette to set your primary brand colors using HEX codes or the color picker tool.
Once your main palette is locked in, scroll down to look at your Section Themes.
To tweak a specific element—like making a button text stand out more on a dark background—click the Pencil icon next to that specific theme, locate the element, and customize its color directly.
3. Adjusting your website page width
The width of your content dictates the structure and pacing of your pages. A narrower layout feels editorial and keeps text easy to read, while a wider layout is perfect for immersive, image-heavy portfolio grids.
How to change your site spacing:
In the Site Styles panel, click on Spacing.
Look for Page Width (Max).
Use the slider or type in a specific pixel value (a standard setting for a clean, modern layout usually sits between 1100px and 1200px).
Testing your design across all devices
Before you exit and save your changes, always review how your global styles translate across different viewports.
At the top of the screen, toggle between the Desktop View and Mobile View icons. Changes you make in Site Styles apply across your entire site, so ensuring your body text remains highly readable on a smartphone screen is a crucial final step.
Wrap up
Investing a little time into configuring your global fonts, colors, and layout widths up front saves you massive amounts of structural clutter down the line. By keeping these settings simple and intentional, your website will naturally look cohesive and professional.
If you’re looking to push your styling a bit further or want help translating your existing brand assets into a custom Squarespace layout, feel free to reach out. Let's talk about how we can build a digital home that works beautifully for your business.
