Mastering Squarespace’s Style Editor: How to Tweak Fonts, Colours, and Page Width

If you're looking to customise the look of your Squarespace website, the Style Editor is your best friend.
With this powerful tool, you can adjust fonts, colours, and page width to ensure your site looks professional and aligns with your brand’s identity. In this article, we’ll walk you through how to tweak these design elements to create a unique and visually appealing site.

✨ Customising Fonts

The fonts you choose for your website have a huge impact on its overall look and feel. The right typography can help convey your brand’s message and make your site more readable.

• Accessing the Style Editor:
  To start, log in to your Squarespace account and go to your website’s dashboard. From the left-hand sidebar, click on Design and then select Site Styles. This is where you can change fonts, colours, and much more.

• Choosing the Right Font:
  In the Style Editor, click on the settings for different text elements like Headings, Paragraphs, and Buttons. Squarespace offers a variety of fonts, from serif to sans-serif to Google Fonts. Pick the font that best matches your website’s tone and personality.

• Adjusting Font Size and Spacing:
  You can also adjust the font size, line spacing, and letter spacing to ensure your text is legible. For example, use larger, bold fonts for headings to grab attention, and smaller, more readable fonts for body text. Experiment with these settings to create the perfect balance for your site.

✨ Setting Website Page Width

The page width setting controls how wide your content appears on the screen. By adjusting the width, you can create a clean, focused layout or showcase visual content like images and videos.

1. Accessing Page Width Settings:
   In the Style Editor, look for the settings called Page Width or Content Width. These settings allow you to adjust the width of your site’s content.

2. Adjusting the Width:
   Use the slider to increase or decrease the width of your site. A narrower width can give your site a clean, focused look, while a wider layout works better for sites that feature a lot of visual content, such as portfolios or image galleries.

3. Previewing Your Changes:
   Once you’ve made changes to the page width, preview your site to see how it looks. Make sure to check how your site appears on both desktop and mobile devices to ensure a responsive design.

✨ Adjusting Colours

Colours are essential for creating a visually cohesive website. They help establish your brand identity, guide visitors’ attention, and improve readability.

1. Using Pre-set Color Palettes:
   In the Style Editor, navigate to the Colors section. Squarespace provides several pre-designed colour palettes, each carefully crafted to ensure that all colours work well together. Choose the palette that aligns with your brand.

2. Customising Individual Colors:
   You can also adjust individual colours within the selected palette. Simply click on a colour and use the colour picker to choose a new one. This gives you the flexibility to fine-tune your website’s appearance.

3. Creating Contrast:
   To create a professional, polished look, try using bold colours for important elements like buttons and neutral colours for the background or text. This creates strong contrast, making your site more visually appealing and ensuring that important content stands out.

✨ Previewing and Saving Your Changes

After adjusting fonts, colours, and page width, it’s always a good idea to preview your site before publishing. In the Style Editor, click on the Preview button to see how your changes will appear live.

Be sure to check both desktop and mobile views to make sure your design looks great across all screen sizes.

✨ Conclusion

Customising your website using the Style Editor is a quick and easy way to personalise your Squarespace site. By tweaking your fonts, adjusting colours, and setting the page width, you can create a professional, unique design that reflects your brand and engages your visitors.

Take the time to experiment with these settings and find the perfect combination for your site. And, of course, don’t forget to preview your changes before going live. Happy designing!

Looking for a squarespace designer?

Let’s create something great! Book a free consultation today!