How to Pair Fonts on Squarespace

Image Source Unsplash

Font and font pairing can get complicated really fast, but it doesn’t have to be that way. Launch Happy regularly takes the mystery out of Squarespace development for web designers of all levels. Here we share some font insights to help make your job easier.  

Table of Contents in Detail Hide

Where to Find Fonts in Squarespace 

The good news is that the Squarespace 7.1 platform makes it pretty easy to choose a font pair. You’ll want to customize to your preferences. Let’s get started. 

1. From the backend of the platform, go to the Design Panel. 

2. Click Site Styles. 

3. Click on Fonts. 

Now that you’re in, keep these important points in mind:  

1. Keep the base size at around 16 to 19 pixels. 

2. Don’t go below 15; it can get too hard to read. 

How To Change Site Styles 

Playing around with styles can be fun. Try this: 

1. Click on Font Pack. 

2. Go to Switch. 

You have many options to choose from. Browse through the packs to check out some of the different font styles that are available to you.  

1. Select a pack that catches your eye. 

2. Let it load and see how it looks on the page.  

3. Save the page.  

You may need to refresh the page to see the new look. Once you select a font that you like, you can dive deeper into the options to create your own site customizations. Take some time to explore this: 

• Global Text Styles: These styles will appear throughout your site. Set how your headings, paragraphs, buttons, and miscellaneous text will look.  

Within Global Text Styles, you can set the font look for many sections of your site, including the following: 

• Site navigation 

• Titles 

• Metadata 

• Header button 

• Announcement bar 

• Content link block 

• Menu 

• Newsletter 

• Quote 

• Form 

• Blog 

• And more 

How to Choose Fonts 

How do you go about choosing fonts for your site? Being innovative with your design is fine so long as you remember to create a quality user experience. Keep in mind the following: 

• Make sure the font you choose is easy to read. 

• Avoid being super trendy; simple elegance is usually better.  

• Choose fonts that create a clean, clear appearance. 

Some especially good fonts to use are Sans Serif and Grotesk, which are great all-around fonts for their beauty, clarity, crispness, and legibility. Both of these font types can give your pages a touch of elegance. 

For tech sites, consultant agencies, or contemporary business sites, Work Sans is a great choice because of its modern look.  

For a softer, more organic look, try one of the Serif fonts. These often work well for blogs.  

Designing a beautiful page is important, but never lose sight of the fact that your visitors need to read your pages! You can find ways to pop out as a brand without sacrificing readability.  

Simple and clean is often better than fancy and complicated, for the sake of legibility. Pay attention to letter width, spacing between letters, font weight, boldface, and other details.  

How to Change Style and Format 

Now that you have a feel for what’s available in terms of fonts, and you’ve had a chance to explore what looks good, what doesn’t, what’s easy to read, and what overcomplicates your text, let’s talk a bit about making changes.  

Going back to Global Text Styles under Fonts, you can go into the individual settings (e.g. Headings, Paragraphs, Buttons) to change the styling and format. 

As you explore each setting, you’ll find a wide range of options to experiment with. These are just some of the specifics you can modify: 

• Family 

• Weight 

• Style 

• Line height 

• Letter spacing 

• Size 

• And more 

Dedicate some time to play around with options. Be sure to make a note of which combinations resonate with you.  

More Tips 

A few more quick tips as you get started: 

1. Avoid Poppins. It’s a beautiful font, but Squarespace uses it in many of its templates. If you’re trying to stand out with your own branding, Poppins won’t cut it; it’s way too over-used.  

2. Make Use of Boldface. The global text styles you select will be consistent across your site. If you want to emphasize certain headings, go to the specific pages you want to modify and manually use boldface to bring more attention to a particular heading on the page.  

3. Don’t Overthink It. When it comes to fonts, don’t try to overdo it. Save your design creativity for other visual elements of your site. Keep the fonts simple so your text is easy to read.  

Need Extra Help? 

Launch Happy has created a really useful designer starter kit that covers the basics to get you up to speed quickly on building your business as a site developer. Our starter kit goes into many useful topics, including how to choose fonts and other elements of your site, as well as how to work with your clients.  

In addition, we always make a ton of useful information available to our audience, free of charge. Check out our design and SEO guides, which cover a wide range of topics web developers, marketers, and content creators will find useful.  

And be sure to sign up for our monthly newsletter to learn about the latest developments in the world of Squarespace. Peace!