What you need to know about typography [with infographic]

What is typography?

Typography is the method of arranging text to make it legible, readable and appealing to look at.

With so many options out there, have you ever got stuck trying to figure out which font to use?

By asking yourself the following questions, you’re more likely to make the right choice:

• Is your font the right size? Are you using large paragraphs of text? If so, is your font the most readable?
• Does your headline font capture attention? Does it complement your body font?
• Are you writing online? If so, will your fonts work in all browsers? Will they work when small on mobile devices?
• Do they appeal to your specific audience?
• How do the fonts make you feel?
• Are they used in certain contexts already? For example, fashion magazines tend to use large Serif fonts for their titles:

Once you’ve got the answers to these questions, you can use my brief guide below for selecting the best fonts for the job.

What is the best font for body copy?

The best type of font for body copy is readable and clear, even in large blocks. Serif fonts can be a good choice. These are the fonts you’ll often see in fiction books and some magazines.

You can spot them by looking for the fancy bits on the letters:

Because Serif fonts are some of the most traditional, they are particularly good for creating a sense of nostalgia, history, fashion or classicism. So, if you have a document that fits into any of those categories, you can’t go wrong.

Some examples of Serif fonts are Times New Roman, Baskerville and Georgia.

Funnily enough, Sans-Serif fonts are another good choice for body copy. These are the fonts without the fancy bits and are some of the easiest typefaces to read, especially in larger chunks.

Because of their readability and versatility, you often see Sans-Serif fonts everywhere – Helvetica in particular, is commonly used on signs, logos, labels, posters etc.

Here’s an idea, take a moment to look around you right now. Chances are there’s something nearby using Helvetica.

Besides Helvetica, some other common Sans-Serif fonts are Century Gothic, Calibri and Arial.

Remember: the most important aspect of body copy is for it to be easily read. So, if you’re struggling to make a decision, simply pick a font that is easy to read.

What is the best font for headlines?

When decorative or fancy fonts are used in large chunks, such as paragraphs, they often blend together and make it difficult to focus on the separate words – which can make them unsuitable for body copy.

They are more suitable for headlines, because headlines are typically large.

The headline is the first part of your document your reader sees, so you have an opportunity to really show what the document is all about.

The context becomes more of a factor in your decision.

So, for headlines, you could try a Slab-Serif font.

Slab-Serif fonts are similar to normal Serif fonts but the fancy Serif parts are flatter and straighter. They’re quite versatile in that depending on the context of your document, they can represent authority, or a modern, youthful look.

What are the best fonts for decoration or illustration?

When designing an eye-catching quote or call out, you may be tempted to use more decorative and illustrative fonts.

Most of these are classed as Script fonts. In instances when you are writing to a particularly feminine market, they can work well. That said, they are tricky to use correctly, as they’re difficult to read when clumped together.

So, my advice is to avoid them when starting out.

Some examples of Script fonts are Brush Script, Channel and Mistral.

I know that’s a lot to take in, but by sticking to the following two rules, you’ll never go far wrong:

1. The Readability Rule

Is your font easy to read?

This is part of the wider design rule to always communicate your message in a way that’s easily absorbed.

2. The Context Rule

Does your font match the environment, the purpose and the audience?

Get this wrong and you could suffer from ‘Comic Sans Syndrome’.

Today, Comic Sans is one of the most hated and most laughed at fonts.

It wasn’t always this way.

Starting life as the ‘most fun’ default Windows font, Comic Sans soon became the preferred alternative to Times New Roman. But its popularity led to its downfall – as people started using it for everything, even when they didn’t need a ‘fun’ font.

It was starting to appear in hospital waiting rooms, police stations, dentists’ receptions etc. This playful font was even being used to convey serious information, such as notices about cancer and crime statistics.

Poor Comic Sans. Over the years this has made it a laughing stock of the font world.

But there’s still a place for it today i.e. children’s birthday party invitations… or, you know, comics.

The key thing to remember is that all fonts have styles and personalities that match some scenarios better than others. It always helps to have a deep understanding of your audience when choosing fonts (or designing anything, really).

What are the rules for combining fonts?

It’s unlikely that you’ll be using just one font in your document. In fact, it’s best if you don’t.

Using more than one font helps you to structure the logical visual hierarchy for your document.

That means you have one font for your headline, and one for your body copy.

Stick to two if you can, and take some time to make sure they complement each other.

Here are some basic rules for combining fonts:

• Don’t pick fonts that look too similar to each other. It’s best to create a variation between the text
• Using Serif fonts as titles and Sans-Serif fonts for body copy can work particularly well because of their individual strengths and weaknesses (see above)
• Try creating a difference between the weight of fonts. For example using a bolder font for titles and a lighter one for the rest
• Another way to create difference between fonts is size. Try making titles larger than the body copy

Infographic cheat sheet

Basic typography doesn’t need to be over-complicated and I hope this guide has kept it simple enough for now.

To help, here is an infographic that includes all of the basic rules.

Save it for reference or embed it onto your site using the code below.

Embed code

<p><strong>Please include attribution to https://www.jellyfish.com with this graphic.</strong><br /><br /><a href=’https://www.jellyfish.com/news-insights/what-you-need-to-know-about-typography-with-infographic’><img src=’https://www.jellyfish.com/wp-content/uploads/2019/10/TYPOGRAPHY-INFOGRAPHIC-1.jpg’ alt=’Typography Essentials’ width=’457px’ border=’0′ /></a></p>