Mixing Fonts and Colors

Limit the number of font styles on your site and apply them consistently. Use font styles as a subtle and effective way to create order and communicate hierarchical elements on your site. Items that appear graphically similar have the same level of emphasis.

Limit the number of font styles and colors on your site and apply them consistently. People don't trust sites that look like ransom notes.

Varying fonts and font attributes can help people differentiate between the relative importance of headings and information. Assign different attributessuch as boldface, color, and sizeto a specific typeface for emphasis. But do this sparingly; when everything is highlighted, nothing is emphasized.

The same rules apply to color. We recommend having no more than four different colors and three typefaces in the main areas of your site or it will appear unstructured and unprofessional. People don't trust sites that look like a ransom note.

This is an example of the overuse of typeface attributes. It's not clear why some typefaces are bold and in different colors. Colors and attributes should be used sparingly and for a reason.

www.nestle.com

Count the number of different typefaces on this page. With so many labels calling for your attention, it's difficult to know which to give it to.

www.sandiego.gov

(Facing page, top) The number of colors and font styles combined with the pictures and graphical and background elements make this page too busy. Use visual design elements wisely, to help communicate and create order, not just to decorate the page.

www.money.cnn.com

(Facing page, bottom) The Terms and Conditions on this site are written in all capital letters, creating an illusion of a wall of text. We know that people tend to skip over Terms of Use agreements, and showing them in all caps makes them even less appealing to read.

www.bedbathandbeyond.com

The blue text in all caps forms compact blocks of text that are difficult to scan. The three-column format results in awkward word wrapping, and starting links with "CLICK HERE FOR" is superfluous. People know that lnks are meant to be clicked.

www.cendant.com

The Case Against Caps

ALL-CAP TEXT REDUCES READING SPEED BY ABOUT TEN PERCENT. MIXED-CASE LETTERS HAVE VARIATIONS THAT BREAK UP THE TEXT INTO RECOGNIZABLE SHAPES, WHEREAS A PARAGRAPH IN ALL CAPS HAS UNIFORM HEIGHT AND SHAPE, MAKING IT APPEAR BLOCKY AND RUN TOGETHER. ALSO, THE USE OF ALL CAPS CAN SEEM CHILDISH AND AMATEUR, OR AGGRESSIVE OR UNPROFESSIONAL. RESERVE ALL-CAP TEXT FOR SHORT HEADINGS AND TITLES, AND FOR SHOUTING.

There's no need to show the title of financial releases in all capital letters. Mixed-case words are easier to read, especially with low-contrasting text and underlined links.

www.homedepot.com

Text and Background Contrast

Along with the right typeface and size, the right color contrast ensures legibility and readability on your site. Remember, reading online is much more difficult than reading on paper. Highly contrasting text and background colors make it easier.

Black text on a white background or something similar is easiest to read. In general, dark colors are best for text, and cool, desaturated colors are best for backgrounds.

Even though white text on a black background has the same contrast as black text on white background, readiblity isn't as high, especially at small sizes. When the colors are reversed, the white edges appear blurred. To overcome this effect, you must increase text size to at least 12 points for some fonts. If dark backgrounds can't be avoided, you can alleviate the problem by choosing a dark color other than black. Even though the contrast is slightly lower, it is less blurry.

Avoid using similar colors such as light gray on white backgound. Low contrast can cause eye strain and discomfort. This problem is intensified for people with poor vision, who have more difficulty seeing letters or pictures against backgrounds that have a similar hue or intensity.

Dark colors are best for text, and cool, desaturated colors are best for backgrounds. Low contrast can cause eye strain and discomfort.

Be careful about using vibrant color combinations such as purple and yellow. While such colors are technically high contrast, bright colors cause a vibrating effect on computer text that can make it difficult to read.

Nothing screams out amateur more than a busy background. Don't do it. Not only does it look bad, but text set in a busy background decreases readabilty. Save yourself and your audience the headache. As one of our test users bluntly put it: "They picked the wrong color for words. The background is bright and the text is bright, so it's difficult to see. Sometimes your eyes blend the colors. It ruins your eyes. It gets tedious when you have to highlight the text to read."

Readability Level of Different Color Combinations

(Below) This homepage contains a large number of links. However, the careful organization and clean design facilitate scanning. The sparing use of color to denote headings and links draws people's eyes to areas they care about. There is a background "watermark" image behind the text, which we usually warn against, but it's subtle and not overly distracting.

"The colors are great because I can find things easier."

www.socialsecurity.gov

People disliked the use of red text on this page because it was glaring and difficult to read, especially against a yellow background. The difficulty of reading bright colors can cause eye fatigue.

www.staff.amu.edu.pl/-zbzw/ph/sci/msc.htm

(Facing page, top) This site is visually appealing, but the text is too small and the contrast insufficient. The white text on dark background appears fuzzy even for people with normal vision.

www.atlantis.com

(Facing page, bottom) Users didn't like the navigational areas because the text and background colors are too dark and low in contrast. Even the dropdown list has low contrast. Not only is it difficult to read; it is aesthetically unappealing.

"This dark color is very annoying. Because it's blue on blue, it's almost invisible. It doesn't catch your eye. Even the interest checking account is muted. Everything is dark and gloomy, like Gotham City."

www.dimewill.com

Here's an extreme example of poor contrast. If you happen to have a low-resolution monitor or your screen settings aren't properly optimized, you might not be able to see this page at all.

www.gdarchitect.com

(Facing page) The small writing coupled with the light-colored text on the Nestlé site made reading difficult for some of our test viewers:

"The writing doesn't seem to stand out. A light blue on white background doesn't stand out. You have to peer into the screen to see what you're looking for."

www.nestle.com

Common Color Blindness

Bear in mind that approximately 8 percent of men and .5 percent of women have some form of color blindness that prevents them from differentiating certain colors. Red/green color blindness is the most common. People with red/green defective color vision cannot distinguish colors that fall within the middle and long wavelength range.

Two Ways to Make Colors Pop

• When possible, use black and white color combinations, or use colors that vary significantly in intensity. A rough way to test whether or not your color choices are distinguishable is to view your screens in grayscale. The important elements on your page should still be discernable in grayscale.

• Provide a secondary cue when you use color to distinguish important information. This is especially necessary if red and green are among the colors used.

You want colors to be perceived as they are presented, especially when color is used to convey meaning. Choosing the wrong color combination, such as red text on green background, can make it impossible for some people to read because the text and background color is perceived to be the same.

Yahoo! uses color-coding to give users a quick view of whether stocks are up or down. At the top of the page, green helps indicate that the general stock market was up the day this screen shot was taken. If you are color blind and can't discern green, you can still intepret this by the secondary clue of the plus sign. The main stock was down that day, as signaled by the color red. Again, a secondary cuethe arrow pointing downhelps color-blind users. In principle we would prefer consistent notation: either arrows or plus and minus signs. But in practice both notations are clear, and this minor inconsistency in the user interface is not likely to cause any usability problems.

finance.yahoo.com