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.