What makes a website or an email, compelling and easy on the eyes? Before you start reading on guides upon guides on how to create a landing page or how to nail the perfect email, maybe you should think in a simple and minimal manner for a change.

So, what is it that makes something like that, wonderful? Is it the visuals, the colors, the copy… Or something else?

Well, all these are fine and well, especially the copy (*wink wink!*), however, there is something that makes the user pay real attention: Typography.

Typography is the style and appearance of printed matter, according to my good ol’ friend, Google. The fact that this is a type of art on its own, goes without saying.

And typography is the basis on which any and all kinds of designs that have to do with the written word, are created. This means that you can find it everywhere: in books, on packages, even-and most importantly, for us-on websites, emails, and landing pages.

However, artsy or not, typography is something that needs to provide users with a good experience, much like all tools. And cursive letters might be oh so pretty, but are they usable?

Let’s see how we can improve a user’s experience and the user interface itself, by using proper typography.

At First, There’s The Font

Imagine how blah and indifferent your website would look and how much it would take out of the user’s experience if your font didn’t match the holy trinity of a business: your target audience, your brand’s tone and your goals.

Choosing the right font is a little like choosing the perfect curtains for a room. Tacky curtains show poor taste, and a font that just doesn’t match can make your project look tacky at best-and spammy at worst.

The font is as important as the visuals themselves, to create an impression and pinpoint the things you need to be pinpointed, both in a website and in an email, optimizing your user’s experience.

You’ll need bold for bold statements, cursive letters and intense calligraphy for things that are elegant and not too important. Combinations like the one below, are a must:

brand font pairings

However, I’m compelled to warn you about something: Too many fonts will make you lose the game. You can have two types of fonts at most, and you’ll need to make sure that they’re used as the example above: Bolder and stricter for the heading, more refined for the body of the copy.

And remember the following: If we’re talking about your website and not a landing page or an email, perhaps you should think of using a standardized font.

You see, cursive can sometimes be difficult to read and a result that is too artsy might be beautiful but it’s not easy to read and comprehend. For the busy customers of today, who are adept at scanning blocks of text and finding exactly what they need to know, in order to save time, something non-standardized can look like way too much effort.

Your audience is more familiar with Times New Roman, for example. They can even tell you where it should be used and they’re easy as pie to scan through.

What is more, it could cause a real content issue, in the sense that a more artsy font and format could take attention away from content engagement.

A Font’s Special Elements:

A font is comprised of various elements that can make or break its use, pretty much. You’ve got various styles, weights, the works! So let’s go see what this is all about:

You’ve got your font family, first of all. The font family (or typeface) is pretty much the large category that contains fonts of the same style.

Secondly, you’ve got your font weight, the width of each character, that is. This element separates which font will be used to create a headline and which one will end up in the body copy.

Third goes kerning, ie the pattern that the characters follow, ie the spacing between two letters, which is necessary, seeing as your eyes will follow that exact pattern.

This spacing and the margins are what will define the final, very important element:

The number of characters per line. Too many characters per line and the body of the text will look cluttered, resulting in a pretty bad user experience.

Too few and it will take more time for the eye to reach the next paragraph, getting the exact same result I mentioned above.

By limiting the length, you improve your text’s readability. If the line is too long, it won’t show properly on the device, which will mean that the reader won’t be able to read it properly, which will result in a mess, CRO(Conversion Rate Optimization)-wise.

You’ll need to find a golden ratio that works for you on that one and keep in mind that this golden ratio will need to stop at 60 characters per line.

And a little hint here: You’ll also need to be mindful of the spacing between the lines, seeing as it’s simply too easy to either re-read a line or omit it completely. Which is never a good practice, especially in this day and age when consumers have so many options.

Font Size and Other Nightmares

How many times have you seen a text in all caps and thought that the writer wants to shout angrily? I bet that the answer is “plenty of times”.

Font sizes can work just like the tone of the spoken word: italics can be mimicking, bold fonts can be demanding, capital letters can command attention and so on.

Therefore, a designer needs to be cautious when choosing a font and a style, especially if they’ve got a diverse audience to “talk” to.

