Fonts and Graphic Design
Graphic designers tend to be natural font-spotters. Show them a flyer or brochure and they’ll instantly know what font it is, even when driving:
“You know that X-brand billboard on the way in to work?”
“Yeah.”
“Do you know what font they used on the heading?”
“Yeah, that’s Fruitiger.”
“You sure?”
“A hundred percent sure.”
Graphic designers have to know their fonts, it’s one of the fundamentals. A graphic designer who doesn’t know his or her fonts is like a composer who can’t tell a flute from a tuba. For those in the field of marketing who don’t yet know their Formatas from their Futuras or their Georgias from their Garamonds, it’s a good idea to at least learn some of the most commonly used fonts in graphic design and be able to recognise them.
Having knowledge of both the best and the worst fonts, you will know which fonts are the most overused (like Impact) which fonts to avoid completely and which fonts are bound to make any graphic designer scream with rage.
Of course with these lists I’ve provided, as with pretty much every other top ten best/worst list you’ll find on the Internet, there’s always disagreement. For example some say Helvetica is one of the best ever fonts, others say it’s way too overused. The same goes for Trajan, a strong and otherwise attractive font that’s lost any semblance of epic grandeur it might have by becoming the font from almost every movie ever made. [Video]
Or how about the font from the most popular movie of all time? Avatar grossed over $2.7 billion last year, and is still making James Cameron obscene amounts of money. Yet, despite all the money spent on special effects and marketing, James didn’t spend a single cent on typography because, as any font-spotting graphic designer will happily tell you, the Avatar logo is a rip-off of Papyrus, a humble Windows font installed by default which has made all of the worst-font lists I’ve just linked to not necessarily because it’s an ugly font but rather because, like Trajan, it’s shamefully overused.
Oh yeah, and Titanic, previously the best selling movie of all time and also directed by Cameron, can you guess the font used on that was? Yup, Trajan.
Hollywood millionaires, as well of the rest of us, should note however that there are some fonts that are simply unforgivable whatever the circumstances; even an all-star summer action blockbuster from Jerry Bruckheimer wouldn’t have a hope of selling even one measly ticket if the posters all used Comic Sans.
Fonts and Web Design
Now this is where it gets somewhat confusing. If you’ve read those lists you’ll see many people bad-mouthing Arial and Times New Roman because they’re so common, which is true. With all those great professional typographic and artistic fonts out there that one can use for your graphic designs, why would you ever want to use the operating system defaults?
Well, the thing is, that very same ubiquity that makes printed materials so drab, is exactly what you want when designing for the web. Why? Because, whilst Windows is still the most common operating system, there are also millions of users out there with other operating systems and platforms such as Apple systems (like your friend the graphic designer might use), Linux variants, BSD, BeOS and many more besides.
Hence the reason that many of the fonts from the worst design fonts lists, like Arial and Helvetica, feature on many best web design fonts lists.
This list of cross-platform fonts shows which fonts are common to all systems, this article shows a list of Windows fonts and their Mac equivalents and this article shows you lists of fonts you can group together so that if the viewer does not have the desired font installed, your site can still be displayed with back up fonts.
Serif and Sans-Serif Fonts
The other factor that determines which fonts are good for print and which fonts are good for the web is a case of simple legibility. One must always remember that how we read off a screen is very different to how we read the printed word.
One of, if not the most commonly used fonts for print these days, is Times New Roman.
You probably know it best as the default font of Microsoft Word and the Microsoft Works word processor. Even if you’re a total technophobe you’ll invariably have come across it in books, magazines and any number of newspaper publications dating back to when the Times of London first started using it in the early ’30s.
Times New Roman is, whilst many fontophiles might not say the best example, is none the less an ideal example of a serif font. It has little tails and edges which our brains can easily scan though, helping us to read printed text easier.
Sans Serif fonts, on the other hand, which do not have these little tails and flourishes, are far better suited for screen because no matter what size they are, their basic shape is always exactly the same. They can be shrunk to fit smaller screens, such as mobile devices, or blown up extra large, either for big screens or so those with visual impairments can read easier. This is why you will usually see sans fonts on applications such as web and email applications. Also worth noting is that, whilst Microsoft Word uses the serif font Times New Roman by default for printed text, Excel uses the sans font Arial by default to make it easier on the eyes. Why? Change the text to Times New Roman next time you’re doing a spreadsheet and see how your eyes feel after an hour or so.
The Worldwide Web Consortium, the best practices and standards authority for web design, recommend in their W3C accessibility guidelines against using fonts:
…with extraordinarily thin strokes or unusual features and characteristics that reduce the familiarity of their letter forms are harder to read, especially at lower contrast levels.
Sticking to a clear sans serif font, like Verdana, Helvetica, Geneva or even just plain ole meat and potatoes Arial, this problem is easily avoided, though this is not to say that one should never, ever use serif fonts on the web, on the contrary it is best to use a combination of fonts, for example breaking up the text by using a sans serif font for the main text and a serif font for headers, as we have done on our website here.
There are also examples when using a serif font for the complete text is also advisable. One example might be for use on a PDF or downloadable eBook or any web document which is likely to be printed, or indeed the print-friendly version of a page or article. Another example might be for news content specifically designed to be read by pocket readers or mobile devices, rather than off large monitors, like say an iPhone app that displays newspaper articles or an eBook for the Amazon Kindle.
Rather than using Times New Roman, however, which can get a little spidery looking when its size gets messed around or when the screen resolution is below average, I would instead recommend using either Georgia which is clear, legible and nicely spaced, or another favourite of mine, Palatino.
Monospaced fonts
Anyone who has ever tried writing any sort of information in columns which need to line up exactly has probably faced the problem where different letters, particularly when capitalised, are different widths, so an A is wider than an I and so forth, thus making each text block look misaligned. For this reason we have another group of fonts known as monospaced fonts where
each letter is exactly the same width.
Perhaps the most common example of a monospaced font is Courier or Courier New, a serif monospaced font. Sans serif monospaced fonts include Lucida Console, Andale Mono and Consolas.
How to find the name of a font
For those who don’t happen to have a graphic design geek readily available but still need to find out the name of a specific font, What The Font? offers a handy little service to help identify it.
All you need do is select a URL or upload an image of the font (be it a web graphic, a scan or a photo) cropped to say, one word long, and upload the font, then click continue.
Next you will be asked to type in the letters as they correspond to each letter from the uploaded picture. Click continue and the page will display suggestions as to what the font might be. It’s very good at guessing them, but just in case it doesn’t get it right you can still hop over to the What the Font forums and get an answer from the resident font-spotters there.
Of course in the above example you don’t need to go to all that trouble because, having read this article, you’ve learned to recognise various different fonts and different types of fonts and you also know by now that if the font is on a movie poster it’s almost invariably, what?
Yes, once again, it’s Trajan.
“Avatar” – 2009 Twentieth Century Fox Film Corporation. “Titanic” – 1997 Twentieth Century Fox Film Corporation, distributed in the US by Paramount Pictures. “The Last Samurai” – 2004 Warner Brothers Pictures.
