Why Typography Can Make or Break Your Website

"This Post contains affiliate links; this means we earn commissions if you shop through the links on this page".

This is a guest contributor entry. Views and opinions contained in this content are solely those of the author and not CyberNaira.


When you try to break down the elements that are most important when creating your website, two things usually come to mind: design and content. There is no doubt that they are the stars of the show. But just like with any star, they depend heavily on lesser elements to complete the picture.

One of these that gets very little attention is typography. And that is rather strange because it is an integral part of both design AND content. It also plays a key role in the all-conquering conversion rate.

It may be hard to imagine off the bat how that can be, but by the end of this article, you will find it hard to imagine how you managed this long without knowing anything about the rules of typography.

However, don’t feel too bad about that. Most website owners and worse, internet marketers, are in the same boat.

They have probably spent as much time and effort on optimizing their websites for SEO and conversion without once considering the element of typography. Yet its psychological impact has been proven scientifically.

If you have done all you can with your site, and your conversions still fall below expectations, the culprit may be the decisions you made (or don’t make) about typography.

Typography Defined.

Before going any further, you should first know just what typography is. In simplest terms, typography is the design of your text. It has to do with the way it looks, the space it occupies, and how it scans.

When a user opens a page on your site, the first thing they do is scan the page without reading anything yet. They form an impression about that page based on how it looks, and in most cases, that involves how the text looks. Consider this site:

feedmusic homepage image

Compare it to this one:

gatesnfences homepage image

Do you notice the difference in typography?

While the second site may be a more useful site to you than the first one, you are more likely to close it.


Because it is so hard to scan.

The first one is much easier to scan so you are more likely to have a good impression of it (and a bad impression of the second) without knowing a thing about either site.

Because the second site made a bad choice in design and typography, any nuggets of wisdom that may be on the page will likely remain undiscovered by a majority of its visitors, and that means low conversion.

Now, you may think that typography is just about the fonts you choose. That is just one part of the equation. The font is important, of course, but it only refers to a particular typeface style.

The typeface itself is a group of fonts that share common characteristics, so you will make better use of your time studying the effects of a typeface rather than a specific font.

A very familiar example is Arial, which is a typeface, not a font. The same goes for Times and Garamond, which have a wide range of different fonts.

Aside from typeface and font, you also need to consider

  • Line length
  • Leading – line spacing
  • Kerning – white space between letters or characters
  • Tracking – uniform letter spacing

These all (or at least, they should) come together on your website purposefully, and to do that, you need to know the role and impact of typography.

The Role of Typography

The main purpose of studying typography has to do with promoting readability in a literal rather than comprehensive sense. Text that is set too closely together, too long, too small, too curly, or too low contrast is simply hard to read.

You only have to ask yourself what you would do when confronted with a block of text you can’t easily read. Most people would simply leave it.

In some instances, you may try to read it anyway, but chances are you won’t understand what you’re reading, or you won’t read it through to the end. It is also very likely that your only takeaway is that it was more trouble than it was worth.

The role of typography is to make sure you get your message across to the reader. It may be information or a sales pitch. It doesn’t matter.

What does matter is that all your effort to get people to your site is finally paying off, and good typography ensures your visitors will at least understand what you have to say.

Leading them on.

You may know that online users tend to read in a predictable pattern. One study shows it follows the F-pattern, and another shows it is above the fold. You can use this knowledge to put “important” text in the reader’s path, although that can present some design and technical problems.

A much easier and more flexible option is to create a visual hierarchy using typography.

In effect, you are leading your reader to “important” sections of your text by using the right size, style, and color of the text. For that, you need to know how people perceive and organize visual information, and Gestalt’s theory breaks it down for you.

In simple terms, the theory states that people tend to visual information in groups in terms of similarity, proximity, continuation, closure, and figure and ground. To draw attention to certain elements in your page, you need to draw the eye of the reader to it.

