Welcome to our web color community. Here you'll find the latest web-focused Palettes and Patterns, as well as Blog, Trends and Forums to help guide your next web design project.

Channels»Web»Blog
Color and Typography in Good Design

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.

Tenet image from flickr
Original image

Matt Webb

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.

Danny Blackman

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.

Inspiring

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.

invite.gif

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.

weight.jpg

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

weight2.jpg

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.


19 Comments
Showing 1 - 19 of 19 Comments

aaroncolter

Nice post, very helpful for those starting to design or looking to update bad formats.

retsof

grammar check:
The text is no almost unreadable.

retsof

My website was orginally written in Netscape 4 in pure HTML and was intended to be fast response, and read in multiple browsers. Lately, with the advent of broadband, websites are "supposed" to be flashy and fancy-schmancy, none of which was even readable in the old 16 bit browser. So much for text and content. All of the new "enhancements" may be "cute", but do little for the blind disabled user trying to interpret it with speaking software.

Thanks for the post emphasizing simple, contrasty text.

manekineko

For me, a site has a "good design" when it "makes money"

If it's not helping the bottom line, it's a bad design no matter how trendy it looks.

subsomatic

@manekineko: perhaps 'good design' for a blog, but there are many sites out there that are not geared towards making profit.

A great post, Stephen. You've encompassed a lot of modern trends and principles that make the web a better and more legible place :)

Just Perfect Color

Excellent post. I would add that designers should consider line length as well. The ideal for readability, as I remember, as an alphabet and a half in the font and size selected especially in running text. Obviously you cannot carve this in stone but it is a starting point.

deedee914

My synaesthesia doesn't allow me to read those magnetic letters in that image the way most people do. My brain has already mapped distinct colours to certain letters and numbers. As a kid this was a huge problem for me because my parents tried to teach me using these same things and they thought I had some learning disability until a very intelligent doctor figured out my problem. Funny but typography is something I struggle with online when trying to read. Funny because I'm also a web designer for a very large internet company. (Yahoo!)

manekineko

@subsomatic & Steven Snell
The reason the non profit sites can afford to be there at all is because of the ones that do. This site itself will eventually collapse if it doesn't start making money, and most all paying clients are going to expect some sort of ROI. It's misleading to just leave all that out of an article like this.

This seems like Web 1.0 happening all over again - rock star designers interested in self promotion as opposed to making sites that actually drive the economy, which is why the web has succeeded at all.

Most everything needed is at useit.com, most newly produced articles of this nature seem to mostly be unmeasurable aesthetic stuff that has no real basis in web GUI design beyond promoting fads and personal careers.

electrikmonk

i could add to this topic non-stop for days, but i just wanted to add for the younger designers out there: something that helped me the most with web typography and colour is to not limit yourself by strictly adhering to a company's corporate colour standards when working on their website. more times than not, the "correct" colour scheme does not visually translate accurately when applied and rendered to the varying weights of a strong typographic hierarchy. don't be afraid to use alternate levels of saturation to enhance the variations between sizings (h1 vs p), weights (strong/b vs regular vs i/em), and background imgs/colors. going with what looks and feels correct rather than what the exact hex should be will lead to richer and more visually stunning results that will give you better control of users attention and extend the brand to feel at home and more comfortable in it's pixel pajamas than the cmyk suit it usually has to wear while working. a great (and relevant) example of this is COLOURlovers - scroll around with an eyedropper and count the variations of blacks/greys/whites used for the type and backgrounds and borders, oh my. there are definitely more of each than the previous iterations of the site as more information is needing to be presented and your attention has more information it has to sort through.

subsomatic

@electrikmonk - thats for the tips - far too often I think in constraints of corporate colours based on their print media, which, you're right, doesn't always translate.

@manekineko - i agree with you 100% when we're talking about the web industry and business, but sometimes stuff on the web is just for fun. I'm not talking necessarily about client sites...

watchthesky

thanks for the article....great advice!

settsu

so help me... if I read another article/post on web typography on a site with gray text...

supakow

InviteShare.com's problem is a lack of proper png handling by IE6. Left uncorrected, it completely destroys both the visual design and the readability of the page.

modsupremo

Great post!
Thanks a million!

electrikmonk

"settsu wrote
so help me... if I read another article/post on web typography on a site with gray text..."


- it's a pretty complex set of grays there buddy - might want to check the hex before you condemn someone else's hard work.. .

ooPeriwinkleoo

Myspace users should take this article into DEEP consideration.

bkili

I really enjoyed this article. I hope they post more type and color articles.

citrusshood

Thanks a lot for good article

Post a Comment

You must be logged in to post a comment.

Search The Blog

Subscribe & Share

Our Latest Tweets

Latest Web Blog Posts

//View More ›

Tags

Latest Web Colors

//View More ›

Latest Web Palettes

//View More ›

Latest Web Patterns

//View More ›