As webdesigners, there is one question that we get more than any other from people thinking about their first website: “Can I use my favorite ultra-rate XYZ font?”
The answer, more often that not, is “unfortunately not”. In this post, I’m going to give a quick overview of what you need to know about web-fonts for your website.
Fonts on the Web
A website is a billboard not a magazine
When you’re driving at 80mph its going to be really hard to see any fancy fonts or any calligraphy. Even though billboards are around a hundred of feet wide, the best designs are often no more than a simple image and a website address. Imagine that your website visitors traveling are also traveling at 80mph (mentally at least).
Unlike magazines where people can let their eyes linger on an advert, visitors make decisions about your website in the blink of an eye…
- Do I like this site?
- Can I easily understand what its saying?
- Is it easy to read and restful on my eyes?
A website has to work in lots of environments
Websites need to work on PCs that run about 5 different kinds of Windows Operating Systems (Vista, Windows 98 etc.), plus an assortment of Macintoshes and Linux computers, plus handheld devices. Oh, and did I mention that there are at least three important versions of Internet Explorer, plus other web browsers such as Firefox, Safari, Opera and others?
Basically, designing for websites sometimes involves lowest-common-denominator thinking.
What Website Fonts Can You Choose?
OK – I’ve spent a long time explaining that the fancy-pants squiggly calligraphic font you really like might not be a great idea. But, what fonts can you use? There are five available kinds. The first three are much more common than the last two:
These have little tails on the end of letters. Book Antiqua, Garamond and Georgia are examples. All usually end up as Times New Roman on web browsers.
These don’t little tails on the end of letters (sans means ‘none’ in French). Arial, Century Gothic and Tahoma are examples. These often end up as Arial on a PC and Helvetica on Mac, but Verdana is also commonly used.
These have a mechanical look because each letter has the same space, whether its an I or a W. Courier is the default setting for most browsers.
These try to look like they were handwritten. Comic Sans MS is the default.
These are much more stylized. For example, Playbill looks like it was written for an old Wild West poster and Impact, well … its short and punchy. Impact is also the default setting.
Feel like this is a restricted choice? Yes, unfortunately it is. It’s a limitation of the genre. Magazine adverts have to be inventive and eye-catching on a single A4 page and TV commercials have just 30 seconds. Your website needs to hold your visitor’s attention with one of the few fonts outlined above.