Picking Colors & Fonts for Your Squarespace Website
Let's just go ahead and address the elephant in the room right now. If you're DIYing your website, restyling a template, or starting from scratch, picking your website fonts and colors can be STRESSFUL. Especially if you don't have a brand identity system and brand guidelines to work with. Hey—we all have to start somewhere! Here are some tips and resources to help making the picking process waaaay less stressful, and maybe even, dare I say, fun?!
Picking a Color Palette for your Squarespace Website
A walkthrough exploring online tools to help you create your own color palette for your Squarespace website.
Best Color Practices
Work smarter, not harder.
Well, duh. But, what does that mean? Squarespace will automatically generate 10 color themes based on the five global colors you choose. You do have the option to edit elements within each individual theme BUT that can be super time consuming. I always recommend picking colors that have enough contrast so they'll be sure to work with Squarespace's native color theme generator.
Choose colors with enough contrast.
Along the same lines as the point above, for accessibility and legibility purposes, make sure your colors work well together and provide enough contrast. Even if you brand color palette is monochromatic, you can still throw in a contrasting color or two to make styling your website much easier (and friendlier for your users).
Here is a link to an accessibility checker to make sure your colors pass the contrast test!
Choose a color palette that speaks to your audience.
If you haven't gone through a brand strategy or brand identity design process and you are DIYing this in the truest sense, take some time to consciously choose colors for your brand or business. It can be tempting to use what's trending or what you personally are drawn to, but it will serve your business well if you take a minute to really think about who your ideal audience is and what they will best identify with.
Online Color Resources
Picking Fonts for your Squarespace Website
A walkthrough exploring online tools to help you pick your own fonts for your Squarespace website.
Choosing Typography for your Squarespace Website
The second order of business to DIY your Squarespace website is to choose a typography system that is aligned with your brand personality, conveys the right emotion, and IS legible. Sorry to throw that boring legibility ingredient in there, but if folks can’t read your website copy, chances are they’re not going to hang around too long. Sure, I love a good funky typeface but use those intentionally and sparingly.
Squarespace gives you the option to load four fonts under your Site Styles panel:
Headings
Paragraph (or body copy)
Buttons
Miscellaneous
But, don’t feel like you need to pick four different fonts. Less is more in this department. I’ll break this down in a bit. Before we get into the actual task of choosing assigning your global fonts, let’s have a real quick typography 101 chat.
To overly simplify, there are five classifications of typefaces:
One — Serifs
Serif typefaces are classified by having decorative shapes that protrude off the ends of the letterforms. Spoiler alert—they’re called serifs—which is where the type style name comes from.
Personality: refined, classic, high-end, professional
A few favorites: Ivy Presto / Meno Banner / Queens / Schnyder
Sans Serifs
In contrast to serifs, sans serifs have clean, non-decorative ends. Sans serifs are less decorative and more laid back and friendly.
Personality: minimal, modern, friendly
A few favorites: Futura / Red Hat Text / Poppins / Europa / Pragmatica
Monospaced
Monospaced typefaces are typically used “behind the scenes” in applications like code. They’ve made a big splash in design recently being used as both headlines and body copy. Monospaced fonts are characterized as each letter taking up the same width and can be either a serif or a sans serif style.
Personality: techy, no-fuss, no fluff, minimal
A few favorites: Roboto Mono / Lunchtype
Script
Script typefaces can include anything from brush lettering, handwriting, and calligraphy. Scripts are often used when you’re trying to convey beauty or elegance—like a wedding invitation or perfume label. On the other hand, handwritten fonts can convey friendliness or hold an organic quality.
Personality: upscale, elegant, high-end
Display
Display fonts are pretty much everything else that doesn’t fall into the other four categories. Display fonts are typically used in large-point size situations like headings or a wordmark logo. A word of caution—display fonts can be really fun, but always make sure they pass the legibility test before adding a fun and funky display font to your typography suite.
Personality: Unique, dripping with personality, show stoppers
How to choose your fonts...
When choosing a typography palette, I have a loose formula I like to start with:
Personality driven headings + workhorse subheadings + practical, legible body copy + accent font for when you really need a dash of pizzazz.
Back to what I mentioned before, just because there are four places to add a different font doesn’t mean you HAVE to pick four different fonts for your Squarespace website.
Your headings are where you can lean into your brand personality more. You can really pick from any of the five typeface categories for your headings. However, I do caution folks to steer clear of too much script or handwritten text as it can become cumbersome to read. If you’re a high-end, luxury brand, and all-caps modern serif like X might be perfect. If you’re a down-to-earth, free spirited brand something handwritten or a littler funkier might be the ticket.
Best Practices
When picking your body copy, don’t get too creative, pick something that’s clean, legible, and lastly fits your brand personality. And a good general rule of thumb to follow is only pick 2-3 fonts and stick with them! Make use of the whole family with light and bold weights, normal and italic styles, UPPERCASE and sentence case, track tight or t r a c k l o o s e (spacing between the letters) etc.