For instance, if you want to draw attention to the “Download” link in your copy, you can use Gestalt’s theory of similarity by making it an assorted color or font.

You can also use proximity by putting the word “Download” on a separate line. Another strategy is to use continuation by using a curved arrow to point to the word they need to click.

Shaping Perceptions.

So far, we have discussed how typography can direct the reader to certain elements in your page, but we have not yet looked at how it can affect the decision-making behavior of the reader. This is crucial because conversion depends on a significant degree

This is crucial because conversion depends to a significant degree on the perception of the reader. As you can probably imagine, a positive perception is what you want to convert.

As it turns out, the typeface you choose has a measurable impact on the perceptions of the reader regarding content. A recent study showed that the use of different typefaces elicited different emotional responses to the same content.

When the statement was presented in the Baskerville typeface, a high number of people believed the statement.

However, when presented with the same statement in Comic Sans typeface, a high number of people disagreed with it. It seems to show that the typeface influenced the perceived credibility of the statement.

It is easy enough how that can be. Consider the following statement:

Without knowing the name of the typeface of either, which one do you perceive to be more authoritative?

Now, that doesn’t mean that a typeface such as Comic Sans has no place in website design and that we should all use Baskerville as our typeface. The point is that your typography reflects the personality of your site and your target market.

If you deal with CEOs and other executives in high technology industries, then a formal typeface such as Baskerville can make your site look professional.

On the other hand, if you cater to children or their parents, Comic Sans can strike just the right note of fun and friendliness.

If you cater to different markets, there are many options out there that are somewhere between the two. You need to find out what works best for you.

Making it Easy to Read.

The next thing you need to find out is how big is big enough for readability. Presuming your page is scannable, your next concern is making sure the user can read your content as easily as possible, and size does matter. There is no hard and fast rule for this, but a

There is no hard and fast rule for this, but a study conducted at Wichita State University of the 8 most popular typefaces used online found that the most legible typefaces were Arial at 14-point size and Courier at 12-point size. The most illegible

The most illegible was Comic Sans (again), although it nonetheless made the grade as a preferred font together with Arial and Verdana.

If you prefer a different typeface from those included in the study, you need to conduct your research when it comes to determining the most readable font size for your content. You can follow the tips in this article to get you started. (Warning: Some math involved!)

Before you go off on your own, however, you should know that there is quite a debate going on over which is a better typeface style, serif or sans serif.

An example of a serif typeface is Times, and a sans serif typeface is Arial. In general, sans-serif typefaces are easier to read in any size compared to serif typefaces, mostly because they are simpler.

san serif image

Improving Mood and Cognition.

Last but certainly not least, typography has a significant effect on the mood and understanding of readers, as shown in this study. In the abstract, the authors concluded that ” good typography induces a good mood” and that this affected their cognitive performance.

In other words, if you find it easy to read the text, you are more likely to feel good and can more easily understand what you are reading. You probably know this intuitively, but it’s nice when it is quantified.

The point is more than academic, however.

It is crucial for your conversion rates that your readers are in a good mood when they are reading your copy because they are more likely to be amenable to your calls to action, whatever that happens to be.

If good typography will get you that, why wouldn’t you do your best to give it to them?


As motivational speaker Steve Backley said, “The first step is the most important. It is the most crucial and the most effective as it will initiate the direction you have chosen.” You have taken a crucial first step in understanding why typography is important for your website.

It has given you the direction for the next step, which is putting all you have learned into practice.

About Michie Victoriano:

I am a Marketing Research Analyst with more than 6 years of experience in Marketing, Research, Analytics, and Online Marketing; with 2 years of experience in Search Engine Optimization. I am a freelancer at the moment. I enjoy playing video games, and basketball and love coffee too much.

2 thoughts on “Why Typography Can Make or Break Your Website”

  1. Hello,

    Thanks for sharing information of How Typography Affect Your website Users Experience.It really helpful to me…It really useful information.I always prefer to read the quality content and this thing I found in you post. thanks for sharing with us..

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.