Modern CSS Typography and Font Styling Examples

Check out my new article Modern Web Forn Options for Web Designers for my latest rundown of web font solutions

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!

Related posts:

1. Modern Web Font Options for Web Designers Google's new Font API, Cufon, @font-face, sIFR, FLIR...?! It's 2010 and the Internet has long since evolved to become an integral part of modern society. As web designers, our web fonts used to be limited to a small number of 'safe' font-families. Today there are a number of options that allow web developers to break [...]...
2. Google Unveils the Google Font Directory and API Google is looking to help all of us web and graphic designers out there who have been trying to break free of the CSS font-family limitations. How are they doing this? Today Google released the Google Font Directory and Google Font API in attempts to bring a selectable and dynamic font solution to the web. [...]...
3. 15 High School Websites with Nice Designs Hey there everyone, I love looking at lists of nice websites and realized that I never have written an article on that exact topic. So I decided to rate some High School websites since it's a niche and perhaps could inspire some younger web designers. Do you think your high school's website should be included [...]...
4. Top-10 Websites to Go To for Web Design Inspiration As web designers, we often seek inspiration from what others have done before us.  Not to leech too much off their design, but to inspire our work and get us started on the right path.  Here I will share with you my top go to websites for beautiful website listings with great showcases and more. [...]...
5. CSS Vertical Centering Text, Images and other Elements Cascading style sheets make is very easy to center objects vertically. This may be an image or some text that you wish to align properly for whatever reason. For this tutorial we will demonstrate how to vertically align some text then an image using an easy and W3C compliant method. Then I will show you [...]...