The basics on how to engage your audience with fonts
A guideline by graphic designer Gabriel Gardner (freelance at 100Designs)
In this post, I will be focusing on the design process that goes into selecting and using fonts on websites (and marketing material) in order to catch your viewers' eyes and hold their attention. In this blog we will be looking at tone, legibility, layout, and font pairings.
Step 1: Tone assessment “what are you in the mood for?”
The first step is the crucial one, and that is assessing the tone or mood that website will have.
If you aren’t really sure what kind of font would suit the tone of the website, then researching similar websites and their use of fonts is a good idea, it will help get you started.
Example - if you were creating a sports-based website, then you would want a dynamic, yet bold sans serif font (as pictured above) to capture the high energy, strength and excitement of sports.
You should also think carefully about the colour palette. The bright red works well will the sporty font, it is high- impact, positive, attention-grabbing.
If you were creating a jewellery website, you might want to add a touch of sophistication to the site by choosing a fine serif or sans serif font to illustrate the delicacy and refinement of the jewellery, you may even want to choose a calligraphic font in order to represent the hand craftsmanship that goes into the pieces (see example below). Decide on the emotion you want to generate in visitors to your site and make your font choice based on that.
With a jewellery site black might be considered too bold and unwelcoming as a colour. A fainter grey feels more welcoming and less aggressive. Black is used as the universal colour for text because it is highly legible and has high visibility, but a black font will rarely work for an art or craft-based business. It lacks personality. A fainter grey, for example, not only has more elegance but brings to mind the colour of silver which makes it especially suitable for a jewellery website.
You should feel free to experiment with colours and fonts. Using what you see every day, the fonts used in our culture, and your own natural instincts, you will usually find that the process of selecting an ideal colour palette and title font is much easier than you'd think.
Step 2: Legibility and layout “size matters, and so does where you put things!”
This is really is the bare essentials, but it is still incredibly important information to remember that the fonts you pick for your site shoulde easily readable at any size. People make up their minds about whether they want to read information on a website, based on a first glance at the size, legibility and style of font used rather than the content of the text that is written there. A good first impression is key, and you only get a chance to make one.
These are the basics, but when you see them in practice (below) they will make much more sense.
1) Bold/thick fonts are better for titles or headlines.
2) Text headings and subtitles are also better when bolder, but need to be noticeably smaller than their title counterparts otherwise the weight of the layout will be thrown completely out of balance – at this point you should switch to the type of font (sans serif or serif) that you intend to use as the body text, in order to tie the arrangement together and create a relationship between the text so it is more easily consumed.
3) Body text. As mentioned above, sse a finer, smaller version of the subtitle font. If it is too complicated and ‘gimmicky’ it will become too much of a strain and will largely be ignored.
Using the example of the Sports business, here's what bringing all that together might look like.
The year is highlighted in red, which works in the colour palette and projects importance onto the highlighted word. The body text is finer and smaller, not needing to catch the eye (the job of the title and to some extent the subtitle) but is still perfectly legible – its main job is to effectively distribute the information it represents.
Step 3: Font Pairings “It takes two.”
Using multiple fonts on the same page can be a very effective way of grabbing attention and sustaining engagement – if it is done right, if fonts just don’t match up, they can really mess things up. With that in mind, here are the things to look out for when pairing fonts together to create an appealing and eye-catching duet.
1) “Contrast Don’t Clash”
This was previously mentioned in step 2, and Contrast, as the name implies, is about finding completely separate, but still complementary fonts that are each fit for their intended purpose (step 1, tone setting). Usually, this entails pairing a serif font with a sans serif one. Fonts will most usually clash if they are too similar to one another: two marginally different serif or sans serif fronts almost never create nice typeface pairings.
The first priority is to establish a clear hierarchy – or order of things. This may be as simple as differing size and weight of the same typeface (step 2), but where the typeface varies, that's when careful, considered font-pairing is crucial. If you have a display font (The sports world logo shown before, for example) bursting with personality and energy, you'll need something more neutral to do the hard work i.e. communicating the actual content of the site.
2) “Sorting out your serifs”
Back to basics again. The terms 'serif' and 'sans serif' are a little vague as classifications. The truth is that they are each divided into multiple mini sub-categories. Generally speaking, Old Style serifs such as Garamond, Bell MT and Georgia will combine well with such sans serif fonts as Gill Sans and Lucida Sans.
Here are some examples of combining Sans and Sans Serif fonts to intrigue the eye and engage the viewer
This pairing often works best with Trade (bolder and weightier) used for headings and titles and Sabon used for the body text. Both fonts are highly legible, with a high X-height, but are not too similar to one another and show sans serifs and serifs partnerships working well.
The similarity in x-height ratios means the fonts work well together and the combination of the bold authoritative serif and the sleek, contemporary sans serif make this pairing stand out. Together they are sleek, elegant and professional.
The low x-height but wide base for both fonts ties these two fonts together well, The boldness and weight of Clarendon makes it particularly suitable as a heading font whereas the lightness and geometric curves make Avenir easy to read.
Hopefully you learned a thing or two from this blog on how to structure the text on your websites, the types of fonts you should choose to catch the eye and maintain interest, and how to assess the tone of your work in order to select an appropriate colour palette and style of fonts. Remember not to over complicate things as the old adage, “less I more” is certainly true when it comes to use of fonts. Good luck with your designs!