Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. COLOR & TYPOGRAPHY SARAH FUNK COM 585 2008.2.26
  2. 2. WHAT IS TYPOGRAPHY? This video explains the basics.
  3. 3. Visual interfaces should: <ul><li>Use visual properties to group elements and create a clear hierarchy </li></ul><ul><li>Provide visual structure and flow at each level of organization </li></ul><ul><li>Use cohesive, consistent and contextually appropriate imagery </li></ul><ul><li>Integrate style and function comprehensively and purposefully </li></ul><ul><li>Avoid noise and clutter </li></ul>FROM COOPER:
  4. 4. Rousseau’s steps for successful design <ul><li>Noticed </li></ul><ul><li>Encoded [decoded] </li></ul><ul><li>Comprehended </li></ul><ul><li>Complied with by user </li></ul>
  5. 5. Color contrast vs. type size <ul><li>“ A message in 4.5 point type with black on white contrast was more easily read than the same message printed in 6 point type with yellow on red contrast. These results indicate that color contrast can have a greater impact on legibility than type size. ” - From an experiment conducted at the Michigan State University School of Packaging ( Lockhart & Bix , 1997 ). </li></ul>
  6. 6. Hello. Can you read me?
  7. 7. This is a lot harder to read. Hello. Can you read me?
  8. 8. Sans serifs vs. serifs
  9. 9. Sans-serifs <ul><li>&quot;Sans serif type is free of visual distractions&quot; ( Garcia, 1981 ) </li></ul><ul><li>“ A crisp sans-serif font such as Verdana or Tahoma is your best best for readability” (Cooper 2007) </li></ul>
  10. 10. Serifs <ul><li>“ [Serifs] contribute effectively to the horizontal movement of the reading eye and thus help in combining separate letters into word-wholes&quot; ( Perles , 1977 ) </li></ul><ul><li>“ Letters with serifs are more easily differentiated by readers than letters without serifs” (Bix, 2002) </li></ul><ul><li>“ Serif type is a lot easier to read than sans serif type” (Greenzweig, 2006) </li></ul>
  11. 11. Typography + Images <ul><li>“ Formerly, the image illustrated the text (made it clearer); today, the text loads the image, burdening it with a culture, a moral, an imagination” ( Meggs 41) </li></ul><ul><li>“ The wrong text with a particular image, or the wrong image with a particular text can have disastrous consequences in the meaning and clarity of the information.” (Greenzweig, 2006) </li></ul>
  12. 12. Visual noise & clutter <ul><li>“ Visual noise within an interface is caused by superfluous visual elements that distract from the primary objective of directly communicating software function and behavior” </li></ul><ul><li>“ Cluttered interfaces attempt to provide an excess of functionality in a constrained space” </li></ul>FROM COOPER: Example >> Microsoft packaging
  13. 13. Bonus article David, C. & Richards, A. (2005). Decorative Color as a Rhetorical Enhancement on the World Wide Web. Technical Communication Quarterly. 14(1) 31-48. Our reaction to color in art, design and our general surroundings can be described as emotional, rhetorical and psychological. Modern computer monitors are able to display 16 million colors along with the seemingly never-ending supply of information provided through the internet. Designers are using established color theory to elicit emotion-laden reactions from the electronic media audience. The article's accompanying website.
  14. 14. -FIN- SARAH FUNK COM 585 2008.2.26