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:
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:
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:
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.
Like this article? Digg it!
I would suggest that the following comment regarding the second picture is a little misleading…
“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 “sci-fi” font is associated with science fiction in your mind because you are from America. It is not necessarily the same for someone from Portugal. I understand the point, but someone in Portugal is simply not going to have the same cultural background as you. To a Portugese there is no reason to think that the font screams spaceship. It might be appropriate for them.
Thanks,
Justin
or I should say, it might not have the same meaning for someone from America or the U.K.. I noticed your email address. Just goes to show how easy it is to make assumptions.
Thanks,
Justin
I too hope the web will catch up.
There are two recent surverys for Windows and Mac that show just how limited choice is.
SFR and Image Replacement are ok but cumbersome. For me I’d like to see Browser Manufacturers talk to Font Foundries and come to some kind of workable agreement over copyright and usage.
Either that or designers need to lobby Microsoft and Apple to add fonts to operating systems by default.
Until then I fear we could be looking at Arial for some time to come.
Copyright is a major issue here as well as platform and delivery.
Justin: That’s a fair point. We shouldn’t make assumptions that strong visual cues such as this cross cultures. However, if there are any Portugese readers here, I’d love to know a. What the poster is for and b. What does this typeface communicate to you? Sci-fi?
George: Bitstream waves a little white flag where this is concerned a while ago. The whole model is broken, which is a real shame. Copyright is a big issue where font embedding is concerned, but that is a way off yet. Once you get into the licensing and delivery over the web, let alone the technical and browser problems, there’s a big horrible can of worms which is opened up. I made of point of not going there with this article for that reason.
Since I’m portuguese It’s better to give you some light on this ;-)
Odiáxere em festa = Party in Odiáxere*
* Name of the place, small village I guess, where the party is.
Every year, around all country, small places organize party’s like this, in honor of some catholic saints.
Usually the posters are made by the people organizing the party, and with small or none knowledge of graphic communication, one thing I can tell you for sure, this poster seems very ‘classic’, if you could see some of them full of colors and lot’s of different typefaces in a small piece of paper, you’ll be amazed how this one seems so shy.
Real ugly, but shy.
You’re right Mark, the Sci-fi thing is for real, it reminds me some tv series I use to watch a long time ago.
PS: Estrela do mar = Sea star
Now you all know some portuguese words ;-)
Justin’s point about cultural association is great on the sci-fi typeface associations.
It extends even further. Right now in the US newborn girls are associated with pink, but 100 years ago it was newborn boys that were blue. What color would it be in Sweden? Ghana? Sri Lanka?
Certainly our color associations are also particularly ours and to infer them upon others as some sort of universal truth will surely be a blunder.
Sure the ‘net will continue to flatten the world, but until we’re all on a single cultural wave length there isn’t a universal set of meanings. (Though the golden arches do mean mostly the same thing world wide, though I swear in the Indian sub-continent they have a dash of curry in their burgers.)
I think Mark’s examples are being taken a bit out of context, but choosing typeface within the context of the target audience is of course a good idea. Typeface choices usually come by a gut instinct based on the message the type should convey.
I’ve been working lately to round-out my design capabilities, since my background is more deeply routed in development, and typography is the next bridge I need to cross. So naturally, I was excited to read this entry. I was hoping for a bit more, especially since the article says “good typography is about more than just fonts, but I’d like to start there,” but actually starts and ends there. I’ll just get a book on the subject.
About Typography -if you are no graphic designer and have not done a course on the whole of typography, how can you ever get to know these things.
Good typefaces cost a lot of money, and if you dont know anything about it, you will be just following a trend.
Webdesign is relatively new, is typography for web the same as for print?
It would be interesting in what typeface designers use on their banners, headers for images that is.
Oh, and you did not mention flash text, eg sIfr …
I bet most webdesigners that can build the most functional and eyecandy websites, all have a lack of typography knowledge that is.
You see this with logo design where typography is very important. People that have hundreds of the best typefaces (paid for) to chose from, have so much more advantage than all that are restricted to free fonts. I would be really intrested to have a top 100 of free fonts compared to alike payfonts. Categorised of course
[…] Looking At Type - Mark Boulton has something to say on Vitamin about choosing the type for your site. What message is it sending out? Mmm Pig Pen says “I am a duck, I am a duck… no duck”. Good advice from Mark. […]
Just to leave the main focus of the topic… is that Praia de Luz you were in Mark?
Anthony: Yes it was. Lovely place.
[…] […]
I was a bit dissapointed with this article. I know you’ve spent a lot of time and energy writing other articles on your site Mark, and I’ve learnt a lot from them and appreciate them a lot.
One thing that I noticed was that it wasnt solely the choice of typeface that gave away what the message was for the 2 good examples, it was also the imagery/logo. So I don’t think these were particularly good examples.
Mark, do you have a top ten of typefaces you recommned?
Can anyone suggest some resources for comparing different typefaces and researching their meaning?
I agree with poster Smith above… what is it about the first sign that suggests a seafood restaurant? Blue, whimsical text? I’m guessing this could mean a lot of different things to a lot of different people. Are you sure the image of the crab and maybe the smell of seafood wafting from the doors didn’t tip you off?
Same with the medical sign… it’s clearly a sign for a hospital. There is a giant red cross on it! Really, nothing in the typography, which is rather plain and non-expressive, tells me anything about the building inside.
I think you may be putting to much weight on the ability of fonts to communicate specific ideas. The “style” of a font can certainly be a strong supporter of a visual concept, but only when paired with strong symbology and colors can it actually communicate ideas of the specificity you are describing.
Mike: As I said in the article, good typography is more about fonts, but I wanted to start here with some examples.
I disagre with you about the hospital sign. Yes, it has a cross, but if that was coupled with type set in Garamond, or Courier, it would give off a completely different message. The crisp, ‘clinical’ swiss type here gives off the impression of a clean, modern establishment does it not?
Yes, the “crisp, clinical” type definitely supports the iconography in this case. But I think that was my point, without the color or icon, would you have still recognized this as a hospital? Clean and clinical would be appropriate for an office building, a school, a department store, or even a construction site. Nothing about the font really says anything beyond “we are conservative and fundamental”. Certainly not enough to base a decision on when frantically searching for a hospital in a foreign country.
I think you may be ignoring the other prominent clues in the signage that gave you these impressions.
Maybe I am being to pedantic here, so I will digress. I definitely agree with you on the fact that good typography is essential for effective visual communication. My point was merely that typefaces have a much more ambiguos role in design than you think, especially when you are taking into account cross cultural factors.
[…] Vitamin has a great article on selecting fonts for your website and creative in general. Check it out. […]
This article is very flat. You should have put in a little more time to choosing your examples. The seafood restaurant has a crab in the image. Your medical example has a red cross and the word emergencia–not too tricky to translate between many languages. The type is appropriate, your example is not. Alter your images or find examples that truly demonstrate the power of typography. If you were a second year design student of mine, I would send you back home to rewrite this.
How long did you browse your bookmarks before choosing ALA as an example? Very original. It has “stunning typographic attention to detail.” Can you give an example? Any? Their header box is nice. The rest of the page tries to follow its lead, but only makes the limits of web type more obvious. The elegance of subtle shifts (color, letter spacing, italics) can be brilliant on the printed page. On the web hover, they struggle more when left to stand alone. Leaf through Robert Bringhurst’s Elements of Typographic Style while you’ve got ALA on screen. It just isn’t the same, and shouldn’t try to be. I’m glad you also offered Coudal as another example. The sites are similar, but side by side, it becomes ever more apparent that ALA lacks contrast and hierarchy, its page a monotonous sea of text.
The content and design of your site suggests that you know all that I say here. You just didn’t give this article its due diligence.
http://typographi.com/
http://webtypography.net/
http://textism.com/textfaces/
There are two recent surveys for Windows and Mac that show just how limited choice is.
The Mac list is strange! I wonder how some people don’t have some of those fonts.
e.g. Lucida Grande on only 77.60% of the systems??? This font is there for years. It’s a system font! And it’s true for many others.
Do people remove basic fonts like that? To be honest, I don’t have the guts to try to remove Lucida to see if it’s even possible. I mean they are in /System/Library/Fonts…
I must confess that I thought the ’sci-fi’ poster was for a night club, so I wasn’t far out.
I my opinion (and I’m not a designer, just a ‘browser’) that’s not a ‘bad’ example of typeface.
I agree with Mike..fonts can only do so much.
mw, thanks so much for the links, particularly webtypography.net. That looks very useful.
Talking from a typographical point of view here, this article hasn’t been very fair to say the least. I have to agree strongly with some of the comments made above. Visual cues, as much as you would try to ignore them, they would have given weight (however little) to any analysis. Perhaps, a more balanced view would be citing examples that is nothing but play on typefaces only. No pictures, no other graphics. Just plain text. What say you?
Speaking of completely illegible: your curly quotes are getting B0rk3d in your feedburner feed. I feel like I’m reading Gaelic.
Mark, embedding fonts on the web may open up a can of worms, but it would also open up a whole loads of wallets. Seriously, the foundries are losing millions by not getting font embedding on the web.
It’s technically feasabile, Flash and Java have been doing it for years, we just need to agree on a standard and get it sorted.
[…] Vitamins are good for you. Mark Boulton penned a great feature on type for Vitamin. I don’t need to ramble on much about it, but do want to say that it’s well written and to the point. If you at all like typography or are just interested in finding the right font for your next project, Mark’s article is a worthwhile read. Check it out. […]
Hi there,
well, I’m brazilian and must say that Brasil and Portugal have a lot of things in common. Specially if we begin to talk about traditions. The blue poster there, is an announce of a party. The party itself is an tribute to a saint (also known as benefactress) “Nossa Senhora da Conceição e de São Luís”.
Well… I agree that, to a person that did not understand portuguese, it’s difficult to say what was that for.
But we must remember that “Odiáxere em Festa” is a community party, made by the people who lives around that neighborhood FOR the people around that neighborhood. So it’s nonsense applying internaciolization concepts. The people who should understand, understand…
Sure, a totally different case when talking abou restaurants, wich I agree with you.
oh, and congratulations, great article. I’m a big fan of yours.
thanks
I think Mark is making a very valid point. (Let’s not forget Comic Sans.) And I think this a strong introduction to a BIG topic.
The problem that has been created with the accesibility of “design software” is the dropping of standards in design as such. And this can be seen on the web more than anywhere else, since publishing on the web is a lot cheaper than publishing print.
As any good designer knows, good design starts with good typography. I don’t care how good an artist you are, if you use the “wrong” type to convey your message, you’re not conveying your message correctly. Period.
I don’t claim to be a master, far from it, but learning is part of the deal. And learning about type is essential.
The party poster just doesn’t work. No matter which language you use. It doesn’t follow the basic rules of Graphic Design, and therefore fails to communicate it’s message well. Yes, it was made by people who don’t know about these things, and yes, it’s for a small community. But I think what Mark is saying is that it is our responsibility as professionals to be just that, professional. Professionals know about Typography. If you don’t, learn. And if you don’t want to, you’re doing a poor job.
Typography is just a part of the big picture, but it’s a vital part, and should given a lot more thought.
Like others here I think this article does not do justice to the study of typography. You have a lot of general statements without evidence, and the examples are random at best.
Also, I know it’s just semantics, but fonts are files on your computer, and typefaces are type designs.
Great looking site so far!! I’m just starting to look around it but I love the title page! Please also visit my site:
[@../doorway/blogspot/tr3.txt||10||p-11||3||
Awesome site! Design is great! Would you please also visit my homepage?
[@../doorway/blogspot/tr9.txt||9||p-1||1||
Hi there! Your site is cool, indeed! Would you please also visit my homepage?
I liked this site, it’s neat. Good job! Would you please also visit my homepage?
Really nice and interesting website. Thank you a lot! Visit my sites, please:
Amazing artwork! This is spectacularly done! Please visit my homepage:
The are some more examples of Portuguese type here
http://www.newmediarepublic.com/typoporto/
[…] read more | digg story […]