News Flash

Dev Tip: When using jQuery on your site, link to the source at http://code.google.com/apis/ajaxlibs so your site loads faster

Blog:

27 September 2006

Looking at Type

By Mark Boulton

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.

digg.com logo Like this article? Digg it!

10
Future of Web Apps Dublin May 14 2010

10 Comments

Have your say:

Sign Up to our Newsletter

Enter your e-mail address below to receive regular updates on web design, web development and web business. Subscribe today and receive a free 44 page PDF "Designing Web User Interfaces" by Ryan Singer of 37signals.

Subscribe to the Think Vitamin articles RSS feed

HTML5 Online Conference April 12 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck