Good vs Bad – Typography

Share on facebook
Share on google
Share on twitter
Share on linkedin

When you are creating a website there are some standard rules, like having the main navigation across the top of the page, having a CTA (Call to Action) towards the top of the page, or having a responsive design (responsive). Those were just a few, but what are some design rules for Typography?

What is Typography?

Typography is “the style and appearance of printed matter” – from google. Better said, it is how printed type (letter, numbers, words) visually appear and how they are arranged.

So, why is Typography important? Well, it can determine the entire look and feel of a website or application. So, having effective typography for your website is important for displaying your values and message.

What is Good Typography?

Good Typography is all about having a clean easy to read font makes the site user-friendly, helps create harmony and an information hierarchy. It is also important to remember the purpose of the text being used. Does it need to be read quickly? Can people recognize the letters? Is it for a sign that can still be read under variable light? So, an important question to ask is, what is the task or message that you want your type to convey?

A great example of typography with a purpose or task that doesn’t need to look good is road signs. Have a look at the example below. The task of the sign: to be read quickly, at every time of day or night, from long distances, under different weather conditions. So, does the sign look pretty? No, but that doesn’t mean its bad typography. It serves its purpose and lets drivers know what is coming up ahead.

Road sign typography

Some examples of good typography in website designs.

Good use of typography in webdesign

NerdWallet, a financial advice company, not only uses complementary typefaces and fonts (yes there is a difference, but they are pretty much the same thing), but they use a visual hierarchy giving readers a way to determine what text is important. The most important being “Make all the right money moves.” Allowing visitors to immediately make a judgement on if they are in the right place. The serif typeface gives a professional and classic feel, while the complementary sans-serif lets the viewers know that it is still a modern and friendly website.

The Sans-serif typeface is used as the main body of text; however, you can see the bold font used in “Easily compare tons of options to find your best”, establishes it as more important than the text above it, pointing out to readers the site’s options in the cards below.

Single-use of a Typeface

Good typography in webdesign

As a kid Scienceworks was one of my favourite places to go, I haven’t been in a long time, but I thought I should check out their website to see what they had going on. I wanted to show you guys a good example of using just one typeface, and Scienceworks just so happens to be that example.

They use a Sans-serif typeface across the whole website, using different weights to show the hierarchy. I suggest having a look at the site because, in my opinion, they do a great job. It isn’t pretty calligraphy, and that’s fine because calligraphy wouldn’t work in this situation.

On to the Bad

By now you know that bad typography isn’t just about text not looking appealing but also not serving its purpose. Here are some examples of miss use of typefaces and fonts.

Multiple Typefaces

bad typography in webdesign

Here we have the return on Excel Music, from my previous article on dated website designs. So, they are using three typefaces, the two calligraphy typefaces having a similar look. This, in my opinion, isn’t too noticeable, however, it is not best practice. If you have a logo that uses a specific typeface, make sure to either use it in things like headers or titles or to use another typeface that compliments it well.

For menus, you want to use your main body text, reserve use of special typefaces to headers and titles. You can see that in the two menus used that you can’t skim over them to find what you are looking for easily. I won’t go into the lengthy text and poor use of text height, but you can see that it is not reader-friendly.

Poor Use of Typography

bad typography in webdesign

Tremolo, a music events company, has a lot of things going for it. The typography is not one of them. Here we can see poor use of weighting, heights, and a mismatch of typefaces. Across the home page, the calligraphy typeface isn’t used again, and you can see why. Not only do I, as a visitor, first focus on “Your life” first because it is easily read. But then I have to spend a few extra seconds to figure out what the rest of the heading is saying. These seconds that the viewer wastes on trying to decode the headline could be used to direct them to a CTA or further down the page.

Now moving on to the choice of text weight in the search boxes below the headline, either the weight is too light, or the colour of the text needs to be darker. Either way viewers have to strain their eyes to be able to read the text. Otherwise I think that the rest of the site is really good, they are using some up and coming website design trends.


To wrap up, the main thing about using typography in your website designs is to make sure above everything that:

  • Your website is readable for the user
  • You use complimentary typefaces, if using more than one
  • Consistency and simplicity are key
  • Have an established hierarchy with your headers, body text, and alt text (like buttons or for the footer)

For a bit of a laugh and to see the worst examples of poor typography check out this piece by Joel Friedlander.

I hope these things help you when choosing typefaces and fonts for your website’s typography. If you think I left anything out or you have any questions let me know in the comments or hit me up. If you aren’t sure if your site is secure or not and don’t know where to start, you can book in a free website review with me here.


Like what you're reading? Subscribe to our top stories.

Sign up to your newsletter

Carlos Ygoa Designs © 2019