If you don’t believe me, just open a novel and check the font. Then, open a children’s book and do the same thing.

It all boils down to what I mentioned in the beginning: You need to appeal to your target audience through your typography as well as the copy and the visuals themselves.

But size is not all that matters. Since we’re talking digital, your typography needs to be impeccable on all devices. You need to optimize for mobile, tablet and desktop, in order to keep the user from getting confused and discarding your content altogether.

Keep in mind that height is just as important. A very long or very short text that looks great when testing for desktop view, might not work well for mobile.

Perhaps the biggest nightmare of all is the alignment of the text. In western culture, people are used to reading from left to right, therefore, you should be mindful of that fact and act accordingly.

Use left-allignment to mimic the way people read texts in print, and you’re good to go.

The same won’t work for your target audience if this is located somewhere in the east, where reading is right-to-left. So, again, your target audience is the first thing to consider before making a decision.

Trends Are Your Friends

You do know that best practices won’t take the cake when it comes to typography and design, right?

You can use the best fonts, your alignment could be impeccable, but without using design trends, your email, website, landing page, whatever it is that you’re creating, could still remain one of your best-kept secrets.

Bold Is Sometimes Beautiful

Think of MAC for example. The beauty brand loves using bold text and extreme contrast as an element:

MAC Cosmetics

This is the brand’s tagline and has been since forever. It’s dramatic and you can’t miss it. Same goes for the hero image of their newsletter:

MAC Cosmetics Newsletter

The greeting is just… There! If we had to create a person out of that hero image, it would be a very stylish person who would be very happy to see you walk down the street.

Also, consider doing the following: Apart from using bold letters, you can also highlight text in your design.

Kind of like what we used to do as children with our markers on our books. Remember how much attention this used to draw?

These are two ways you can use, in order to establish the hierarchy when it comes to the design.

Spice Up The Text!

Blocks of text are great when you align them and people are able to read them without even trying, but what happens when you need to stand out from the crowd and spice things up a bit?

Try to mix things up when it comes to the headlines, with text that will start as horizontal, turn to vertical, turn to scattered letters…

The key here is engaging the visitor. And what better way to engage them than being playful and having them look out for these little elements that will make them play around a bit.

Magic People Voodoo People

The image above is the perfect visualization of the point I’m trying to make, seeing as I had to turn my head once or twice without getting lost. You can see that the left alignment principle is still evident here, seeing as you can’t read the name wrong, unless it’s intentional and you need an exercise on creativity!

Bits and Pieces of Content

Whatever you do, you should always keep in mind that content is what you’re working with and content is king. Always.

Make sure that the quality matches your vision and the frequency with which you post, upload or send emails.

Secondly, make sure that your design doesn’t take attention away from the content. For example, a CTA button should be bold and contrasting colors, but not to the point where the recipient won’t read the message you’re trying to convey.

Go ahead and read the content, spend time with it and really get into it. If you’re posting a lot of new things, they’ll need to be timely, relevant and attention-grabbing.

Visualize what you want to say. Read your text out loud and make sure that you’re creating the image you had in your head when you first laid eyes on the drafts.

And One More for the Road

Be very mindful of the colors you are going to use. Apart from color psychology and how it can affect the user, you’ll need to be careful of another couple of things:

Number one, color blindness. Don’t use too many reds or greens when it comes to highlighting important information.

Color blindness is a quite common condition, with red and green color blindness being the two most common cases. So, when it comes to CTAs and things one should know, like the Terms and Conditions, for example, stick to blacks and high contrasting ones.

Number two, flashing images and text. Flashing images can cause feelings of anxiety, they can distract the user and they’re kind of annoying. But these are not the main reasons why you should avoid them.

Flashing images can cause epileptic seizures.

In Conclusion

There’s still a lot that remains unsaid when it comes to typography, web design and the user’s own experience, but I think we’ve covered the basics here.

Just make sure to think outside the box and be relevant without being the same as everyone. A creative individual like you, will surely find a way to think outside the box!

And don’t forget to leave a comment with your feedback on this post!