Attractive CSS typography and styled fonts can add a lot to a user's experience on your website. Think of your website's typography as the foundation upon which your design is built. Typically, users will look at your headings first and actually read and interpret the text. Please enjoy these examples of how CSS typography can be used effectively on your website, blog or project.

Note: Best viewed in FireFox 3.5+

Mozilla makes some great software, and they can design a mean website too. Check out this site where I got this typography from: http://www.mozilla.org. It's pretty cool looking I'd say. Here's the link to the full background image: HERE.

HTML

<div id="container">
<h1><strong>We believe</strong>that the internet should be public, open and accessible.</h1>
</div>

CSS

#container {
     background:url(http://www.dlocc.com/articles/wp-content/uploads/2010/01/Mozilla-Background.png) no-repeat top left;    
}

h1 {
     font-family:Georgia,serif;
     color:#666666;
     font-size:30px;
     line-height:1em; 
     margin:0 0 0 60px;
}

h1 strong{
     color:#A80C1E;
     display:block;
     font-size:85px;
     font-weight:normal;
     letter-spacing:-3.5px;
     line-height:1em;
}

The example above shows how to effectively use CSS to create a large heading with an elegant italic subheading. The fonts used are Baskerville, Helvetica, and Georgia as you can see once the syntax is expanded below.

HTML

<span class="introduction">Introducting</span>
<h1><em>Modern Web Design</em></h1>
<h2><span>W</span>e know CSS <strong>&amp;</strong> Practice Modern <em>Web Design Since <span>2001</span></em></h2>

CSS

h1 {  
	font-family:Baskerville,Times,'Times New Roman',serif;
	font-size:75px; 
	color:#589017;
	font-variant:small-caps;
	text-align:center;
	font-weight:bold;
	padding:15px 0px 15px 0px; /* Tweak this to your liking */
}

h2 {
	font-family:georgia,serif;font-size:18px;
	font-style:italic;
	color:#3E2F2F;
	letter-spacing:0;
	line-height:1.429em;
	padding:0;
	text-align:center;
}

h2 span {
	font-family:baskerville,'palatino linotype',georgia,serif;
        font-size:25px;
	font-weight:100;


}

.introduction {
	font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;
	font-weight:bold;
	margin:10px 0px 10px 20px; /* Tweak this to your liking (also add padding) */
	letter-spacing:3px;
}

Is your wordpress blog in need of some sprucing up? Here we have an example of how we can make blog postings look that much better all thanks to cascading style sheets. Remember, these are links so they will require different syntax for styling links and hovers. Check out what I mean by viewing the code below.

HTML

<h3><em>The</em> Man, <em>The</em> Myth, <em>The</em> Legend</h3>
<p class="authorDate">By: Devin Walker | Posted: April 20th, 2010</p>
<p class="content">Ever want to create an amazing blog that makes your visitors drop their jaw in awe?  Well with a little bit of CSS magic this can become a reality.  Getting visitors is another thing, you'll figure that part out... just keep posting good content!</p>

CSS

h3 {  
	font-family: georgia,serif; 
	color: #755c44; 
	font-size: 20px; 
	letter-spacing: 0.1em; 
	line-height: 1.5em; 
	text-transform: uppercase; 
	margin: 10px;
}

h3 em{
	color:#8F7C47;
	letter-spacing:0.05em;
	text-transform:none;
	font-size:20px;
}

.authorDate {
	border-color:#695C44;
	border-bottom:1px dashed;
	margin:0px 10px 0px 10px;
	padding-left:5px;
	color:#666666;
	font-family:Tahoma;
	font-size:10px;
	font-variant:normal;
	font-weight:lighter;
	letter-spacing:3px;
	text-transform:uppercase;
}

.content {
	font-family: georgia,serif;
	font-size: 12px; 
	line-height: 20px; 
	letter-spacing:1px;
}

CNN is the go to website for millions of people. They must be doing something right as far as typography is concerned. The designers have used Arial at various pixel sizes.

HTML

<h1>Upcoming IE9 Incompatible with CSS3</h1>
<div class="dateTime">January 4, 2010 2:29 p.m. EST</div>
<div class="content"><strong>Houston, Texas</strong> -- Love or hate Microsoft, it seems the newly release beta version of IE9 will not be compatible with the latest version of CSS. Web designers are scrambling to gather enough eggs to cover the entire Microsoft headquarters.</div>

CSS

h1 {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;  
     line-height:19px;
     margin-bottom:7px;
}  

.dateTime {
     font-family:arial;
     font-size:11px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:14px;
     padding:1px 0px 1px 15px;
}

.content {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:19px;
     margin-bottom:7px;
     padding:0px 15px 0px 15px;
}

Top-10 Web Tools

Top-10 lists are very popular and are very enjoyable to write IMO. Site visitors want to see lists with images that stand out and are unique. Bland lists are boring. Style your top lists using something similar to the above example using the code below. Check out my post on using a box shadow hover effect for Mozilla firefox using CSS! Coming soon.

HTML

<h1>Top-10 Web Tools of 2009</h1>
<div class="top10">
<h2>Adobe Dreamweaver CS4</h2>
<p>I think Dreamweaver is cool because blah blah blah...</p>
<span>1</span>
</div>

CSS

.top10 {
      background-color:#FFF7EF;
      border:7px solid #FEE8D1;
      color:#666666;
      margin:10px 0 20px; /*may change */
      padding:5px 10px 30px;  /*may change */
      position:relative;
}

.top10 h2{
     color:#333333;
     font-family:Georgia,serif;
     font-size:25.5px;
     font-style:italic;
     margin:10px 0px 5px 0px;
}

.top10 p {
     color:#666666;
     font-family:Georgia,serif;
     font-size:14.5px;
     padding:10px 0;
}

.top10 span {
     bottom:25px;
     color:#DEDEDE;
     font-size:55px;
     position:absolute;
     right:0;
}

.top10 img{
     float:right;
     margin:10px;
}

h1 {
     font-family: Georgia, serif;
     font-size: 30px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     letter-spacing: 2.5px;
}

Mozilla is awesome. Check out their beautiful and elegant typography HERE. Georgia is one of my favorite fonts to use because it renders nicely when used in large sizes and looks pretty slick. It's a serif font, meaning it naturally has more detail than sans-serif fonts. I believe this gives more character to the typography. What do you think?

HTML - (Download the background HERE)

<div class="container">
<h1>CSS Typography is Fun!</h1>
<p>Why is it fun? Because it is!</p>
</div>

CSS

#container  {
     font-family:georgia,serif;
     color:#FFFFFF; 
     margin:10px; /*Customize */
     padding:10px; /*Customize */
}

#container h1 {
     font-size:75px;
     margin:10px 0px 10px 0px; /*Customize */
     padding:0px; /*Customize */

}

#container p{
     color:#4B4742;
     font-size:24px;
     line-height:30px;
     margin:10px; /*Customize */
}

Please let me know what you think. If you enjoyed this post be sure to subscribe to our RSS feed. Are you looking to publish your articles online? Contact DLOCC! Also, peep us out on Twitter! Ok, that's it for now. Pz!