Typography—the new buzz word for the web

April 01, 2005

Typography is gathering more and more interest this year. I think it is a positive move and will push more web designers to more creative “type think”. Sifr has made it easier to have more beautiful type on the web. However, there are many other things you can do with just html type to change things up. With CSS you can play with the kerning, leading, small caps, and style to change up body and heading text. Take a look at Signal vs Noise’s style on their headings.

div#Masthead h1 {
  font-family: helvetica;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -1px;
}

Note the letters spacing is at -1px—it changes the headline just enough to make it different. Another great example of html type is Coudal’s design of “Cast of shadows” title. It is all done with html and css. Typography is more than just choosing a font, but also how you style it. Here are few ideas on how you can make your copy stand out with just CSS.

• increasing font-size
• changing the kerning with letter-spacing
• increase leading with line-height
• justify paragraphs with text-align
• Puncutation details

With that I have changed my primary typeface a little bit today to celebrate one of the best designed and hardly ever used fonts.

Update: On this day (April 1) the font of choice was changed to our favorite Comic Sans MS. The change was made with the following code.

#main, #mast li a, h1, h2, h3 
{
font-family: Comic Sans MS!important;
}