Using Color and Type
March 4th, 2008 by kip0130Along with type you can use color to convey your point but at the same time maintaining readability and function. We all know how to use fonts and most of us know how to use colors but can we use them together?. Of course we can! let me ask you a question ” have you ever had to design some form of print media where you had to attract people with type?” I have and so will you or maybe you already have. It can be a very daunting task and some people resent it. But it also applies to web design in web design to have people poke around your site and stay and possibly come back again you need to use color and typography to make it seem inviting. A great example of this site is Freelanceswitch. The site uses colors that are appropraite to the fonts and i can easily loose a day or two poking around finding new things.
The Rules
Now before you can go happy go lucky with text and colors you have to avoid a few things these things not only better your design but also make it accesible to people who normally have bad eye site. The rules are the following:
- Avoid light on light color combinations for example. White and light grey it just doesn’t work. what if my screen was poorly calibrated and it couldn’t tell the difference between the white and the grey? ( fig 1)
- Avoid Dark on Dark combinations for example Black (or dark grey) and another shade of dark grey. again i make the monitor calibration point. (fig 2)
- Avoid Neon sign age , which is the say Neon blue with neon yellow type (fig 3) it hurts the eyes and makes text further unreadable.



Dont use theese they make your work look bad and tend to Push users away
Make sure theres plenty of contrast between Your typeface and background providing sharp contrast and don’t be afraid to break the white on black norm and the black on white reverse.
Printers we have a problem!
When printing you will come across a common problem: what you see on screen is not what you get on paper. thats a common mistake and is usually caused by improper screen calibration ( another problem in web design.) The solution is simple i highly recomend the Processs Color Manual 24,000 CMYK Combinations for Design, Prepress, and Printing. It has all the CMYK values you need to make your colors look the intended way on paper but not on screen sometimes. Another tool that is useful but has to be replaced yearly Are pantone booklets which you can get for free at a paint store. Once you have that squared away its time for hierarchy.
Its all about the order…
To pull users into your web design or print media we use a structure called hierarchy it applies every wheres in design and coding to provide seamless results. The font I’m going to be using is called Byington ( its a serif).
Below is the use of hierarchy to draw in masses…

Popularity: 51% [?]