Designing Websites with Readability in Mind

Have you ever visited a website that was so hideous that you immediately clicked the back button on your browser? It didn’t matter how much the site fit your search terms, or how awesome the content of it might have been, you were out of there. A site will gain or lose a visitor within seconds, often depending on how easily readable the content on your site is. Whether you’re designing a huge site like the next youtube or just promoting your little online school, if your website is not designed with readability in mind, most visitors will not even make a halfhearted attempt to read your message.

Some Tips for Readable Designs

In his study on Color Combinations and Readability, Dr. Richard H. Hall of Missouri S & T indicates that darker text on lighter backgrounds rates higher for readability than do other contrast combinations. Though black text on a white background is traditionally accepted amongst web designers as the ideal for readability, his studies indicate that other high contrast color combinations, such as dark blue on light blue, might work just as well from a readability standpoint. The W3C has published an algorithm that may help web designers determine if the color contrast between text and background is sufficient from a readability standpoint.

Font choice can also have a huge impact on readability. A good monospace font, like Courier, is more easy to read than any highly ligatured fantasy font. Serif fonts, like Times New Roman or Verdana, are also popular choices for readability. All of the aforementioned fonts are commonly available on client machines regardless of OS.

Most modern web browsers will allow users to adjust the text size to a more comfortable level. To take advantage of this feature, web designers should set font-size using relative measures of ems (em) or percentages (%). Absolute measures, such as the commonly used pixel (px), may prevent visitors from resizing text. Your audience may abandon you if you do not make it easier for visitors to resize any small text on your pages to a more comfortable level than it is for them to just hit the back button on their browser and go to another, more user friendly website.

Besides these text-based points, readability is also influenced by the images on a site. Just think of a generic MySpace page with the blinking text, animated graphics and autoplaying music. Though these bells and whistles might have been considered exciting and flashy in the late 90s, most web designers now know better than to use them. However, the reasons that these are terrible design choices still apply. Excessive clutter, whether it’s several images or discrete blocks of text, directly affect the readability of a site. A websurfer’s eye scans rather than actively reads, and any interruptions to this activity may cause them to write you off. Use negative space to your advantage, and you will get a much more professional look and less that of the flashy used-car-salesman of the internet.

The Importance of Readability in Website Design

Perhaps even above beautiful graphics and good placement, readability is one of the most important factors in website design. If you fail to account for readability in your web design, preferring instead exciting fonts or flashy images, you have failed to take into account true aesthetics. If you pay attention to color choice, fonts and clean layouts, you will be that much closer to creating truly beautiful websites.

top image credits: Mike Rohde