<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WebUrbanist  Winsome Words: 18 Examples of Typography in Web Design | Urbanist</title>
	<atom:link href="https://weburbanist.com/2010/02/08/winsome-words-18-examples-of-typography-in-web-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://weburbanist.com</link>
	<description>Urban Art, Architecture, Design &#38; Built Environments</description>
	<lastBuildDate>Thu, 15 Jan 2026 02:15:38 +0000</lastBuildDate>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<language></language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://weburbanist.com/wp-content/uploads/2016/05/cropped-urbanisticon-32x32.png</url>
	<title>  Winsome Words: 18 Examples of Typography in Web Design | Urbanist</title>
	<link>https://weburbanist.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">74409875</site>	
	<item>
        <title>Winsome Words: 18 Examples of Typography in Web Design</title>
        <link>https://weburbanist.com/2010/02/08/winsome-words-18-examples-of-typography-in-web-design/</link>
		<comments>https://weburbanist.com/2010/02/08/winsome-words-18-examples-of-typography-in-web-design/#comments</comments>
		<pubDate>Mon, 08 Feb 2010 18:00:21 +0000</pubDate>
		<dc:creator>SA Rogers</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Graphics & Branding]]></category>
		<category><![CDATA[digital art]]></category>
		<category><![CDATA[graphic arts]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[typography web design]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[Websites]]></category>

		<guid isPermaLink="false">https://weburbanist.com/?p=18852</guid>
		<description><![CDATA[Web design is 95% typography, and some sites elevate the written word into a form of visual art that's engaging, informative and memorable.]]></description>
			<content:encoded><![CDATA[
    <!-- custom per item content begin -->
    
    [ By <a href='http://weburbanist.com/steph/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-author'>SA Rogers</a> in <a href="https://weburbanist.com/category/design/" rel="category tag">Design</a> &amp; <a href="https://weburbanist.com/category/design/graphics-branding/" rel="category tag">Graphics &amp; Branding</a>. ]

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/typography-web-design-main.jpg"><img fetchpriority="high" decoding="async" class="first-image img-responsive" title="typography-web-design-main" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/typography-web-design-main.jpg" width="468" height="400"></a></p>
<div id="urb-ads-toc-box" class="post-ads-toc-box urb-ads-toc" style="display:none;"></div><p><!--wsa:gooold-->&ldquo;Web design is 95% typography.&rdquo; That <a href="http://informationarchitects.jp/the-web-is-all-about-typography-period/">quote</a> has been repeated around the internet so many times it has practically become gospel &ndash; probably because it&rsquo;s true. While images are important, most of what we process while browsing the web is text. Using the same old boring fonts doesn&rsquo;t make for exciting design, so some graphic artists have turned typography on the web into a stunning art form unto itself. These 18 websites use typography to inform, but also as an (often interactive) design element that&rsquo;s like a magnet for our eyeballs.</p>
<h4><span id="more-18852"></span>Espira Web Technology</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/espira-typography-web.jpg"><img decoding="async" class="alignnone size-full wp-image-18854" title="espira-typography-web" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/espira-typography-web.jpg" width="468" height="253"></a><br>
Priorities, priorities, priorities. <a href="http://www.espiratecnologias.com/">Espira Web Technology</a> has emphasized the most important words on the page using large, eye-catching typography that&rsquo;s a seamless part of the overall design of the site. Following the cardinal rule of using serif typefaces only for headings, the text is easy to read and almost forcibly pulls you in regardless of whether you even speak Spanish.</p>
<h4>Jesus Rodriguez Velasco</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/jesus-rodriquez-velasco-typography.jpg"><img decoding="async" class="alignnone size-full wp-image-18855" title="jesus-rodriquez-velasco-typography" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/jesus-rodriquez-velasco-typography.jpg" width="468" height="351"></a></p>
<p>Sometimes, typography is used in web design to firmly establish the theme or essence of what the site is all about. In this case, archaic-looking typeface and hand-painted symbols hint at what&rsquo;s inside: &ldquo;a veritable panoply of literary, visual and aural diversions related (or not) to academic pursuits, arcane (or simply dusty) vagaries and very earnest but most likely misguided contemporary concerns.&rdquo; The author, <a href="http://www.jrvelasco.com/">Jesus Rodriquez Velasco</a>, is a medieval and early modern studies professor at Columbia University.</p>
<h4>Oliver Kavanaugh Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/oliver-kavanaugh.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18856" title="oliver-kavanaugh" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/oliver-kavanaugh.jpg" width="468" height="217"></a><br>
It&rsquo;s big. It&rsquo;s loud. It&rsquo;s overwhelmingly the most important element on the page, and that&rsquo;s the point. Graphic and web designer <a href="http://oliverkavanagh.com/">Oliver Kavanaugh</a> managed to make jumbled, overlapping text that might be far too busy in the wrong hands work with subtle texture, a controlled color scheme and careful attention to composition.</p>
<h4>Ryan Keiser Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/ryan-keiser.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18857" title="ryan-keiser" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/ryan-keiser.jpg" width="468" height="263"></a></p>
<p>&ldquo;I create usable accessible colorful experiences.&rdquo; All three of those adjectives also apply to the typography-centered design of this website, helping <a href="http://ryankeiser.net/">Ryan Keiser</a> establish his brand in a way that&rsquo;s immediate and memorable.</p>
<h4>Denise Chandler Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/team-fanny-pack.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18858" title="team-fanny-pack" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/team-fanny-pack.jpg" width="468" height="276"></a></p>
<p>Can you resist scrolling further down the page after getting a look at this web header? It&rsquo;s clean and simple yet dynamic &ndash; even without the cute animated insects. <a href="http://teamfannypack.com/denise/index.html">Web and graphic designer Denise Chandler</a> showcases her talent with an online portfolio that&rsquo;s classic and modern all at once.</p>
<h4>The New York Moon</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/moon-radio-typography-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18859" title="moon-radio-typography-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/moon-radio-typography-design.jpg" width="468" height="289"></a></p>
<p>Sure, the most eye-catching element of this page is that huge vintage radio. But though it may be subtle, the typography on <a href="http://radio.nymoon.com/">The New York Moon website</a> still shines. It&rsquo;s a great example of how less can be more &ndash; the type doesn&rsquo;t have to be acid-bright or two inches tall to call attention to itself and help define the page.</p>
<h4>Kidd 81 Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/kidd-81-typography-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18860" title="kidd-81-typography-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/kidd-81-typography-web-design.jpg" width="468" height="256"></a></p>
<p>It&rsquo;s not hard to tell that <a href="http://www.kidd81.com/">Paul Jamie Kidd </a>really loves his job. Everything about the playful, colorful typography on his website screams &ldquo;fun&rdquo; &ndash; but not in an annoying way, thanks to the balanced white space and neutral brown background.</p>
<h4>Circus Family Design, Direction, Animation &amp; Production</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/circus-family-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18861" title="circus-family-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/circus-family-web-design.jpg" width="468" height="253"></a></p>
<p>Whoa &ndash; four different typefaces in a row? That&rsquo;s usually a terrible idea (especially on the web) &ndash; but <a href="http://www.circus.fm/">Circus Family</a> pulls it off here with an austere layout and monochromatic color scheme. The chosen typefaces give the site a very &ldquo;edgy silent film&rdquo; feel &ndash; appropriate given the nature of the company&rsquo;s work.</p>
<h4>Alpha Multimedia</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/alpha-multimedia.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18862" title="alpha-multimedia" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/alpha-multimedia.jpg" width="468" height="302"></a></p>
<p>How can a brand name force itself into your head without screaming like a headache-inducing car dealership commercial? <a href="http://www.alpha-multimedia.com/">Alpha Multimedia</a> gets it done with excellent use of negative space, filling in the entire header with the word and subsequently drawing your eye down the page to view their featured work samples.</p>
<h4>Lorem Ipsum Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/lorem-ipsum-typography.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18863" title="lorem-ipsum-typography" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/lorem-ipsum-typography.jpg" width="468" height="281"></a></p>
<p>There&rsquo;s an argument to be made that using &lsquo;lorem ipsum&rsquo; isn&rsquo;t a great idea when designing a website, but that doesn&rsquo;t extend to using the graphic design agency of the same name. <a href="http://www.loremipsum.ro/">Lorem Ipsum Design</a> goes bold and, well, graphic with a home page featuring nothing but two fonts, one a stark sans serif and the other a hand-written scrawl on a moveable post-it.</p>
<h4>Maurivan Luiz Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/maurivan-luiz-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18864" title="maurivan-luiz-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/maurivan-luiz-web-design.jpg" width="468" height="280"></a></p>
<p>The word &lsquo;WELCOME!&rsquo; in huge typeface with an exclamation point at the top of a website can be a sign of an amateur designer. That&rsquo;s definitely not the case here. <a href="http://www.maurivan.com%20">Maurivan Luiz</a> keeps the friendliness from being clich&eacute; &ndash; the greeting warmly sets the tone for the site and balances well with the white background and the italicized serif text below it.</p>
<h4>The Astonishing Adventures of Lord Likely</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/lord-likely.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18865" title="lord-likely" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/lord-likely.jpg" width="468" height="376"></a></p>
<p>What would the blog of a hedonistic Victorian gentleman with a penchant for getting sidetracked by the ladies while solving mystifying mysteries look like? A little something like <a href="http://www.lordlikely.com/">LordLikely.com</a>, a rather racy account of all sorts of mustachioed aristocratic adventures. The chosen typefaces and parchment-like background are evocative of the era, but the clean design is a nod to the modern world.</p>
<h4>Love Freelancing</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/web-design-freelancers.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18866" title="web-design-freelancers" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/web-design-freelancers.jpg" width="468" height="313"></a></p>
<p>Sometimes, the right balance of typography is like music &ndash; it flows with its own rhythm and harmony. <a href="http://www.lovefreelancing.com/">Web designer Kai Branch</a> created this little site to hype an ebook of web designer interviews, and it does the subject proud with a beautiful composition of type in various fonts, sizes and orientations.</p>
<h4>Giant Creative Web Design &amp; Development</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/giant-creative-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18867" title="giant-creative-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/giant-creative-web-design.jpg" width="468" height="295"></a></p>
<p>Who needs fancy illustrations when you&rsquo;re this good with nothing but type? A web design and development firm called <a href="http://madebygiant.com/">Giant Creative</a> literally makes typography the center of attention on their own website. The design is clean yet fun, using a font that&rsquo;s just playful enough to give a lighthearted yet professional impression.</p>
<h4>Ben Lind Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/ben-lind-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18868" title="ben-lind-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/ben-lind-web-design.jpg" width="468" height="281"></a></p>
<p>&ldquo;I create simple, clean websites that are easy to use and fun to look at.&rdquo; So says designer <a href="http://benlind.com/">Ben Lind</a> on his own website, but perhaps he needn&rsquo;t have. The design of his site says it all, with a large typography graphic in the center that not only reads &ldquo;Hi, I&rsquo;m Ben, I love making websites&rdquo; but also forms an L for his last name.</p>
<h4>Elysium Burns Design</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/elysium-burns-web-design.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18869" title="elysium-burns-web-design" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/elysium-burns-web-design.jpg" width="468" height="273"></a></p>
<p><a href="http://www.elysiumburns.com/">Graphic designer Sean Baker</a> goes for bold sans-serif type for headlines and titles and a more elegant serif font for the text blocks, but with a tightly controlled color scheme and varying font sizes, it all comes together into a cohesive design.</p>
<h4>FL2 Blog</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/02/holy-blog-typography.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-18870" title="holy-blog-typography" alt="" src="https://weburbanist.com/wp-content/uploads/2010/02/holy-blog-typography.jpg" width="468" height="275"></a></p>
<p>It doesn&rsquo;t get much bolder than this. Interactive agency FL2 isn&rsquo;t shy about making typography just about as big as it can be both on their <a href="http://blog.fl-2.com/">blog</a> and <a href="http://fl-2.com/2009/index.aspx%20">website</a>, leaving you with absolutely no question whatsoever which page you&rsquo;ve landed on.</p>
</body></html>

<div id='jp-relatedposts' class='jp-relatedposts' >
	
</div><h2></h2>
   
  <span id="fb_share" style="margin-left: 5px;"><a name="fb_share" type="button"  href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fweburbanist.com%2F2010%2F02%2F08%2Fwinsome-words-18-examples-of-typography-in-web-design%2F&t=Winsome+Words%3A+18+Examples+of+Typography+in+Web+Design"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-share.png" width="60" height="19" alt="Share on Facebook"/></a></span>
  <a style="margin-left: 5px;" href="http://www.facebook.com/WebUrbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-like-mini.png" width="66px" height="19px" /></a>
  <a style="margin-left: 5px;" href="http://www.facebook.com/WebUrbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-like.png" width="220px" height="19px" /></a>

<hr width="375px" align="left" />
  <a style="margin-left: 5px;" href="http://www.stumbleupon.com/submit?url=https%3A%2F%2Fweburbanist.com%2F2010%2F02%2F08%2Fwinsome-words-18-examples-of-typography-in-web-design%2F&title=Winsome+Words%3A+18+Examples+of+Typography+in+Web+Design"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-SU.png" width="74px" height="19px" /></a>
  <a style="margin-left: 9px;" href="http://twitter.com/home?status=%40weburbanist+https%3A%2F%2Fweburbanist.com%2F2010%2F02%2F08%2Fwinsome-words-18-examples-of-typography-in-web-design%2F+Winsome+Words%3A+18+Examples+of+Typogr"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-retweet.png" height="19" width="48" /></a>
  <a style="margin-left: 5px;" href="http://twitter.com/weburbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-twitter.png" width="220px" height="19px" /></a>
<div style="clear: both;"></div>

    <hr width="375px" align="left" />

        <span style="float:left; margin-left: 10px;">[ By <a href='http://weburbanist.com/steph/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-author-footer'>SA Rogers</a> in <a href="https://weburbanist.com/category/design/" rel="category tag">Design</a> &amp; <a href="https://weburbanist.com/category/design/graphics-branding/" rel="category tag">Graphics &amp; Branding</a>. ]</span>

<br /><br />
  <span style="color: #ddd; float:left; margin-left: 10px;">[ <a style="color: #ddd;" href="http://weburbanist.com/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-footer-title">WebUrbanist</a> | <a style="color: #ddd;" href="http://weburbanist.com/archives/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-archives">Archives</a> | <a style="color: #ddd;" href="http://weburbanist.com/galleries/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-galleries">Galleries</a> | <a style="color: #ddd;" href="http://weburbanist.com/privacy/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-privacy">Privacy</a> | <a style="color: #ddd;" href="http://weburbanist.com/terms/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-2010-02-08-winsome-words-18-examples-of-typography-in-web-design&utm_content=unknown&utm_term=feed-tos">TOS</a> ]</span>
<div style="clear: both;"></div>
<br />

<div style="clear: both;"></div>
<br />
    <!-- custom per item content end -->
    ]]>
    </content:encoded>
			<wfw:commentRss>https://weburbanist.com/2010/02/08/winsome-words-18-examples-of-typography-in-web-design/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<post-id xmlns="com-wordpress:feed-additions:1">18852</post-id>	</item>
	</channel>
</rss>
