Fonts have feelings: how to find the ones that create the emotions you want
How do you decide what font to use on your website, in a publication or on social media? Fonts form families which complement each other.
They create a visual impression before anyone has read what you have to say. And they have stories to tell. We asked Berenice Smith, of Hello Lovely Graphic Design to answer questions on which fonts create the right message in designs.
This is a transcript of a live conversation.
Choosing readable fonts
The choice of fonts has a HUGE impact on the way messages are received and interpreted. There are many things to consider when selecting a font and I’m sure Berenice will go through that later. One of my (and many others) pet hates has to be ‘comic sans’ and recently I discovered a client using it, when I asked why, they explained that a large part of their audience is dyslexic and this font is actually very readable for those people. I didn’t realise that there are specific fonts, designed and evolved around reading disorders.
We have since moved them on to ‘lexi’ a free font, supported by many dyslexia charities that has been specially designed for those with dyslexia. We have also added a foot note on all material to explain this font choice. It just shows that this operates on many levels, and I figured it was worth adding into today’s chat.
Comic Sans (along with Papyrus) has a huge image problem thanks to inappropriate use. Unfortunately, the British Dyslexia Association list it as a recommended font and I know of several typographers who have been trying to get a conversation going there. The other font is Read Regular designed by Natascha Frensch.
I am not dyslexic but I do have mild dyspraxia (very on trend thanks to Doctor Who so I’m told by my godson!) so hidden disabilities and working with charities on design solutions featured heavily in my graphic design and typography masters. It’s such an important area that has lots of opportunities for collaboration.
How to create a friendly, approachable image with fonts
Q. Are there any particular fonts you’d recommend if you wanted to be perceived as knowledgeable but not bossy and also friendly and approachable? I’m thinking mainly in the context of website and social media stuff.
Berenice Smith Think about pairing fonts and legibility too as the easier an image is to read, the more friendly it is. The easiest way to find perfect font pairings is by using different fonts within the same overarching typeface family so you’ll have a ready-made range of weights, styles and classifications that are specifically designed to work together. For example:
I also suggest that you think about the values and phrases that describe the outcome of what you want to do. Is the aim to be friendly, intelligent or confident? You might want to put together a mood board to get start to get a sense of the direction your font needs to go in. A friendly font might be one that’s rounded and really legible. A confident one might be angular.
Q.Should one font be sufficient for a business? I sometimes see businesses using two and I like the contrast. How easy is it for a non-designer to know what fonts pair well?
Berenice Smith The advice for Heather might be useful up there. It does help to have two fonts, so that you can vary the reading experience but it’s not essential. Without getting geeky, contrast fonts, as the name suggests, is about finding totally different – but still complementary – typefaces that are each fit for their intended application. This mostly means pairing a serif with a sans serif. Fonts will generally conflict if they are too similar: two ever-so-slightly different serifs or sans serifs rarely create nice font pairings, like Arial with Helvetica.
Q. I understand. I think. Complementary might be fonts with the same height and contrast, as you said, might be pairing a serif with a sans serif?
Berenice Smith Yes, play around with the combinations, often typographer will create a family so search by creator. I’ll pop some free font resources below in a moment.
Which fonts do you suggest for a non-designer?
Q. Can you give us some fairly safe fonts that non-designers in a rush could use on (say) social media images? Like the Helvetica in your image above but better? Just to help us avoid Comic Sans-style embarrassment.
Helvetica is absolutely fine btw, but using different weights (by that I mean light, regular, bold) helps. Other fonts that are great are Source Sans, PT Sans, Poly, Raleway (all sans serif) and serifs Playfair, Lora, Butler.
All the above should be found on 101 fonts or any free font resources I’ve listed (I’ve avoided mentioning Typekit which is paid for).
For serifs, for social media keep them large and a heavier weight. Avoid in large paragraphs as it can be hard to view except on a plain background but test it out and always feel free to ask my advice.
An intro to fonts and type
Berenice Smith What’s a font and what’s a typeface (since you may hear designers refer to both). A typeface is the design of the symbols – known as glyphs – which includes everything from a full stop, trade mark symbol etc to numbers and letters. So when you refer to Arial or indeed Comic Sans, you’re referencing a set of glyphs in a specific typeface.
A font is, in our modern era, a digital file that contains the unicode required to tell the software what to do. A typographer will create unicode for each glyph.
To be honest both phrases are swapped around as we’ve evolved a lot since type trays and metal type in foundries..which I won’t bore you with here!
There are several categories… and these are listed below but there are sub-categories too but these are the ones that non-designers will find useful.
Q. If we’re not designers does all this really matter?
What’s the worst that can happen if we get it wrong?
I know a few designers might snigger at our efforts but would anybody else notice?
Berenice Smith Hehe! Yes I do think most folk don’t worry that much and a little common sense is all that’s needed. If anyone needs a free font then check the trends on a free site like Font Squirrel and avoid unpopular ones and go for classic and clean fonts. Anything script or novelty, avoid!
And blow the designers who snigger! A great designer will be constructive and understand that we all have strengths and weaknesses. I’m more than happy to provide feedback and always give free and paid font suggestions in branding packs.
Web safe fonts
Berenice Smith Some useful tips for developers. Web safe fonts – this matters because devices have pre-installed font selection. The selection is based largely on its operating system. This causes an issue when designers look to Typekit or a premium resource and don’t add in a web safe option in case someone’s phone doesn’t have their lovely font and it defaults to something that doesn’t work, usually Times.
Web safe fonts includes Arial, Helvetica, Times, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans, Trebuchet, Impact, Lucida Sans Unicode. Not all of these are pretty but if I had to choose, then I’d suggest Helvetica. Look at https://www.w3schools.com/cssref/css_websafe_fonts.asp for more details on web safe fonts and CSS.
Copyright and fonts
Berenice Smith Always remember that fonts have owners. So just like music they have a licence so unless they are free, it’s illegal to share them or ask a designer to include them in the packaging of a design job.
Free font resources
- Font Squirrel
- Font 101
- http://www.typedepot.com/fonts/
- http://www.jeffreyschreiber.nl
- https://www.1001freefonts.com (but really do pick carefully, lots of people think they can design a font!)
- Oh and the lovely https://www.theleagueofmoveabletype.com
And inspiration for how to use fonts
https://fontsinuse.com
http://friendsoftype.com
http://incredibletypes.com
St Brides Foundation https://www.sbf.org.uk
and the Cambridge University Press have a small museum (drop me a line to arrange visit!)
How fonts create feelings
Q. Can you please give some examples of where fonts create emotions?
Berenice Smith In terms of marketing and branding, serifs are considerably better for large bodies of text as they tie words and sentences together for a smoother, more legible reading experience. More in print.
How a font or family was created is important too. Serifs came from carved inscriptions when it was expensive to have the extra flourishes giving them a gravitas, class and cultural weight.
Sans serifs are more recent only really becoming popular in the 19th century for commercial use in advertisements, and latterly on screens (which struggled to render the detail of serifs until relatively recently).
So whether a serif or a sans serif depends on whether you’re looking for cool, clean modernity, or timeless, classical authority.
Tips to avoid disappointment
Other tips: avoid mixing larger capital letters with lowercase, supposedly for emphasis, which results in mismatched weights.
If you’re printing something commercially, print it out before it goes to print to avoid being disappointed. Design often looks good on the screen, because of the light and the way we are constantly adjusting the scale of the image to suit ourselves. The same layout could flop on the printed page.
Finally beware of this. I see this so much, people spending hours on social media training and then not thinking about the visual. Be different!
One of my most popular blog entries is this one https://www.hellolovely.org.uk/blog/2018/4/30/top-tips-for-consistent-branding-on-social-media-and-a-free-workshop-with-drive-the-network
Ann Hawkins I really like this post. I think a lot of people think it’s easy to slap something together in Canva!
Berenice Smith Yes. I can’t work out if I should embrace Canva and deal with it or continue to hide under the metaphorical pillow. I’m increasingly being asked to fix Canva design issues or consult. I wonder if our other designers are too and their thoughts on this.
AKA Canva or any software does not make a designer no more than Grammarly makes editors
Berenice Smith Geek fact (if you see this pop up as fun Friday fact on my social media, don’t tell anyone..) Fonts are measured in points. So if you want to impress a designer when the text needs to be bigger, the phrase is ‘increase the point size’. There are approximately 72 (72.272) points in one inch or 2.54 cm!
Another tip with social media. Your font choice can be part of your narrative. My choice for my logo is by a foundry called P22 and I met the owner Richard Kegler, and we talked typography whilst mucking about with wooden type in the print room at The Ruskin in Cambridge. There’s a bigger story here (!) but it’s a short example of how I use it in story telling. When I create branding or books, I look to the history of the fonts or their typographer too.
Which fonts do you suggest for a non-designer?
Q. Can you give us some fairly safe fonts that non-designers in a rush could use on (say) social media images? Like the Helvetica in you image above but better? Just to help us avoid comic sans-style embarrassment.
Helvetica is absolutely fine btw, but using different weights (by that I mean light, regular, bold) helps. Other fonts that are great are Source Sans, PT Sans, Poly, Raleway (all sans serif) and serifs Playfair, Lora, Butler.
All the above should be found on 101 fonts or any free font resources I’ve listed (I’ve avoided mentioning Typekit which is paid for).
Berenice Smith For serifs, for social media keep them large and a heavier weight. Avoid in large paragraphs as it can be hard to view except on a plain background but test it out and always feel free to ask my advice.
Would you like to know more? Get in touch with Berenice Smith at Hello Lovely or follow her on Twitter @hihellolovely.