How To Choose Fonts, Colors, Buttons, and More On Squarespace 7.1
Create A Site Styles Page
First, we are going to lay out sections to see how our colors and fonts will look on our site and compare the ones we like the best.
Go to where it says "Not Linked" and click the plus icon and then click "Blank Page." Title your page “Style Page” and then click "Edit."
Click the “Add Section” button and then click “Add Blank.”
You’ll start with a text box.
Go ahead and type:
Heading 1
Heading 2
Heading 3
Highlight each heading and make it the heading it’s named after by clicking the paragraph icon.
Next, you are going to need to pull some filler text.
If you type "filler text" into Google and click on the first result, it will take you to a section of text and you can just click "copy."
Or you can just copy the filler text below:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Add this filler text under each paragraph and use a different font size for each (paragraphs 1 through 3).
Your Heading 1, or H1, is used for the main titles of pages. Paragraph 1 font is the main body of the text.
I like to have this sized at about 16-18 pixels. Some people might think this is too big, but the small text is a great way to make people click off your site.
Heading 2, or H2s, are your website sections. Think of the titles of each individual section of your site.
Heading 3, or H3s, are for your subsections within an H2 section.
I don't use paragraph 2 very much and only use paragraph 3 when I am writing the description of a photo or something.
Now, let’s add some buttons. Click out of the text box and then hover around the bottom border.
Click the plus icon and then choose "Button."
Under the "Content" tab, click where it says "Text" and write "small."
Then, click the "Design" tab. Under "Size," click "Small."
Repeat this two more times for the medium and the large button.
How to Change the Font on Squarespace
Click the paintbrush at the top right that says "Site Styles."
If you click "Fonts" and then click "Switch," you can choose from some of the font pairings that Squarespace has already recommended.
If your brand already has specific fonts that are used, you can see if they are available in Squarespace here.
You can upload fonts to Squarespace, but sometimes this can make your page load slower.
It’s best to choose fonts that are similar to your brand's fonts instead.
Choose Your Fonts
Fonts in Canva and Squarespace | Best Font Pairings
Personally, I recommend using fonts that are also already in Canva. Canva is a free, super user-friendly graphic design tool that we will be using throughout Squarespace School courses to customize your site.
By having fonts that are available on both Squarespace and Canva, you can ensure that your fonts will be consistent no matter what you create. Consistency is key with branding and style.
You can see a full list of fonts available in both Canva and Squarespace, as well as my list of recommendations below.
The Best Serif Fonts on Both Canva and Squarespace
-
Abril Fatface
Alice
Arapey
Corben
Cormorant Garamond
Forum
Gilda Display
Lora
Lustria
Marcellus
Merriweather
Noto Serif
Ovo
Playfair Display
Prata
Quando
Quattrocento
Radley
Rufina
Suranna
Vidaloka
The Best Sans-Serif Fonts on Both Canva and Squarespace
-
Aileron
Asap
Cabin
Dosis
Fira Sans
Josefin Sans
Jura
Martel Sans
Montserrat
Muli
Noto Sans
Nunito
Open Sans
Poppins
PT Sans
Questrial
Quicksand
Raleway
Tenor Sans
Titillium Web
Varela Round
The Best Thick Fonts Available on Both Canva and Squarespace
-
Anton
Archivo Black
Baloo
Candal
Montserrat Extra Bold
Noto Serif Display Black
Noto Sans Black
Open Sans Extra Bold
Oswald
Rubik Mono
Suez One
Ultra
Choosing Your Font in Squarespace 7.1
You’ll need one font for your headings and one for your body text.
To change your heading font, click the arrow next to “Headings” and select your font.
Click the arrow next to "Families," then click “Browse All Fonts." Here you can scroll to choose a font or just search for it in the search bar.
You’ll notice that as you change your font you can see how they look on the left.
Follow the same steps for your paragraph font.
Change your button font, too. I like to make my button font the same as my header font.
No matter which font you choose, the most important thing is that it is readable. Big, fancy writing may look cool, but if it’s hard to read, your site visitors will just go somewhere else.
How to Change Your Site Colors in Site Styles for Squarespace 7.1
First, exit out of the style menu, hover over the top of your section and click the "Copy" button.
Do this 2 more times until you have four sections total.
Next, click the paintbrush icon again, click “Colors” on the site styles menu. You’ll see you have a palette and your themes below.
Click "Edit Palette."
Now, you have a few different options. You can enter the hex code for each color that you want at the top for up to 5 colors, starting with the lightest on the left to the darkest on the right.
I recommend everyone's lightest left-hand text be white.
If you don’t already have a color palette for your business, think about a brand you love that is outside of your industry.
It’s totally okay to steal their colors, especially if they are not in the space of your product or service. No one has a copyright on colors.
If you don’t know the hex code of colors that you like then download the free color pick eyedropper extension for Chrome.
All you have to do is hover over the color on a web page and it will give you the exact hex code. I use this all the time.
Or, you can use Coolors.co. Use their generator to get some great ideas with their hex code.
Another option is to choose from a variety of presets that designers have set out for you.
Last, you can upload an image, like a logo, and Squarespace will automatically pull out your color palette for you.
Once you have your color palette, it’s time to test out how the colors look on your site. Close out of your site styles. Hover over the top of your first section and click the pencil icon, then go to "Colors." Start with "Lightest," scroll down and change it to "Light," then "Dark," and "Darkest."
These are the main four sections you will probably use over and over.
There are other ways you can change your background color outside of your color palette that I’ll talk about later on, but for now, it’s good to have a baseline of what your go-to sections can look like.
Note: You can also change your button colors, or change the specific styles for a style section or color theme.
To do this, first, go to the section you want to change.
Click into it. Click the style icon paintbrush. Here you can change the color, size and shape of buttons. Remember: Button fonts are changed under "Fonts."
Also remember that whatever you change here will impact every place where that style is in use on your site, which is why it's good to do it ahead of time.
Later, when we want to customize image blocks, you can style them here, too, under "Image Blocks." More on that later.