Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
Designing With Typography and Color
weirdguy
follow
0
12-20-2007 10:06 AM
265 views
weirdguy
says:
Every designer wrestles with the use of good typography. In print and especially on the Web, type can make or break a design.
Add a Comment
Login
to Comment. Not a member yet?
Sign up
Related Clips
AP: Palin attack "exaggerated" or "outrigh...
Europe Vows To Fight Financial Crisis
Biologically inspired unique design
The Real Americans
The brain parasite that influences human c...
Health Care Destruction
Forecasts for the 25 Years...
More clips from
weirdguy
How To Rock Trade Shows!
10 Tips for Communicating Globally
Virtual Teamwork Gets A Whole Lot Easier
Today's Top Clips
Women: Just so darn tempting.
Beauty in Decay
Bet you didn't hear this on Fox News!
Iceland in Meltdown Disaster
Cannabis less harmful than drinking, smoking: report
Say it ain't so, Sarah: Palin kicks off lying spree
Audrey Hepburn Screentest - Wait for her smile!
Pray or Go To Jail
Has Slippery Sarah ever answered a question?
Army Times: details of martial homeland security plans
visit the
Top Clips page
View the Top Clips from
December 20, 2007
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/58a667de-0f0d-43cd-ad4b-911588059cbc/D0F648D2-C223-41FB-8ACC-BEF4E68A6BAB/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/" href="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/" style="font-size: 11px;">www.colourlovers.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><H2>Font Size, Line Height & Contrast</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/">Bad Contrast Examples:</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><P> <STRONG>Example 2: (12pt Font, 13pt Line Height - Low Contrast)</STRONG> 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. </P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><STRONG>Bad Color Choices:</STRONG></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><H2>Contrast:</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.colourlovers.com/img/B2E2FA84-899C-4738-AB4C-D33A4DD26E05" alt="Tenet image from flickr" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.colourlovers.com/img/25956FC8-9BBB-4D83-BEFB-C51539AA87F8" alt="Matt Webb" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><H2>Visual Appeal Without Pictures:</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.colourlovers.com/img/C44772A9-23E7-4D47-8DF8-5837C2EBA95B" alt="Danny Blackman" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><H2>Enhance Your Message:</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.colourlovers.com/img/8C6019AB-F977-4B0F-9426-D8420191DC76" alt="Inspiring" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><H2>Readability:</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/">For web designers, different browsers can also cause readability issues. </blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/">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.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.colourlovers.com/img/7CF618F3-25D0-448C-8E64-F6BA1153D2A4" alt="invite.gif" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/">page as it appears in Firefox</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.colourlovers.com/img/5538430F-5A4D-4716-B32E-9FB3F32D0CB3" alt="weight.jpg" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/">In IE 6</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.colourlovers.com/img/E2FC8865-DAD5-470A-9882-062BF82D893B" alt="weight2.jpg" /></div></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;"> </td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/D0F648D2-C223-41FB-8ACC-BEF4E68A6BAB/blog/" title="blog or email this clip"><img src="http://content7.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
Clipmarks
Home
New Clips
Top Clips
Dashboard
Popular Topics
News
Life
Science
Technology
Entertainment
Get Started
Sign Up
Install Clipping Tool
How Clipping Works
Clip-to-Blog™
ClipSearch
Tools and Resources
FAQ
ClipWeek
Top Clippers
Top Tags
Site Map
About Clipmarks
About Us
Contact
Blog
Copyright
Privacy
EULA
OK