CSS Typography: Contrast Techniques, Tutorials and Best Practices

September 15th, 2008

The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and below you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites.

1. Eight Seven Principles of Typographic Contrast

You can direct the reader’s attention to important parts in your layout and at the same time enhance the visual appearance by creating contrast. Here are different css properties for common typographic effects.

Type Size


White Space

line-heights, letter-spacing, word-spacing






text-decoration, font-style






text-align, float

Typographic Contrast and the web

This article has reviewed the important principal of typographic contrast as presented in a brochure written fifty years ago by the canadian typ[ographer Carl Dair. He presented seven principals ranging from type size to the direction of type on a page. Though written for people whose profession was print, Carl’s words are equally a[pplicable in a medium he never experienced which is web design.

css heading tags

Typographic Contrast and Flow

Here are seven basic methods on how you can create typographic contrast.

css heading tags

The Elements of Typographic Style

This website steps through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. A practical guide to web typography!

5 Principles And Ideas Of Setting Type On The Web

Principles, rules and ideas for approaching Web typography decisions by Sean Hodge on SmashingMagazine.

2. Common Typography Techniques with CSS

CSS Heading Type

How to use headings in HTML

A great tutorial by Alen Grakalic of CSSGlobe explaing what is the meaning of headings, how to use them and what are the “Don’ts” when using heading tags.

css heading tags

Making Headlines With CSS

With a dash of design, we can utilize CSS to stylize those Web page headers to catch the reader’s eye and encourage them to read on.

css heading tags

	margin-bottom: 0;
	padding: 25px .5em 25px 250px;
	background-image: url(examples.png);
	background-repeat: no-repeat;
	color: #333;
	background-color: #cf0;	
	background-color: #fc9;
	background-image: url(examples.jpg);
	background-repeat: no-repeat;

10 Examples of Beautiful CSS Typography and how they did it…

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. If you want to know what did they do, and how/why does it result in beautiful type? Check out this interesting post.

css heading tags

	  font-size: 85%;
	  text-transform: uppercase;
	  letter-spacing: 1px;
	  color: #bbb;
	  font-size: 10px;
	  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	  font-weight: 100;

	font: bold 34px "Century Schoolbook", Georgia, Times, serif;
	color: #333;
	line-height: 90%;
	margin: .2em 0 .4em 0;
	letter-spacing: -2px;

	color: #76879b;
	font-size: 10px;
	margin: 5px;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;

Heading Style gallery

Want something a little more stylish for your content headings (h1,h2,…) than a different font or color? Try one of the heading styles listed here to spruce up your content.

css heading tags

Creating Dropcaps Using CSS

CSS Magazine Style Drop Cap

The Drop Cap can be close to the size of the title text or bigger. So you need to force the first big letter to span about five lines.

css heading tags

Paragraphs in Web Typography

The Paragraph in Web Typography & Design

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web. You can also check their 12 Examples of Paragraph Typography here.

css heading tags

First line flush left
Subsequently two lead indent, no boundary, justified
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
p   p {
text-indent: 2.5em;

Sizing Text in CSS

How to Size Text in CSS

Ems can be tricky to work with, especially when nesting elements deeply, as it can be hard to keep track of the maths. However, commenting your style sheets well and styling elements from the body inwards can keep things easier to follow. Learn how to size nested elements using the body as the starting point.

css heading tags

<style type="text/css">
body {

.bodytext p {

.sidenote {

<!--[if !IE]>-->

<style type="text/css">
body {


Text Sizing

3. Advanced Typography techniques

Advanced Typography techniques using CSS

There are still many rich typographic abilities of CSS that are not well documented. Here is a great example of what you can do by combining and tweaking type using css. Checkout the advanced css typography example page and look through the source code.

css heading tags


Gray's {advanced_type.htm... (line 54)
border-bottom:10px solid #CC0000;
h3.gr2 {advanced_type.htm... (line 55)
margin:25px 0pt;

How To Use Any Font You Wish With FLIR

How to implement Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash. View a demo here.

css heading tags

CSS StyleFun with CSS

Different examples of amazing Text styled with CSS.

css heading tags

4. How to Customize Typography with CSS Frameworks

BluePrint CSS How to: Customizing Typography Baselines

css heading tags

BluePrint’s typography.css file sets up some very nice typography styles that create a beautiful baseline grid. This post came in handy to show you how to configure Your Font-Size and Baseline to your desired value.


css heading tags

YUI Fonts CSS file offers cross-browser typographical normalization and control. Checkout their examples section to see it in action.

5. CSS Typography Tools and Wizards


A simple tool that create the text CSS coding for you & lets you preview it as you do it!

css heading tags


The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

css heading tags


Coverts your wysiwyg text formatting to css…in real time

css heading tags

6. Great Typographic Design

Looking for sites that have great typographic design, check out these galleries.


Typesites is a weekly look at sites that have great typographic design.

css heading tags

Typography For Headlines

A great collection of links to more than 100 headlines around the Web in a unique and creative way.

css heading tags

Websites with Excellent CSS Typography

There are some websites out there that have managed to create outstanding web designs through the use of typography. They are simple, clean and communicative. Have a look at some of them.

css heading tags

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

41 comments for „CSS Typography: Contrast Techniques, Tutorials and Best Practices
  1. Markus on September 15th, 2008 at 5:44 am

    Wow ! Exactly what I was looking for ! Thanks for putting this together in a nice organized post.

  2. Nick on September 15th, 2008 at 5:45 am

    As always, a great post. You may want to include information on sIFR3

  3. Shazza on September 15th, 2008 at 5:49 am

    Pretty good article. I love the examples shown :)

  4. Nathan Beck on September 15th, 2008 at 6:08 am

    Fantastic post Noura. Loads of bases covered, I often forget the importance of Headers and the massive impact they can have.

  5. Vladimir on September 15th, 2008 at 6:47 am

    Fantastic post! I was doing some mini research about web typography this post will be definitely very useful.

  6. Brandon Cox on September 15th, 2008 at 6:51 am

    Good resources and links, but I also get a bit lost in this article. There are a lot of images, subheadings, and links and sometimes it’s hard to tell the difference – good links, but your article itself is a bit hard to navigate. Maybe a better use of topography would help.

  7. Brandon Cox on September 15th, 2008 at 6:52 am

    I meant typography, not topography – like I said, I’m an idiot!

  8. Matt on September 15th, 2008 at 7:06 am

    Excellent resource, thanks!

  9. Goobi on September 15th, 2008 at 7:08 am

    Nice writeup man. Will sure keep the points in mind.

  10. Chad Mueller on September 15th, 2008 at 7:28 am

    Great article, I love typography on the web, it’s just fantastic. I can’t wait to see what designers come up with next in this genre. Check out this link to see some really great examples of typography used on the web.

  11. Mike Smith on September 15th, 2008 at 7:36 am

    HOLY &#$^! Nice article with a lovely round up of typography information. THANK YOU :)

  12. Ed on September 15th, 2008 at 9:18 am

    Good roundup but the first few instances of the word “principals” should be “principles”.

  13. Mark on September 15th, 2008 at 9:54 am

    Wow, that’s a nice cheat-sheet.. Bookmarked!

  14. gigi on September 15th, 2008 at 11:36 am

    nice tips!
    How can i implement the CSS Magazine Style Drop Cap in my wordpress post?

  15. kuindzi on September 15th, 2008 at 12:09 pm

    Thank. I am possible I shall translate it on Russian?

  16. Alexis on September 15th, 2008 at 12:44 pm

    Nice Resources. Bookmarked!

  17. Noupe on September 15th, 2008 at 12:50 pm

    Hello everyone,

    Thank you for the comments! I’d like to address some of them:
    @Brandon Cox: This post has 6 main headings, below each one you will find subheadings. I just want to keep the posts and tutorials mentioned here to be more categorized and organized.

    @Chad Mueller: Your post is shows a great taste of typographic tweaks, thanks for sharing :)

    CSS Magazine Style Drop Cap uses inline style.
    Implementing drop caps in WordPress is easy. You can create a class name for example “drop-cap” for the first letter in the paragraph and add the following in your style sheet.

    border: 1px solid darkkhaki; 
    background: khaki none repeat scroll 0%; 
    margin-right: 6px; 
    margin-top: 5px; 
    float: left; 
    color: white; 
    -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 80px;
    line-height: 60px; 
    padding-top: 2px; 
    padding-right: 5px; 
    font-family: times;

    Thanks @kuindzi: It would be great if you translate it to Russian, just add a link to Noupe’s post and send me the link so i can add it at the end of the post.

  18. Action on September 15th, 2008 at 1:07 pm

    Always good to refresh. I use a couple of these often.

  19. Noupe on September 15th, 2008 at 1:08 pm

    @gigi: Also there is a plug-in that can do this for you.
    I didn’t use it before but you can give it a try.

  20. Fabryz on September 15th, 2008 at 4:50 pm

    Nice article :)

  21. Honour Chick on September 15th, 2008 at 8:39 pm

    nice collection… will sure use as inspiration. :)

  22. Sean on September 16th, 2008 at 3:09 am

    This post is golden. Thank you.

  23. Dainis Graveris on September 17th, 2008 at 12:22 pm

    You have done excellent work! Again! Amazing article You got here.

  24. santhos web design on September 19th, 2008 at 2:37 am

    Great article, very usefull!

  25. web design company on September 20th, 2008 at 5:11 am

    some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites

  26. Jon on September 21st, 2008 at 4:31 am

    Wow, another great article, I’ve bookmarked it as it’s so thorough I think I’ll be oming back to it many times!

    Thanks for all your work

    Cheers, Jon

  27. Anthony on September 24th, 2008 at 2:01 pm

    Wow your pretty good. great article. keep it up

  28. Anthony on September 24th, 2008 at 2:03 pm

    I put the wrong web address before, but i would like to add that css is going to be the only way we build websites. no more tables

  29. blogsarticle on September 25th, 2008 at 5:54 pm

    Great article, very usefull!

  30. webmaster blog on September 26th, 2008 at 7:37 am

    thank you man

  31. Skracanie linków on November 2nd, 2008 at 3:49 am

    FLIR is great thing. Very useful post. Delicioused.

  32. virgil on November 5th, 2008 at 5:40 am

    Great post! very useful and informative

  33. The Floating Frog on November 13th, 2008 at 11:07 am

    This is possibly the best post so far, thanks guys.

  34. Thanh Grandison on February 9th, 2010 at 1:28 pm

    You know that was a interesting post. I think I’ll create a blog post and link to it.

  35. Massage Cushion on November 24th, 2010 at 6:33 pm

    building websites is not only fun, but it can also generate an income for yourself ~*`

  36. karachi on January 26th, 2011 at 9:43 pm


    can some one refer some tips on how to use google fonts in a website

  37. Fonts on February 8th, 2011 at 8:51 pm

    Great tips and guides here, just what I needed for my fonts and CSS styles.

  38. web designer on April 23rd, 2011 at 2:22 am

    great article and very nice list, surely I will use some tips in my next design.. thanks!

  39. modra ideja on July 29th, 2011 at 3:42 pm

    great tips, thanks for this article :)

  40. Nuaw on March 31st, 2012 at 12:37 am

    Wow nice, i will try it now. Its great to have such inspiration here.

    Greets from Germany….

  41. Richard Beazley on January 9th, 2013 at 1:34 pm

    Great post very useful… thanks for sharing!