Tips for beautiful squarespace typography | bonus font guide included

Choosing and combining fonts is an art, not a science.

Whether that's for a digital platform (like your website) or in print, typography can make or break your branding.

Typography is a hugely important design element, one which can have an instant impact on how people interact with your brand.

There are many different considerations when choosing the fonts to use, and those apply whether you're talking about your Squarespace website or design and marketing collateral.

I presume you haven't been to design school and are here for the Coles Notes (ain't no shame) so I've rounded up my favourite tips for beautiful Squarespace typography. Since there's so much to learn about this subject, let's dive right in!

Print vs Digital Typography

When you ask people for their first association with the word 'typography', their mind usually comes up with the idea of print design or the fonts on something physical. This is especially true for anyone born before the Millennial generation. If you grew up with catalogues and lots of printed material, you'll know what I'm talking about.

Typography has long been understood as an important element of print design, something that was used to highlight marketing materials and collateral that you could see 'in real life'.

As we've moved to a more digital space, it has become equally important to consider typography online (e.g., website design) and in digital products. Whereas print used to be the prioritized design platform, the digital versions have now taken over as equally (if not more) important. This is true for typography as it is with other design elements.

If we look at this shift in design emphasis, it's worth noting that changes to branding can be made almost immediately in the digital sphere as opposed to print where elements were created months in advance. The nearly instant nature of digital design (whether we're talking about website design, social media headers, blog graphics, email marketing images, etc.) means that we have more freedom than ever to play around with typography "in real time" without delay or the pressure of having everything perfect the first time.

Design schools will usually teach students that the same principles that have been developed and applied to print also extend to digital design, and this remains true for typography. Nowadays we have access to more fonts than ever, thanks to resources like Google Fonts. Typography has been heralded as one of the easiest and most effective ways to establish a powerful brand which is why it's so exciting that having beautiful typography on your Squarespace website has never been simpler!

Understanding the basics of typography

Typography is defined as the style and appearance of printed matter. Many people think that typography is the same thing as fonts, but that's not exactly true.

Instead, the best way to differentiate the two is that font is what you use and a typeface is what you see.

Fonts and typography are all around you and whether you realize it or not, they play a large role in establishing the look and feel of a brand, product or item. Developing the typography on your website helps you to to both stand out from the crows and enhance your brand. I believe they call that a win-win!

Choosing and combining fonts

As we said at the beginning of this article, choosing and combining fonts is an art, not a science. there are nearly endless options of fonts available in Squarespace which is a massive draw. This means you likely won't have to purchase additional fonts to use on your website.

Reminder: If you want to see some of my favourite fonts you can use in Squarespace, I've compiled a free Font Pairing Guide, which you can grab by clicking the button at the top and bottom of this article.

The first thing to consider when choosing fonts is how they will match and support the content of your website. The fonts you select should be incorporated in the website's design to balance out the ideas and objectives of your content.

Things to consider:

Who is the target audience of your website?
Why is your audience visiting your website? What are they looking for?
What do you hope to present to your audience?
What is your website about? How would you describe the goals of your website? What do you want to convey?

Knowing the tone and what you want to present online will help you to effectively determine which fonts you'll use.

Believe it or not, font have their own personality and depending on which one you use, the entire look and feel of your website could change. Think about it: a flowery & intricate font is completely different from a boxy & heavy one. Choosing the right font(s) means staying 'on-brand' and not mixing moods. You want to pick fonts that are appropriate for your brand identity and that will be subconsciously appealing to your audience.

The most important thing to consider when choosing fonts for your website, however, is readability and user experience. If visitors to your website can't read the content you've worked so hard to create, you'd better believe they are going to leave your page without hesitation. Choose 1 or 2 fonts and use them throughout the site for maximum affect.

Legibility is key when choosing fonts so avoid anything too flowery or scripted, using colour without enough contrast (think: white background with soft grey text). Make it easy on the eyes and your readers will thank you.

Not sure how to choose fonts? Here are a few pointers to help you out:

A simple sans serif font (e.g., Franklin Gothic) works nicely with an ornate serif font (e.g., Adobe Garamond)
For a striking look, try pairing a thin font with a bold font
Certain fonts evoke time periods so keep that in mind if you are appealing to a more modern or classic audience
A neat look is to use the same font or fonts from the same family, but in different weights

Don't forget to grab a copy of my free Font Pairing Guide!

Colour and typography

Another way to effectively use typography on your Squarespace website is by incorporating colour to your text.

Many people favour a monochromatic black & white combination but rest assured that if that's not you're style, you can play around with colour - so long as it fits your branding. An easy way to do this is by pulling shades from the colour scheme of the photography that dominates your website. Try playing around with shades and hues of these colours until you find something that fits and remains easy to read. An example of this is if you have a lot of ocean photos on your website, you could pull a shade of blue and use that as your H1 option.

A word of the wise with colour and typography: remember that less is more! Colour should be used as an accent, not the base. Your website should always be easy to use so don't overload your website with bright colours at every turn. Also, it is recommended to stick to 1-2 coloured text instances. This is not an area you want to go overboard with.

Editing Fonts in Squarespace

Editing fonts in Squarespace takes hardly any time at all and couldn't be easier. Watch the video tutorial in this post to see it in action!

To begin, log into your Squarespace account. In the Home Menu, click Design and then click Style Editor. Since font edits aren't grouped by category in the Style Editor, you will edit fonts in different sections. Depending on which Squarespace template you're working off of, it will be set up a little differently but here's a common look:

The small arrow indicates that font sections can be edited. Click here for an excellent article on Squarespace's site for more information on editing fonts through the Style Editor.

Final Thoughts

Typography plays a big part in effective branding and Squarespace makes it very simple to update and leverage typography and font pairings. When choosing fonts, keep your ideal audience in mind and consider how each font speaks to that group. Solid typography will support a company's branding and is especially important to consider in digital spaces such as a company website.

I've compiled a list of my favourite serif and sans serif fonts if you're interested in seeing what I use in my own business. These are all available in Google Fonts which means you'll be able to try them out with Squarespace - no extra code or purchases required! To get your copy of my Font Guide, click the button below and you'll get it delivered directly to your inbox.

Have you switched up your font choices? How have you considered typography in your brand? Were you able to find the fonts you wanted in Squarespace? Leave me a note in the comments, I'd love to hear from you!