Looking at Type

Have you ever been somewhere where you couldn’t speak the local language? Surrounded by signage, newspapers, shop fronts – everywhere you look there are letters, but you don’t understand what they mean. It’s even worse if they’re not Roman characters.

A couple of years ago, on my honeymoon in Thailand, I was astounded by the myriad of typographic design styles. Not only was it a language I didn’t understand, the letterforms, to my eye, were little more than squiggles. Yet somehow I was often able to understand the meaning of some signs. How? Good typography, that’s how.

On a recent trip to Portugal, I took some time to find some signage that illustrates my point:

pic of seafood restaurant poster

If you just ignore the crab on the bottom left corner for a second, what do you think this sign is for? I don’t speak Portuguese so I’m relying on the typography to help me out here – and it does quite a good job: it’s a seafood restaurant.

Here’s an example of not so great typography:

pic of weird poster

I’ve absolutely no idea what this is for, but the use of the typeface in the poster headline is incredibly ill-chosen. Unless this is a conference about 1960s science fiction (which I doubt) then why use a typeface which has so many cultural references to that era? Terrible.

The next sign is fantastic:

pic of doctors sign

It’s a sign for a local doctors. Even though it’s in another language, it’s so well designed I don’t need to read the language to understand what it’s all about. The Swiss influence is a good idea: red, black and white and sans-serif typography.

Choosing the right typeface

So what do my observations while travelling mean for you? Of course, good typography is about more than just fonts, but I’d like to start there. Typeface selection is vital for the reasons I’ve just given: type communicates more than the words. Keep that thought in your mind for a moment.

In typography, there is no wrong and right typeface. There is just appropriate and inappropriate. So, how do you go about choosing a typeface for a particular project for a website to make sure it’s sending out the right signals? Here are some simple questions you should ask yourself every time you select a typeface

  • Message: Does the typeface you’ve chosen communicate what you want it to in the context of the brief?
  • Context: Is the typeface for body copy or headlines? Is it a logo? Is it to be used on the web as well as a 48 sheet poster? Where else will you need to use the typeface going to be used and for what?
  • Balance: Does the typeface risk actually overpowering the words? You should never let the font get in the way of the words – they need to support each other, not compete.

Once you’ve chosen a suitable typeface, how do you know for sure it’s the right one? You need to get on to the next step in the process: testing.

Testing your type

Testing the hell out of your typeface is vital to ensure it’s 100 per cent right. If you’re designing a corporate identity, which covers everything from stationery to fleet livery, then test your typeface on the letterheads and the side of lorries. Seriously. If the budget will allow, get some vinyls printed and stick them on the side of a van.

Set the typeface in a multitude of ways. Lowercase, uppercase, mixed-case, lists, tables, headlines, two-line headlines etc. etc. The list can be as big, or as small, as you like. The important thing is you dedicate time to testing and looking at the type. Through this testing process, you’ll become familiar with the typeface,. You’ll see it in different ways. You’ll get to know the way the cap ‘T’ looks when set next to a lowercase ’r’. Purely by accident, you’ll become a student of that typeface.

What does this mean for the web?

Well, in terms of fonts that we can be certain are on most users’ machines, we’re restricted to a limited font set of Verdana, Times and Arial. It really doesn’t have to stop there though.

A List Apart, even though it uses HTML text throughout, has stunning typographic attention to detail. Similar in style is Coudal Partners. Great attention to detail in the typography and art direction. It may not come as a surprise that the designers of both of these sites come from traditional graphic design backgrounds and demonstrate a thorough understanding of their craft.

Using image replacement techniques with web standards, we can create accessible designs which have beautifully considered typography with any font we want. Yes, there are some limitations with these techniques, but those trade-offs have to be considered in the context of each product or brief.

But this is all technical implementation stuff. I’m sure in the near future, the web as a medium will be able to display whatever typeface a designer chooses and if there aren’t designers who are working the medium who are passionate and schooled in typography, where does that leave typography for the web?

With that in mind, designers today on the web have no excuse at all. We can no longer, I believe, fall back on the ‘well, we can’t be sure the user’s have that font’ excuse. It’s a platform issue. A delivery issue. Focus on the core design skill and, I really hope, the platform will catch up. Sure, be mindful of the current problems, but don’t be dictated to by them.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Comments

14 comments on “Looking at Type

  1. I agree, one of my other pet peeves is people using very small font. im getting older, approaching 40 and smaller fonts and offline print is getting harder to read, we have to remember, its not about how cool stuff looks but are people reading our sites.Van from St. Louis Voice T1 Lines

  2. I agree, one of my other pet peeves is people using very small font. im getting older, approaching 40 and smaller fonts and offline print is getting harder to read, we have to remember, its not about how cool stuff looks but are people reading our sites.

    Van from St. Louis
    Voice T1 Lines

  3. Ironically, I can't read the content here too well, the ' is distorted in the whole article.Not that it has anything to do with fonts, but… just giving you a heads up on it, so it can be fixed.

  4. Ironically, I can't read the content here too well, the ' is distorted in the whole article.
    Not that it has anything to do with fonts, but… just giving you a heads up on it, so it can be fixed.

  5. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  6. yea fonts are majorly important. Any designer is only as good as their fonts and stock photos.. that’s a general unspoken rule of thumb!

    thanks for info!

  7. The blue festival poster I do not think could be said to be objectively “bad”.

    This style is fashionable in some graphic design circles at the moment. I quite like the headline font for what it is.