When I’m designing websites I first create a rough-outline using DIV’s and then I focus on the header tags (H1, H2, H3, etc). I’m very picky with how these look as the text contained in them are usually the first or second thing a visitor to your website will see.

After tinkering for years I think I’ve finally found the perfect CSS code for my header tags, and it looks like this:

Great Looking Header Text

The font, style and color might look familiar to you if you’ve ever been to MoFuse.

If you want your header text to look like this, here’s the code:

h1 {
margin: 10px 0 10px 0;
font-family: “Trebuchet MS”,Trebuchet,Verdana,sans-serif;
font-size: 22px;
color: #333333;
letter-spacing: -1px;
font-weight: normal
}

You can tinker with the font-size to make it large or smaller. If you make it smaller than 20px than you should set letter-spacing to 0px, and if you set the font-size to something greater than 25px, you should set letter-spacing to -2px.

The letter-spacing really makes it look nice, that’s the pizzaz that brings it all together and makes it easier on the eyes.

I usually tell people to not make the font in headers bold if they don’t have to, just make the text a bit larger than the normal text. Adding bold to the font-weight of the header above will make it look like this:

Great Looking Header Text

It’s not too bad, but in some cases it might be too much for the user — remember, you’re creating a website for the viewer not yourself, so keep their best interests in mind. If bold goes with the ebb & flow of your design than run with it, but I almost exclusively keep the font-weight to normal.

Use the CSS code provided and tinker around with the font-size and font-weight to get your desired result.