Squarespace Fonts

When I first started working with Squarespace, the sophisticated use of typography and the creative font pairings within the templates really wowed me. I can still remember the frustration of the old days of the web, when designers were restricted to using ‘web safe fonts’ only, or worse, using javascript libraries such as cufon to render more creative fonts, loading a ton of unnecessary code into a page and slowing it down miserably.

Having such an extensive font library available at the click of a few buttons is a dream come true and something I believe anyone working within Squarespace should take advantage of and enjoy.

At Fix8, both Josh and I have our standard ‘go to’ fonts, but we love to fully explore the font library and come up with creative font pairings which will really make each design we produce unique.

When working in the Squarespace style editor, it’s important to know that many more fonts are available to you than you might at first realize. I certainly wasn’t aware of this when I worked on my first site until Josh pointed me in the direction of the Squarespace curated font list: http://blog.squarespace.com/blog/curated-typography (Thanks Josh!).

See video below for details:

Below, I've put together some of my favorite font pairings.  These are solely from the google library, but again, it’s important to note there are lots more options in the style editor than you can immediately see.

Having worked extensively with typography for web, here are some of my general ‘rules of thumb’. Though it’s true that rules are there to be broken, these are some general principles I try to adhere to with typography.

1. Less is more. Try not to use more than 3 fonts per site.
This is a general principle I try to keep to. In some cases even 2 font styles will suffice but any more than 3 and I find the site feels less cohesive. It’s tempting to use so many of those lovely fonts but restricting yourself will keep your site feeling much tighter and cleaner.

2. Mix it up! This is something I have to remind myself constantly, try out pairing different font styles and don’t feel you need to keep to one style of typography. Try combining a Serif for headings with a Sans Serif for the body. Or mix things up even more and introduce a Monospace font in there too or try adding a script font.
The freedom is yours - enjoy it!

3. Don’t forget letter spacing! It’s a magic little css trick and often overlooked. Most themes allow you to tweak the letter spacing, try this subtly and it will look great.

4. Go easy on the scripts. Handwritten, scripts and decorative fonts are so much fun but need to be used with care. Again, there is no set rule here but I find the script work amazingly well when used to enhance and support the other fonts, sparingly and in small doses.

5. Think big! Big fonts, over images especially. This looks great when contrasted with smaller sized fonts for the copy.

Some of our favorite heading fonts to play with:

Merriweather sans (300 weight)
Oxygen Mono
Playfair Display

5. Be more creative with your body fonts. Although the verdanas and helveticas of this world are classics, you can have a lot more fun with your body type so long as your content remains clean, clear and readable.

Some of our favorite non-standard body fonts:

Liberation serif
Titilium web
Droid sans/serif

6. Have fun! Be playful, experiment and try out different pairings. Look around at other sites for inspiration and make the most of this great Squarespace tool.