In last week’s tutorial/video, we talked about how to pick the right template for your business in version 7.1 of Squarespace.
Wondering how to customize the look of your template’s fonts, colors, and buttons to be a bit more on-brand?
Whether you’re a newbie DIY’er or an experienced Squarespace designer left scratching their head by recent updates to the platform…this little mini series will have you quickly and easily customizing your site using the built-in site styles editor.
Site styles are the settings used to tell Squarespace exactly how to display your content.
So when you first go to plug in your images, your copy (A.K.A website words), your buttons and links, these will automatically take on whatever default style settings come with that template you picked!
Swapping out the default fonts, colors, and buttons is what keeps your site looking unicorn status unique and nothing at all like the cookie cutter template or your competition!
So how do you change them?
Your global site style editor settings all live in your site’s Design Panel and any changes you make here will affect that specific design element you’re editing site-wide.
So if you change your button font in your Design Panel, button fonts everywhere on your site will follow.
These changes happen in the on-page editor. These settings will look different depending on the type of content you are editing, but it can be found by clicking Edit on the page, and then opening the Section Settings or Content Block Settings.
Any changes you make here are only applied locally, or to that one section or bit of content.
You want to start with your global changes, or the change made in the Design Panel (A.K.A Site Styles Editor).
Think of it like renovating a home.
Before you can start the actual makeover process, you have to decide the overall aesthetic you are going for, and therefore the types of materials or finishes you will use to get the job done.
The site style editor is the store where you shop for all the materials you need to create your design. The decisions you make here decide the overall consistent theme for your home.
Now that you’ve handpicked your custom finishes, it’s time to decide where throughout your home to use them.
This is where your on page editing comes in.
When you click the Style Icon and make changes to your Section Settings, you are telling squarespace which colors from your overall palette will get applied to that one room.
You can swap out those paint options as much as you like, but if you decide you want to change your general color palette, you’re going to need to return to the paint store (your site styles editor!)
So the global editor is used to set all the styles you plan to use across your site and the section settings are only used to apply those styles.
So for today’s tutorial, we are going to focus on the 3 main elements that will have the biggest impact on the look and feel of your site.
Your fonts, colors, and buttons!
Pro-tip: Squarespace will only give you options for styling or customizing the type of content that already lives on your site, but it can’t show you options for changing something that you haven’t yet added.
So it’s helpful to add one of every element or content type that you plan to set your styles for.
I like to create a sort of moodboard with one of everything I’ll be styling on one page. This allows me to view the changes I’m making in real-time, seeing how they look compared with the other elements I plan to use around my site.
I’ll start by tying out little example labels to show all the different font styles that will be available to me when designing my site.
Kinda like this …
These are just regular words, typed into a text block, to which I’ve then assigned the appropriate font style. Again, Squarespace can’t offer options for customizing what isn’t there, so I had to go in and create a small snippet of text using each type of font formatting my version of Squarespace offers first.
(You’ll have a few more formatting options in 7.1!)
Don’t forget to include a regular old link as well so Squarespace knows what to do when you link something in your text!
I would also add in three buttons – a small, medium, and large button – each one labeled so I remember which is which when deciding my site styles.
Btw the way, you’ll want to keep your moodboard page handy for part 2 of the series where we talk about setting your site’s color themes and remaining button styles as well.
First go to Design > Fonts.
You’ll see that Squarespace comes loaded with tonsss of ready to use font packs. These are pre-packaged font pairings created by their brilliant design team to help you quickly and easily choose fonts that pair well together.
But if you don’t see one you love, no worries!
You can hand-pick your pairings by clicking any on of the packs, pressing save, then scrolling below the pack to see your options for further customization.
Within each font pack, you have 4 main groups of fonts you’ll be styling:
Heading fonts: what you use to add titles, section headers or big stand-out words on your site.
Paragraph Fonts: the font used to write the body of your text.
Button fonts: the font used to label all your buttons site-wide.
Miscellaneous: the fonts used for tags, categories, pricing etc. on your site. This helps you to style much of the text that appears on your site that wasn’t added using a text block.
You also have a few random fonts to assign under Assign Styles in your Font Panel. This includes your site title, navigation, and your header button, should you choose to include one. You can assign a font from your font pack, or assign a custom font.
Within each of those groups, you’ll have options to adjust:
Font family: the funnest part of font shopping!
Font Weight: this decides how bold or thin your font will be.
Font Style: most font families offer normal or italicized as options
Line Spacing & Height: affects how much white space you’ll have between each line or letter
Text Transform: allows you to write in all caps or all lowercase all the time.
Pro-tip: You can adjust a lot of these things using your Text Block Toolbar while typing out your content in your Text Block (like bolding or italicizing words you want to stand out, or simply by typing with your caps lock on).
Sometimes leaving the settings on default will actually give you more room to play with the font when you go to write on the page!
Squarespace knows how important brand consistency is, and how having too many different fonts can overwhelm visitors and massively slow down your site site speed, which isn’t great for SEO.
Instead of different fonts for each type of heading, Squarespace makes each heading a different size to help differentiate between them.
You can find those font size sliders by scrolling down in each font group’s settings.
If you return to your font panel,You can also increase or decrease the size of all fonts with one click using the plus or minus buttons beside Base Size.
Okie dokes! So that is how we customize our fonts using the new version of Squarespace!
We will be tackling colors and buttons in part 2 of the series, so be sure to keep your moodboard handy and your peeled for that!