Choosing Fonts – How to use Typography on Your Blog

I sometimes use affiliate links in content. This doesn’t cost you anything but I may make a commission payment from anything you buy through these links. As an Amazon Associate I earn from qualifying purchases. All opinions remain my own.

Whether you have a blog and are rebranding or creating a completely new one, there are decisions to make.  While choosing fonts to use on your website isn’t as big as what you call your business, what your domain name is and other core elements, it is a key part of business branding.  But how do you use typography on your blog?

What is typography?

The whole business of fonts, types of fonts, and combining fonts is known as typography.  It is an important part of creating a personality for your business and can have a surprising impact on how people respond to your website. 

Typography incorporates the different types of fonts and helps you to understand them and how they work together.  If you are like me and love fonts, there’s a temptation to grab as many as you can and put them to use.  But there are ‘rules’ that can help you make sound decisions about those fonts, both in terms of the user experience you create and the branding you have for your business with them.

Typography is also about the fonts in action – pairing them, using them, and technical stuff like leading.  While non-graphic designers (that’s me!) don’t need to know these things as in-depth as designers do, it is a good idea to have some basic knowledge because it can make a big difference to how your graphics, web design, and other assets come out.

Why font choice matters

Choosing fonts matters because fonts have a look and feel to them, a ‘personality’ that can either attract or repel your visitors. 

We all see examples of fonts that we instantly recognise and associated with certain products, brands, or even things like books or films.  The Harry Potter script is one example – even when it doesn’t contain the words Harry Potter, you will immediately associate anything with it when you see that font.

Typography has become even more important with the growth of mobile traffic.  Those smaller screens can mean that the font used is even more impactful, both in good and bad ways.  With over half of the searches coming from mobile, you need to consider small-screen users when you choose fonts for your website.

The basics of font types

To start with there are loads of different fonts and ways to classify them but for the non-designers, there are four general categories to use and get to know:

1. Serif – these are fonts that have ‘feet’ or lines at the ends of letters and generally seem more serious and traditional
2. Sand serif – these are the fonts without the little feet (sans means without) and are often seen as more modern and streamlined
3. Script – also known as handwriting or cursive fonts, they usually have connecting letters and can be hand-drawn style, elegant, fun, and more.  They are usually used for emphasis rather than content or even headlines
4. Decorative or display – these are sometimes known as novelty fonts too and are a little more unusual than normal, designed to grab attention and place emphasis on words so are used best in similar ways to script fonts

Font or typeface?

You might hear the term font a lot, but you might also run into the term typeface.  So what’s the difference?

At one time, they were different but now they are mostly used interchangeably.  According to Canva, you can think of it like this:

Typeface + style + size = font

Canva

Typeface relates to the days when printing actually used metal blocks for each letter and the style of the alphabet, say Times New Roman, would be the typeface.  The size or weight of the letters, such as bold, and 10 point, would be the font.

You might also like Domain Name – One of the Big Decisions When Starting a Blog by Skylark Virtual Services.

Choosing fonts

When you start looking at choosing fonts, it is a good idea to start with the basics.  Don’t go out and buy a load of fonts and hope one of them works; look at fonts you already have access to.  You can look on your desktop or laptop, in word processing documents like Word or Google Docs.  Canva is another ideal place to look at lots of fonts and get a feel for them.

Purpose of the website

Then think about what you are using it for.  If it is going to the body font on your website, what’s your website feel?  Are you talking about a serious topic such as a health or wellness topic that needs to be down-to-earth and factual?  Is your blog about something a little fun like a crafting blog? 

Think about what kind of style will fit with your website theme and if it works alongside other elements you have chosen.

Context and audience

Also, think about the context that the font will be used within.  So say it is a font for a business card – is it easy to read in a small format?  Maybe you are looking for a font to use on Pinterest pins – will it be legible on small screens?

You may also want to consider your audience.  For example, if your demographic is people in the 20-30s, then a serif font may look a little old-fashioned while a sans serif font is more modern.  It isn’t a rule, but rather a feel for how people may view the font.

Is it practical?

I love script fonts and gravitate toward them.  They are perfect to emphasise a keyword on a Pin or a graphic, but they are not so good for headlines, subheadings, or definitely not for text.  You might like a fine sans serif font but if it doesn’t have enough substance to it, it might be hard to read.

