I am a huge fan of good typography. That being said, there are very few typefaces that I really love. And there are a few widely-used fonts that I just can't stand. Sure, there are lists out there decrying the use of Comic Sans and Papyrus. That goes without saying by now, right? This isn't that type of list. This is a list of fonts that are otherwise perfectly acceptable by most designers. In fact, most people who read this list will think I'm crazy or just don't know anything about typography.

I'm not advocating that these fonts be completely uninstalled from all computers. Non-designers should feel free to mess around and use these fonts if they like. But designers can do better. Without further ado, let the countdown begin:

5. Futura

Ok, everyone can stop yelling at me now. Let me explain. Yes, I can't stand Futura. Sure, it looks great in diagrams and charts from old biology books from the 60s. But it is old and tired. There are much better choices for us now.

Recommended alternatives: Helvetica, Myriad, Frutiger

4. Trajan

This typeface should be reserved only for use in epic blockbuster movie titling. Maybe the reason I don't like Trajan is because I also hate the use of small caps. Again, there are simply better choices out there.

Recommended alternatives: Garamond, Goudy

3. Avant Garde

Another tired font that perhaps was once a great choice, but is now tired and over-used. According to Wikipedia, the term avant garde is French and "refers to people or works that are experimental or innovative, particularly with respect to art, culture, and politics." That's why we should stop using it. If we select this font, we're going out of our way to be perceived as "innovative". Let's put an end to that nonsense.

Recommended alternatives: Helvetica, Gothan, Din, anything else really

2. Lobster

We can all thank the Google Font Directory for this one. This font just screams "cliche" to me — in a really loud and annoying voice. Perhaps if you are making a logo for a restaurant, that may be the only acceptable use. I don't know, if you have a business that actually does involve lobsters, then maybe you can get away with this, but otherwise steer clear.

Recommended alternatives: Fan Script, Candy Script, Bello

1. Gill Sans

This is most likely the worst of the bunch. The only problem is I don't really have a good reason for disliking this font. But I just can't stand it. I have uninstalled it from my computer due to its offensiveness. Doing a Google search just now to look at some examples just makes me angry. Its so wrong in so many ways, I can't even begin to describe what I don't like about it. Typography kryptonite for sure.

Recommended alternatives: Helvetica, Gotham, Trebuchet, Museo, Facit, Din ... heck, even Arial is better!

Someone asked me the other day what the difference was between my work (or someone like me) and a high school student that is dabbling in web design. Questions like this frustrate me at first, but upon further thought I welcome them as an opportunity to educate people about what I do. As I thought about the answer, the first thing I thought of was "the ability to avoid cheesy design". I admit, that sounds trite, but the more I thought about it and the more I thought about good design, I started to realize it may be true, at least in some respects. I think the real answer to my friend's question is: the knowledge of the principles of good design and the ability to execute those principles.

I believe design on the Web is all about communicating a message. Since the Web is (mostly) a text-based medium, the ability to read the message is critical. Therefore, it follows that good design is about readability. Do you agree with that? It does seem a bit simplistic that it could be reduced down to one such component. Perhaps, but when you think about all the different factors that influence readability, you begin to see how it is the common thread woven throughout the tapestry of modern design on the Web.

So what are these factors that influence readability? Well, there's probably quite a few and they can probably be named, organized and described in a hundred different ways. I was able come up with 5 factors that I think greatly influence the readability of online text: Color, Typography, Whitespace, Imagery and Accessibility. I'll briefly describe each one of these and talk about how they contribute to readability and, ultimately, good design.

Color

The color of text and the relationship of text color to the background color greatly effect readability. If the contrast between foreground and background is too low, readability plummets. Too much color can adversely effect readability as well. The human eye is attracted to color, so it must be used judiciously so as not to draw attention away from the intended message.

Typography

Good use of typography is paramount to good design. And achieving a high degree of readability involves much more than selecting a pretty typeface. On the web, your menu of typefaces is somewhat limited to the handful of ubiquitous typefaces available on almost all operating systems - sans-serif selections such as Arial, Helvetica, Lucida, Tahoma, Trebuchet and Verdana and serif options of Georgia and Times New Roman. I tend to believe its not so much the typeface, but you do with it that matters. The number of typefaces and font styles (italic, all-caps, etc.) used in a single design a contribute to readability. As in so many cases, less is more and a simple approach probably works best in most situations.

Line height and line length are an oft-neglected aspects of typography that can make or break a design, regardless of the typeface. Line height is the amount of space between lines of text, while line length is how wide a single line of text stretches across the screen. Richard Rutter has an excellent article on Vertical Rhythm that explains how to achieve optimal readability with line height.

Whitespace

Yes, whitespace - or more accurately, negative space - our long lost friend that keeps a design clean-looking and clutter-free. Too much whitespace can make a page look awkward; not enough of it will make your design look cramped, where all the text on the page is vying for attention and nothing stands out. Finding the right amount of whitespace is not difficult and gives design a polished, professional look, while allowing a user to comfortably read the intended message.

Imagery

Like color, images have an attractive pull on the human eye. Given a page full of text with one image on the page and our eye will immediately be drawn to the image first. A good designer can use that physiological bit of information to his or her advantage by the strategic use of imagery in web design. Subtle imagery is great at providing a framework for holding chunks of text. Imagery used within blocks of text can also help draw the eye to an important piece of information. Discretion using images is laudable, since too much visual stimulation can adversely effect readability.

Accessibility

Understanding accessibility involves a certain knowledge of code and how that code is read by other devices other than a Web browser. A good designer understands this and takes steps to ensure the code is written in such a way as to maintain readability in alternate devices, such as PDAs, mobile phones and screen readers. Limiting your message to only those using a modern Web browsers is short-sighted in this world of fast changing trends and technology. While the first 4 principles were about readability of the words the user sees, accessibility is as much about readability by machines or devices. If code is written according to WCAG guidelines to help devices, like a screen reader or mobile phone, read the code then its pretty likely that a search engine algorithm will be able to accurately read the code, leading to increased "findability" in the search engines.

Putting It All Together

So there you have it, 5 principles of good design guaranteed to enhance the readability of a Web page. Remember, readability is a fundamental aspect of how well users interact with content on a Web page. Providing a situation where reading the content on a Web page is completely natural and comfortable will go a long way toward not making the reader think about what to read and how to read it and whether or not they should read it at all.

Next time you look at a Web site think about how readable the text is and how color, typography, whitespace, imagery and accessibility are all working together to make that happen. That's good design.