Color and Typography in Good Design

Typography is a significant issue for designers. On many projects, finding just the right font, size, spacing, etc. can require considerable time and attention. In addition to typography, color is also a major factor in the success of the design. What is sometimes overlooked is the combination of color and typography and the effect that it has on the overall project.

Font Size, Line Height & Contrast

Before we even get to the color and contrast elements of typography, we first should look at how dramatic a small font increase and line height increase can improve readability and reduce eye fatigue. The first example below uses 11pt font with matching 11pt line height. The second example uses 12pt font with 13pt line height. Example two is significantly easier to read.

Example 1: (11pt Font, 11pt Line Height)
The next moment a hideous, grinding speech, as of some monstrous machine running without oil, burst from the big telescreen at the end of the room. It was a noise that set one’s teeth on edge and bristled the hair at the back of one’s neck. The Hate had started.

(12pt Font, 13pt Line Height)
The next moment a hideous, grinding speech, as of some monstrous machine running without oil, burst from the big telescreen at the end of the room. It was a noise that set one’s teeth on edge and bristled the hair at the back of one’s neck. The Hate had started.

Even with well sized type and line heights, choosing a font color and background color with low contrast can make reading difficult and stresses the eyes of the reader.

(12pt Font, 13pt Line Height – Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

More Bad Contrast Examples:

Example 2: (12pt Font, 13pt Line Height – Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

Example 2: (12pt Font, 13pt Line Height – Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

Bad Color Choices:

Example 2: (12pt Font, 13pt Line Height – Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

Example 2: (12pt Font, 13pt Line Height – Low Contrast)
The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours.

Together, color and typography can create a strong visual impact that either subtly or strikingly contributes to the design and cues the reader. Different colors and strategies can cause different reactions from readers and lead them to see the same text in different ways.

Color can be used to make certain text stand out or draw the attention of the eye. Of course, we’re all familiar with examples where a different color is used to make a particular word or phrase stand out (similar to the affect of bold text), but there are other possibilities here.

Contrast:

When choosing colors for typography contrast should be one of your major considerations. Contrast applies to the font in comparison to the background as well as in comparison to the other font colors. If you are using contrast between two font colors, using the one color sparingly will have stronger impact by drawing attention to fewer words.

The image to the right is an obvious example of color causing text to stand out. The red text on white background jumps out from the screen due to the strong contrast, while the gray text seemingly stays quietly in the background. If the text was all one color, of course nothing would stand out and draw the eye. The next image is a great example of the power of simply changing font color. Matt Webb is a freelance designer whose homepage has a short message.

Original image

By changing the color of 5 words to a color that contrasts the other gray text, he causes that statement to catch the attention of visitors. Even better, he proves his point that simplicity is a good thing since he catches your eye with a very simple design/color element.

Visual Appeal Without Pictures:

Typography and color combined have the potential to give a design an attractive and interesting look without even using pictures. Below is an example from DannyBlackman.com. He uses three different, vibrant colors to create a nice visual appeal to a simple design.

Enhance Your Message:

With the combination of typography and color there are endless ways to display your message, and obviously some will be more effective than others. As I was recently surfing the example below really stood out to me.

The homepage for Acsys uses a script to display a random image and message. The one shown above uses a large font size to cause the one-word statement “inspiring” to stand out. This is a great example of using typography to create a powerful message in the mind of visitors that you want them to associate with your business.

Readability:

When dealing with contrast and color decisions, readability is important. Whatever design you decide on should allow for the text to be easily read. Each design medium is a little bit different. For web design a common example is the contrast between link colors and background colors. Most websites make use of color to style links, and many times also style them with a different color on hover, but the link color should always be readable for visitors. If the colors and contrasts interfere with the readability it will be a negative impact instead of a positive impact.

For web designers, different browsers can also cause readability issues. The example below is taken from InviteShare.com. In Firefox the page displays with no problems, but in IE 6 gray boxes appear behind the text that makes it nearly impossible to read.

Another similar example comes from a weightshift.com. The first picture shows the page as it appears in Firefox. The dark background that lays on top of the image and behind the text makes it readable.

In IE 6 the dark background is gone, leaving the reader with a very difficult time. The text is no almost unreadable.

Conclusion:

Next time you are working on a design of any kind, think about the typography and colors and how you can create the reaction that you want. Experiment with different combinations and see if you can find the right one.

This is a guest post from Steven Snell, who maintains a blog at Vandelay Website Design. Steven updates his blog frequently with articles on web design, marketing, social media and blogging.