15 Excellent Examples of Web Typography


	15 Excellent Examples of Web Typography
haraya
4-16-2008 8:55 AM
550 views
tags:
typography, web design, aesthetics, interface, website, usability
Add a Comment
Login to Comment. Not a member yet? Sign up
Steve Jobs Inspiring Speech
See through the eyes of the Color Blind
Make your own fonts!
Collection of Breathtaking Typographic Pos...
Experimental Typography
More (Really) Stunning Desktop Wallpapers
More clips from haraya

Is the Creative Internet Just About Dead?
The Secret History of Star Wars
Architectural Papercraft
Today's Top Clips

visit the Top Clips page
View the Top Clips from April 16, 2008
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://www.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/52ca25e6-e0d9-4b9e-a960-db06e38a1f1a/B9F52C4C-975E-44A0-B21F-54C4A2AF7EB6/" 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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/" href="http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/" style="font-size: 11px;">ilovetypography.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/">they make excellent use of type. Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable.</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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">01:</SPAN><STRONG> <A target="_blank" title="A List Apart" href="http://www.alistapart.com">A List Apart </A></STRONG><A target="_blank" title="A List Apart" href="http://www.alistapart.com">— <EM>for people who make websites</EM></A>
<A target="_blank" title="A List Apart. For People Who Make Web Sites" href="http://www.alistapart.com"></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/ilovetypography.com/img/5F8E717F-05AC-4B25-A0D1-59EF7F88AFA3" alt="sd-alistapart.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">02:</SPAN><STRONG> <A target="_blank" title="Shaun Inman" href="http://www.shauninman.com/">Shaun Inman</A></STRONG><A target="_blank" title="Shaun Inman" href="http://www.shauninman.com/"> — </A><EM><A target="_blank" title="Shaun Inman" href="http://www.shauninman.com/">professional designer and developer</A>
</EM></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/ilovetypography.com/img/8E9493FB-AE76-4FE9-AF09-F7ADD3748BD2" alt="sd-shauninman.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">03:</SPAN><STRONG> <A target="_blank" title="Font Shop" href="http://www.fontshop.com/fonts/">FontShop</A></STRONG><A target="_blank" title="Font Shop" href="http://www.fontshop.com/fonts/"> — <EM>as its name suggests</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/ilovetypography.com/img/A6F93789-B050-44AC-8E60-2D4BDF88EB16" alt="sd-fontshop.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">04:</SPAN><STRONG> <A title="Designed by Miguel Ripoll" href="http://www.jrvelasco.com/">Jesús Rodríguez Velasco </A></STRONG><A title="Designed by Miguel Ripoll" href="http://www.jrvelasco.com/">— <EM>blog of <ACRONYM title="University of California">UC</ACRONYM> Berkeley professor</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/ilovetypography.com/img/AC283BD7-C95F-4779-A164-BBECAB6BF675" alt="sd-rodriguez.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">05:</SPAN><STRONG> <A target="_blank" title="BearSkinRug" href="http://www.bearskinrug.co.uk/_store/">BearSkinRug Shop</A></STRONG><A target="_blank" title="BearSkinRug" href="http://www.bearskinrug.co.uk/_store/"> —<EM> professional illustrator, Kevin Cornell</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/ilovetypography.com/img/2604CA13-ADE6-44DD-BB19-A6608E00C27F" alt="sd-bearskinrug.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">06:</SPAN><STRONG> <A href="http://www.andyrutledge.com/">Design View</A></STRONG><A href="http://www.andyrutledge.com/"> — <EM> Andy Rutledge, design strategist </EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/ilovetypography.com/img/1974DABE-3CA9-4B3B-B4C8-E60FA1FC272D" alt="sd-andy-rutledge.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">07:</SPAN><STRONG> <A target="_blank" title="Rik Catlow" href="http://www.rikcatindustries.com/">Rikcat Industries</A></STRONG><A target="_blank" title="Rik Catlow" href="http://www.rikcatindustries.com/"> — <EM>Rik Catlow, design director</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><A target="_blank" title="Rikcat Industries" href="http://www.rikcatindustries.com/"><IMG alt="sd-rikcat-industries.jpg" src="http://ilovetypography.com/img/sd-rikcat-industries.jpg" /></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">08:</SPAN><STRONG> <A target="_blank" title="Quipsologies" href="http://www.underconsideration.com/quipsologies/">Quipsologies</A></STRONG><A target="_blank" title="Quipsologies" href="http://www.underconsideration.com/quipsologies/"> — <EM>news and creative morsels</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/ilovetypography.com/img/D3C81FE4-BBF9-4CC2-A381-F2C332288B9B" alt="sd-quipsologies.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">09:</SPAN><STRONG> <A target="_blank" title="Design Snips" href="http://designsnips.com/">Design Snips</A></STRONG><A target="_blank" title="Design Snips" href="http://designsnips.com/"> — <EM>web design showcase</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/ilovetypography.com/img/8F6297AB-BECE-4755-99D6-773674FA06CA" alt="sd-design-snips.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">10:</SPAN><STRONG> <A target="_blank" title="Red Interactive Agency" href="http://www.ff0000.com/">Red Interactive Agency</A></STRONG><A target="_blank" title="Red Interactive Agency" href="http://www.ff0000.com/"> —<EM> web marketing and development</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/ilovetypography.com/img/97951CFA-1876-4ABC-BC96-6B2D8B6619AA" alt="sd-red-interactive-agency.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">11:</SPAN><STRONG> <A target="_blank" title="The Big Noob" href="http://thebignoob.com/">The Big Noob </A></STRONG><A target="_blank" title="The Big Noob" href="http://thebignoob.com/">—<EM> developed by and for…noobs</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/ilovetypography.com/img/15C12A51-63D8-4EA4-95D6-12FC88090B5B" alt="sd-the-big-noob.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">12:</SPAN><STRONG> <A target="_blank" title="Climate Change" href="http://www.designcanchange.org/">Design Can Change</A></STRONG><A target="_blank" title="Climate Change" href="http://www.designcanchange.org/"> —</A><EM><A target="_blank" title="Climate Change" href="http://www.designcanchange.org/"> climate change</A>
</EM></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/ilovetypography.com/img/33463126-CA8D-4D53-9546-33AC94A7720F" alt="sd-climate.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">13:</SPAN><STRONG> <A target="_blank" title="Process Type Foundry" href="http://www.processtypefoundry.com/">Process Type Foundry</A></STRONG><A target="_blank" title="Process Type Foundry" href="http://www.processtypefoundry.com/"> —<EM> they make type</EM></A></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/ilovetypography.com/img/9A7977AE-4E66-4A73-B357-25A08CC7D5F5" alt="sd-process-type-foundry.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">14:</SPAN><STRONG> <A target="_blank" title="Finch" href="http://www.getfinch.com/">Finch</A></STRONG><A target="_blank" title="Finch" href="http://www.getfinch.com/">—</A><EM><A target="_blank" title="Finch" href="http://www.getfinch.com/"> interactive and graphic design agency</A>
</EM></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/ilovetypography.com/img/4BB0908A-C7F5-4B47-B394-78F16BABBBB7" alt="sd-finch.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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><P><SPAN class="bigdate">15:</SPAN><STRONG> <A target="_blank" title="SR28" href="http://sr28.com/">SR28</A></STRONG><A target="_blank" title="SR28" href="http://sr28.com/"> —</A><EM><A target="_blank" title="SR28" href="http://sr28.com/"> Simon Reynolds, web designer and illustrator</A>
</EM></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://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/ilovetypography.com/img/FD17C81E-E581-4408-A3B3-3D49F7F56342" alt="sd-sr-28.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;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/B9F52C4C-975E-44A0-B21F-54C4A2AF7EB6/blog/" title="blog or email this clip"><img src="http://content9.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>