Above all, consider if the font you want to use is practical for the purpose.  Also, look at the font size and make sure it works well – most websites recommend body text be around size 16-18 now (mobile again!) so does the font look good at this size?

Is it versatile?

One other thing to think about depending on the purpose of the font is whether it is versatile.  Now those lovely scripts or display fonts don’t need this, but a body or main accent text could be helpful if it comes in different variations.

So what does this mean?  Below is an example from a Canva font called HK Grotesk, a sans serif font.  This has variations of different options that include bold, medium, and extra light.  Some fonts have many more variations so you can use the same font in different weights, bold, italic, or more to create effective graphics.

Spacing and height

Choosing the right fonts is one thing and knowing why font choice matters are important but there are a few other little considerations when sorting the font you want to consider.

Spacing

Spacing is where you adjust the spacing of your text so that it is easy to read.  Too close together and it is hard to read but too far apart and it can have the same effect – it seems weird!  You should look at the font size and weight but also the spacing between the letters.  There are a few adjustments you can make:

• Letter spacing or tracking – spaces between groups of letters in lines or paragraphs
• Kerning – spacing between pairs of letters
• Leading – vertical space between lines

X-height

This refers to the height of the lowercase letters in a font, for example, the letter ‘x’.  by making sure it is proportionate to the capital letters, you can ensure the font is readable.  But you don’t want the X-height to be too close to the size of the capitals or you can’t tell the difference between the cases. 

The I/l/1 test

If you have a lot of numbers in your text, you will also want to check if you can tell the difference between the capital letter I, the lowercase letter l, and the number 1.  If the latter is too similar to one or both of the other two, it could make the text a little hard to understand.

How to pair fonts

Picking one font is never enough – and actually, when learning typography you realise that it isn’t.  Normally your branding will use two or three fonts that will be complementary but a little different to create your brand identity.  But how do you know which ones to combine?

The two font approach

The first and easiest approach is to choose two fonts and keep them simple.  Have one font that you use for headings and titles on the website and another for body copy.  It is often ideal to have a sans serif for the body font and a serif for your headlines.

See the example below for Grandma’s Special Herbs which uses Trocchi (serif) and Glacial Indifference (sans serif)

Use the same font in different variations

We mentioned before that some fonts like Monserrat and the one in the example come in a variety of different weights.  If you find choosing fonts too much of a headache, then use one font and have different weights for the different jobs.  Use a bold or ultra-bold for headings, a normal for body text, and even a thin or light for things like quotes.

Have fonts that stand out

The below graphic has two examples of fonts that stand out.  In the ‘Happiest New Year’ Canva pair Lemon Tuesday, a script font with a simple, bold League Gothic, a sans serif.  You could even switch these around if ‘New Year’ was the keyword you wanted to emphasise.

Another example is the use of Playfair Script, one I love with Glacial Indifference.  Against this are a script font for the lower sentence and a simple sans serif for the other section.

Use a sans serif with a display font

In the Roasted Red & Gold Beet Salad example, you can see Anonymous Pro which is a display font that has good spacing between the letters, again with Glacial Indifference.  This is a twist on the serif-sans serif combination by using a display font that has serif characteristics with a sans serif font.

Script plus two variations of a sans serif

In the last example, the Lemonada Semibold is a nice script font that is quite easy to read and has been combined with two variations of Open Sans, one with bold and the other without.  This creates the three fonts without actually needing three different fonts.

These examples all came from the text section in Canva that offer ready-made pairings for fonts.  You can also use their font combinations tool which lets you choose a starter font and automatically offers ideas of other fonts in the tool that works with it.

Final font tips

To finish up, a quick couple of expert tips to remember when you are creating everything on your website with your new fonts.

First, make sure you use a dark font colour, either black or very dark grey so that it is easy to read.  Sure colour can work for headings and links should always be coloured.  But keep your text dark on a light or white background.

When it comes to text alignment, don’t just justify.  This is something you see in newspapers but doesn’t work so well online as it adds weird spaces to make the lines fill the gap.  Use left-aligned unless you are making graphics then right-aligned text is great for an eye-catching alternative.

A distinctive style

There are countless great fonts out there and new ways of combining fonts to create a look for your blog that is totally unique.  With tools like Canva and lots of great graphic designers out there, you can also quickly get some inspiration and feedback at any stage of the process.

What is your favourite type of fonts?  And what fonts do you use in your branding?  Share in the comments below (and add a picture of them in action!!)