A Basic Guide to Choosing Fonts for a Cohesive Visual Identity
Professional designers will usually agree on this point. You can separate great design from average design by the use of typography. There is a lot to learn about typography, as in any field, but there are also a few basic rules that will help you avoid making mistakes related to font use.
In this post, I’m deliberately keeping things simple so that you can create a standout brand identity without getting lost in too much detail. Let’s consider the five areas you’ll need to focus on, as you identify and select fonts for use on your website and other marketing materials.
Logo
Your logo may, or may not have text in it. Ideally, this font will only be used in your logo, and nowhere else. Big brands invest heavily in custom fonts for their logos, to make sure they are unique, but it is totally possible to create a beautiful logo that is distinctive and true to your personality. Use for your logo by using fonts fonts creatively, by pairing them with graphics, using interesting color combinations, or even combining font families. Every detail becomes important, whether you adjust the letter spacing, or add an effect (as in “Brown Sugar” below). Fonts that are used in this way are usually referred to as “Display fonts.” Display fonts can sometimes be used for headlines, but if they aren’t too difficult to read, but are rarely suitable for body copy. Here are three examples of fonts available inside Canva Pro that would be perfect for use in a logo:
Font: Afrah.
Font: Giaza.
Font: Brown Sugar.
Tagline
Most creative professionals don’t need to use taglines, but for businesses or brands (think creative studios) taglines (otherwise known as slogans) represent opportunities to quickly communicate value, offers or a point of differentiation. Here are some examples of taglines: “Bringing ideas to life,” “Custom designs delivered on time and on budget” and “Earth-friendly illustration agency.”
Fonts used for a tagline should, ideally, also be different from the fonts you use throughout your website or other materials, but they don’t have to be. When selecting a font for a tagline the most important thing is to make sure the font is readable when it’s reduced in size, and that it does not compete for attention in relation to your logo (there is a hierarchy of sizes, and your logo always takes preference). Here are some clean, sans serif font examples that fit the bill for a tagline.
Font: Open Sans Condensed.
Font: Martel Sans Regular.
Font: Kite One
Headlines and Body Copy
Headline fonts need to be selected carefully. Consider how they’ll pair with the font you’re selecting for body copy (otherwise known as paragraph -p- copy). You can use the same font family, but you can also explore pairing a serif font with a non-serif font. And, you can also make small changes to your headline copy (H1 and H2) by making one italics, or using all caps, for example, but play around with these combinations to make sure they work well together visually.
When it comes to selecting headline fonts and body copy fonts, how do you know which fonts pair well together? There are lots of guides available out there, like this one from Canva; this one on Google font pairings; and this one on clean and minimalist font pairings.
Squarespace has made this decision process ultra-simple by offering beautiful font pairings as an option inside the website builder. Here is what that looks like inside the platform. In this visual, you’re only seeing 3 font ‘packs’ but there are many more to explore. Once you click on the pack you like, that font pack is automatically installed across your site. How easy is that?
Before you think, ‘well, my site will look like everyone else’s,” pause for a second. Using these font packs is entirely optional. You can always select the fonts individually, and adjust to the smallest detail, in headings, paragraphs, buttons and image blocks. You can upload other fonts to the platform, if necessary, but there are hundreds available, so why go to the trouble?
There is also method to this madness! The pro website builders have carefully considered beautiful design, advanced typography guidelines in relation to your website’s technical performance. For example, did you know that when you use more than 2 or 3 fonts on your site, this can negatively impact its performance? So, why not take advantage of this expertise? You can still adjust font colors, styles, as well as background colors, etc., so there are other ways to customize your site and set yourself apart from the competition (I’m looking at you, portfolio of amazing work, and great copy!).
Accent Font
Notice I listed this as a single font, not multiple fonts! Pick one, and stick with it, or bypass this option altogether. If you specialize in calligraphy or hand lettering, ignore my last sentence! By all means, find ways to integrate your own work into your site’s overall design.
For the rest of us, script fonts offer wonderful options when it comes to accent fonts. The key here is to use them sparingly, because they can quickly overwhelm the overall design, or become distracting. Script font types look like cursive handwriting or calligraphy. Here are some casual font options that fit this category that tend to work better than more formal script options, but it depends on your overall design. These are all available via Canva.
Font: Pushkin High
Font: Halimum
Font: Signature
When I use accent fonts in website design, I sometimes will create the graphics inside Canva, and import them into Squarespace as images. This way, I have more freedom to style the graphic in ways that are not possible inside the website builder.
A great resource for beautiful custom fonts that fit this category is Creative Market. I’ve highlighted three examples below.
Font: Beaujolais, by ArtStudio
Font: Gustera, by Vultype
Font: Canary, by Artstudio
Fonts to Avoid
Some fonts just have a bad rap among professional designers. Here they are, in case you’re wondering: Comic Sans, Arial, Verdana, Times New Roman, Trebuchet and Papyrus. You can thank me later (I’m teasing, but only half-teasing!).
A Final Tip
This exercise is never as simple as it looks! But it can also be a lot of fun to consider how fonts impact your overall design and help communicate your messaging. One way to begin to identify the overall look and feel — before you begin selecting fonts — is to compile favorite designs in a Pinterest board, or bookmark them as you find them. Pull from a variety of sources and make a note of the qualities you like. Are they elegant, contemporary, more traditional, edgy, or informal and fun?
You can also conduct online searches for fonts using keywords that represent your aesthetic ‘vibe" and see what comes up, or search for alternatives to specific fonts and see what the options are. Above all, give yourself complete creative freedom. In the end, you’ll achieve a look that resonates with your own identity and that beautifully complements your work.
Do you have specific questions about selecting fonts, or how to implement them? Comment below!
This post contains affiliate links. If you make a purchase using my links I may earn a small commission, at no additional cost to you.
