Change Your Squarespace Template Fonts

   Image via Unsplash.com

 Image via Unsplash.com

Why the shape of your letters shapes your message

When I started in web design I started as a a project manager—focused on getting stuff done—and I didn't focus much mental energy on the design details. Naively, I thought design included colors and images, and that words were words (a separate category). Over time I came to see the ways in which the shape, style, and quality of the letters on the screen had a magnificent impact on how I felt about the design. Sometimes, the letters were the primary design element. 

I now know that letters—your typography—add flavor to your message. They subtly (and sometimes not so subtly) influence how audiences perceive the words you form. They tell your audience about your brand's personality: how open you are, how formal you are, how masculine/feminine you are, how fun you are, etc. It's important to choose fonts for your brand that match your storyline. 

Check out the way these font pairings (header, subheader, and body copy) from Canva have a huge influence on how you feel about the message: 

SELECT YOUR BRAND FONTS

If you still need to select brand fonts, I recommend the following resources:

Once you have your brand fonts selected (or if you've had them for awhile), it's time to edit your Squarespace site to match your brand. Squarespace has a large list of built-in fonts available to you. If your fonts are not built-in to Squarespace you can search for a Google font OR connect a Typekit account to Squarespace and the sky's the limit!

CHANGE YOUR FONTS IN SQUARESPACE

download (7).png

In Squarespace you should first start by changing the body copy and header font. Squarespace has three levels of headers. To change your basic fonts in Squarespace, do the following:

  1. Go to a page in your site that has body copy and all three types of headers. (If you don't have a page like this yet, create a sample or test page.)
  2. Once that page is open, go to your Squarespace menu and select Design > Style Editor. 
  3. Change your fonts one by one. Not only should you change the font, but also pay attention to the additional font customizations (font size, font weight, letter spacing, line heigh, text transform, etc.). These small adjustments make a big difference. Play around with them on a heavy text page or your test page to see what looks best for your brand.

Once you have you body copy and headers changed, you should flow font changes to small design items throughout the site, including:

  • Navigation
  • Footer
  • Buttons
  • Banner
  • Metadata
  • Captions

Consult the Squarespace help guide specific to your template for a full list of text elements available for editing.

Remember, if you don't have an element on your site yet, such as a small button, the Squarespace Style Editor won't offer you the option to customize it. If you add a small button down the line, it'll appear in the default font and colors for your template. You'll need to go back into the Style Editor to change its design.  

download (8).png

Once you've selected and implemented your brand fonts on Squarespace you should not make big changes often. Your audience comes to know you, in part, via your typography and you don't want to give them whiplash by changing it up too often. But if you notice small tweaks that will improve legibility or user experience (such as line height or font weight), by all means make them!

OTHER FONT RESOURCES AND GUIDES I RECOMMEND: