Squarespace Font Guide: How to Change Fonts, Colors, and Sizes
Squarespace offers a lot of powerful options for customizing the look and feel of your site. You’re not limited to just the layout and design of the template you’re using; you can customize everything, down to the color, size, and font of the text on your pages and your design itself.
With the introduction of Squarespace 7.1, much of this functionality has been moved. It’s no longer all set at the page level, it’s in a central design section for your theme. A lot is going on there, so let’s take a look at what’s inside.
Accessing the new design tab is easy. From your Squarespace home dashboard, simply click on the Design option. There, you will see pages for a variety of configurations you can change, including font, color, spacing, specific page elements like buttons and browser icons, and even custom CSS.
Adjusting Squarespace Fonts
In the fonts menu, you’ll be given a few options.
First of all, you can choose a font pack. A Font pack is a pre-selected set of several fonts that style different elements of your site. It might have one font for titles, one font for navigation, one font for general content, and so on. These are separate fonts picked by a Squarespace designer because they work well together, from a design and usability standpoint. If you want to just pick a font set and run with it, that’s all you need to do.
If you want to be able to directly tweak your fonts instead, you’re looking for the Global Font Styles section. This lets you drill down to specific elements (like your headings, your paragraph text, or your buttons) and choose their fonts manually.
When you edit this information, you’re given a preview page to the side to see how it looks in real-time. Keep in mind, though, that these changes are per site, not per page. Changing how your headings look changes all of the headings on your site.
There are a lot of changes you can make, too. You have essentially complete control over your design. You can change font weight, style, line height, spacing, and add transforms, among other options. And, of course, you can choose your font family.
Squarespace supports web fonts from Google and Adobe. Google Fonts has over 1,000 different fonts on offer, of which Squarespace supports around 600. Adobe Fonts has 2,300 different fonts in their library, of which Squarespace offers 1,000 of them. Why the limitation? I’m not sure. It may be that they offer full access and Squarespace simply hasn’t updated the numbers they mention as supported since there were lower numbers of fonts in the libraries.
It’s worth mentioning that, because Google and Adobe are third-party companies, sometimes they change their service without warning. They can remove fonts, regardless of how many people are using them. When this happens, the font will still work for your site, but if you choose to change away from the font, you won’t be able to change back if you decide you don’t like the new one. Thankfully, there are thousands of fonts available, and a lot of them look similar enough to one another that you can probably find an adequate replacement. That’s if you’re in this specific situation which is unlikely to happen.
If you know a specific font you want to use, you can search for it by name. If you don’t know the name of a font, you can browse through available fonts to find one you like.
Squarespace doesn’t offer unfettered access to all fonts right away. They highlight a handful of fonts to give you options first. These options include a handful of popular fonts, as well as any fonts you’ve chosen to use recently or added to your site in other places.
Click here to learn how to add custom fonts to your Squarespace 7.1 site
Font styling allows you to make several changes to the font in different places on your site. Changes include:
Font Weight: making the text thicker or thinner, similar to bold but as a baseline.
Line Height: The spacing between lines, vertically.
Letter Spacing: The amount of space between letters, and how crowded they feel.
Style: Actual font styling using bold, italics, underline, and other common formats.
Transform: Telling the font to auto-capitalize some or all of the text.
Size: Changing the font size.
You can apply these stylistic changes to categories of text on your site. For example, changing your H1 tags changes all of those tags across your site. Changing your paragraph copy changes your basic default text across your site. You’ll want to make sure to test various pages, buttons, and navigation options when you implement changes to make sure they display properly on mobile and desktop versions of your site.
This can be a concern because some fonts behave strangely when they’re in a drop-down menu, on a button, or when certain transforms are applied to them. As with any time you make changes to your site, double-check that they look good on both desktop and mobile devices, ideally using a couple of different browsers or devices to make sure.
Adjusting Site Colors
As of Squarespace 7.1, you no longer have to deal with colors on an individual basis, picking specific elements and coloring them and hoping everything looks good and is consistent across different kinds of pages. Instead, you pick color themes, which are color palettes that work together and color different elements of your site across the board. While it might seem less flexible, it’s just as customizable as before, just differently.
To change your color themes, go to the design tab, click on Color, choose a color palette, and click Edit.
The color engine is quite good for Squarespace. Talented designers and programmers have spent a lot of time engineering it as a solution, and the features and functionality are clever and intuitive.
A default palette is three colors, usually complimentary. You can add up to five colors to use. The trick is, there are several different ways to pick colors.
Designer Palettes. These are pre-configured sets of colors that a designer assembles for that theme. These are usually colors that work well together and are designed to be easy to implement.
From Image. This lets you upload an image and will extract 3-5 primary colors from it. For those of you who make mood boards for your brand, or use images for inspiration, this can be a good way to extract those colors.
From Color. Pick one color you like as the central color for your brand, and the color engine will generate other colors that compliment it. You can choose from several options, including analogs, monochrome variations, and complementary colors.
Custom. You are, of course, completely free to add in whatever hex codes for each color. I recommend paying attention to things like color contrast for accessibility in your choices, but it’s up to you what you want to pick.
There’s a lot of color theory you can use to pick your colors, but I’ve found that most business owners and site admins don’t want to dig into those basics of graphic design to learn it. For the most part, picking a central color and letting the algorithm pick complementary colors (and then adjusting them to suit your tastes) works just fine.
Once you’ve chosen your color palette, you can then move on to customizing color themes. Color themes take your basic palette and adjust it in some way, such as making it lighter, reducing or adding contrast, or changing the shade of the colors.
Squarespace generates color themes based on your central palette. You might have, say, a dark bold version of your palette that uses the same colors, but darker/lighter shades of them to make text stand out. You might have a dark version of the color theme that inverts what the background/text colors usually are. There are quite a few of these auto-generated, to pick through for different page types.
You can, of course, customize each color theme directly. If you like the basic color theme but want to change an individual element, like the color of your hyperlink text or the precise shade of your background, you can do that.
Go to the design panel for the page you’re looking to customize, then click on colors and color themes. This pops up the color theme you’ve chosen for that page type and allows you to choose or adjust your colors.
Adjustments in 7.0
Everything I’ve written above is for Squarespace 7.1. I figured that, since it’s the newest version and a lot of people are still shifting over and learning how it works, it’s where most of the common questions come up.
For 7.0 sites, everything is more complicated, but also, most people already know how to do it. Since 7.0 has been the default for years, it’s more institutionalized as knowledge in how to customize a site. Still, it might be worth covering in brief.
Changing fonts in 7.0 depends on the theme you’re using, which fonts it supports, and the process you use to choose them. Pick a page template you want to edit, click on Design, choose Styles, and all of your font options are right there.
Choosing a specific font works in much the same way, but is on a per-element basis on each page type. If you want to change how your body paragraph text appears across different pages on your site, you’ll need to change the font on each page type. You can still use the same sort of font-family drop-down menu to look up fonts by name or even run a search for them (if you know what font you want to use).
You can also choose to use the custom fonts option to add an Adobe font that Squarespace doesn’t support by default. If you choose to do this, be aware that some of the configurations in Squarespace, like transforms, might not work right on it and you may need to use custom CSS to do what you want. That said, with the sheer range of font options available to you, I don’t often find people wanting to use CSS just to add a different font outside of extreme, limited, and custom circumstances. If you want to explore CSS values, Mozilla wrote a great guide on the subject.
To add a custom font, it has to be an Adobe font (Google fonts don’t work) and you have to use the custom fonts section to do it. Instructions can be found on this page. Essentially, you need to have a subscription to the Adobe Creative Cloud and link that account with Squarespace. You can then choose a custom selection of Adobe fonts, which will replace the fonts accessible to you in your existing site styles. Be careful if you use these for other purposes on your site; you don’t want to overwrite the fonts you use.
Tweaks to the text can also be added from this menu.
Font Size: changing the size of the font element on the page.
Light Height: changing the space between lines, vertically. Beware of using 0em, it can cause text to overlap.
Letter Spacing: the spacing between letters. This is similar to Kerning, but not quite the same concept.
Text Transform: choosing whether your text can be capitalized as you type it, or if it’s by default all caps, no caps, or traditional capitalization.
Text Decoration: adding elements to text, such as overlines, underlines, or strikethroughs.
Text Alignment: left, right, or center alignment for your text.
This isn’t quite the same selection of options, but it’s close.
Changing colors for your site works pretty much the same way on 7.0 as it does on 7.1. The main difference is that you choose colors on a per-page basis rather than a per-site basis. Thus, if you want to change colors across your whole site, you need to make the color adjustment on each page. You can read about the individual color adjustments you can make, and how to make them, here.
Overall, Squarespace 7.1 has done a lot to streamline and remove the finicky little repetition that was inherent in the font and color customization systems. It’s all part of streamlining their themes, going from individual theme families to one centralized theme with variations and modular adjustments. It’s an adjustment, to be sure, but this simplification is welcome.
If you have any specific questions about how to change a given element on your page, feel free to drop me a line!
