Select a pleasing aesthetic for your site’s fonts and colors.
Like a room's paint and wallpaper, fonts and colors set the tone for your site and help make a great first impression.
If you’re not sure where to begin, use the ideas in this guide to help you build your site’s design. We recommend experimenting with different combinations before publishing.
This guide is a good next step after you've created a new site and added some content. To learn the basics of changing fonts and colors, visit our other guides:
Match fonts to your brand
When styling your site, it helps to match your site’s design to the ideas and objectives of your content.
Different types of fonts can evoke different moods. In typography, a serif is a small line or stroke attached to the end of a larger stroke in a letter or symbol within a font family. A sans-serif typeface has no extra strokes and cleaner lines.
Sans-serif typefaces have become more common for text displayed on the web, as fine details like serifs may disappear or appear too large on lower resolution displays. Still, a serif font may make more sense for your site. If you're writing a blog about medieval manuscripts, a serif font is probably truer to its character. If you sell modern furniture or teach a coding class, a sans serif font can create a tight, contemporary mood.
When choosing a font, ask yourself some questions about your audience and your content to help narrow down your choices. Consider:
- What's your site about? What's its main purpose?
- Who will be visiting your site? What's their age group?
- What's the mood of your brand? Fun or serious? Modern or classic?
After you’ve got a feel for the tone and texture of your site, browse your site's library of over 600 Google fonts and 1,000 Adobe Fonts to find a font that matches your unique style. The Fonts panel defaults to show the most popular and most recently used font packs to help narrow down your options. If you know the name of the Adobe or Google font you prefer, you can search for it.
Mix and match
Like wine and cheese, some fonts are perfect for pairings. If you’re using a simple sans serif font, try pairing it with an ornate, serif font. Thin, intricate fonts pair well with bold fonts.
In the Fonts panel, start by browsing the preset combinations in the Mixed tab. Try finding a serif and sans serif that match the rhythm and mood of your site.
When it comes to typography, less is more. It's best not to have more than two fonts throughout your site. Two complementary choices make your site readable, while tastefully highlighting the key points.
For even more contrast, experiment with different text sizes. Are you highlighting a new product in your store? Try using a heading. Writing a long blog post? Use a font size that's smaller, but still accessible. Assign different sizes to different text groups to keep the message consistent across your site.
Create character through color
What is your site’s one big idea? If you’re selling beachwear or showcasing your portrait photography, matching your site’s content to a color scheme can create its character. Beachwear could work with soft blue and yellow tones, while classic black and white lets photography shine through.
Whatever your vision, there’s a color palette that can show what you’re about. To start, take a look around you. If you own a restaurant, let its color scheme be your guide. Blogging about nature? Earth tones may conjure the proper mood. Hosting a fitness class? Bright and exciting colors might be more motivating. If you have a brand logo, consider incorporating its color into accents like buttons and navigation.
Another great place to start is with your imagery. Look at the images you use with your brand and see if there are certain colors or tones that appear again and again. Use the Colors panel to find a palette that matches your imagery, or upload an image and let your site generate a color palette for you.
Like with typography, too many colors can muddle the message. When you stick to the themes automatically generated by your color palette, your site is balanced and easier to navigate. If you're customizing your theme colors, save the colors outside of your palette for smaller accents, like buttons and social icons.
Ensure your colors don’t clash. Yellow type on a white background can make your text illegible, while a black font on a red background is headache-inducing to some. Keeping a high contrast between colors also helps keep your site accessible.
Above all else, have fun. Your site is an extension of your thoughts and identity in the online world. Squarespace helps you get your ideas online, but you can make them your own in terms of character, color, tone, and design. A site that feels like it would be at home in your closet or sitting in your workspace is one that you’ll delight in revisiting and improving as your ideas continue to grow and evolve.
For more help designing your site, explore our other resources: