Act-On Adaptive Web

Typography Matters

Article Outline

Marketers use all kinds of art elements, color schemes and graphics to convey mood, emotion, and character on websites, in emails, in signage, and in all kinds of collateral. Unless you have a designer on staff or on call, typography is one opportunity to get it right (or wrong) that’s often overlooked.

When someone opens an email or makes their first visit to your website, they form that first impression about your organization before they read one word. The right font can help tell your story correctly; the wrong font can make you seem unprofessional, sleazy, or just plain sloppy. Size and color can completely change how a typeface looks. Depending on how it’s used, a font can shout…or whisper.

Font basics

Most fonts are either serif or sans serif, depending on the weight of their strokes and whether their letters have “feet.”

Books, magazines, and newspapers generally use serif fonts, as they’re considered more readable for large blocks of text. Sans serif fonts are more readable on a computer screen. There are many broad groups of font families; here are the five most common font groups used for business:

  • Geometric sans fonts such as Helvetica, Franklin Gothic, and Grotesk are symmetrical in design and uniform in dimension. They look modern, but can also come off as cold or impersonal, and are better suited to a high tech software firm than a neighborhood daycare.
  • New Humanist sans fonts such as Verdana and Optima were developed from 500-year-old Humanist serif fonts based on the handwriting of medieval scribes of Italy. These tend to feel more casual, while still keeping an edge of sophistication.  These give an appropriate feel for companies that revolve around the Internet.
  • Old Style serif fonts, such as Garamond and Jenson, are direct digital translations of old-fashioned typefaces. To readers, they seem – for better or for worse – very traditional and baroque. They’re good for organizations that emphasize the humanities, such as museums and colleges.
  • Traditional or Modern serif fonts, like Times New Roman and Bodoni, are more current translations of the Old Style Family, and may seem either stylish or conspicuous, depending on the medium. They’re best utilized in places where it’s important to project a sense of quiet knowledge. (Don’t forget that Times Roman has been a default font for eons. Using it may give the impression that you didn’t consider font choices at all.)
  • Slab serif fonts, like Courier and Rockwell, have very thin strokes, yet carry thick serifs. If used correctly, they can convey a very avant-garde tone. They can be used for trendy places, like Urban Outfitters-esque stores or that new organic restaurant down the street.

More information about font groupings can be found at Typedia. And here’s a lovely post about typography and perceived personality.

Make sure your font choices are computer- and Internet-friendly

“Web-safe” fonts are those installed on a wide range of systems. Using these increases the odds that your content will be displayed the way you intended it to be. If a visitor to a Web site or the reader of an email doesn’t have the font you specified, their browser or email client will try to substitute any fallback fonts or generic families you specified; failing that, it will display whichever default substitute is defined by their operating system. (It could get ugly.) Here’s a list of Internet-safe fonts:

Arial, Comic Sans, Courier, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana. (Georgia and Verdana were actually designed specifically for computer readability.) If you’re designing for mobile, you can leave out Impact and Comic Sans (which should be avoided at all times anyway, as it is a near-universal sign of font defeat).

Here’s a chart of pre-installed fonts on Apple, Linux, and Microsoft operating systems, so you can check on a favorite we didn’t list. If you have something you need to say with type that’s outside the web-safe font list, consider creating an image rather than trusting to luck.

Line weight and color

Bold indicates importance or urgency; use it sparingly. Use color to draw the eye, impart a subconscious message, or reinforce your brand. Use too much, and the eye won’t know where to look first.

A few fonts to avoid

There are a few fonts that work well only in very specific contexts; they are best avoided for general use. Here are three:

  • Courier: The favorite of government correspondences and ‘50s messenger boys, Courier hearkens back to a time when people actually typed on typewriters (crazy, right?). Unless you want your message to feel like a recently declassified CIA document or an Associated Press wire about Eisenhower’s bid for reelection, this is a font you should use sparingly.
  • Times New Roman: This might be a surprise to some, considering it’s the default font on every version of Microsoft Word until about 2007. But this is exactly why you should avoid Times New Roman: it looks outdated. It makes customers think of frustration and fifth grade essays and dial-up internet, and those are hardly ideal conditions to make them want to buy a product.
  • Comic Sans: Nothing screams “unprofessional” quite as loudly and desperately as Comic Sans does. The preferred font for soccer party invitations and garage sale notices, and the only time you’ll ever need Comic Sans is to make fun of it. Supporters of Comic Sans might argue that they use it to make their message look more casual, but its informality comes off as forced, like that guy who tries just a little too hard to be hip.(In all fairness, Comic Sans has its defenders, too, such as the people in this music video.)

Comic Sans poster by Angel. A. Acevedo, used by permission under a Creative Commons 2.0 license.

What's New?