How to create smooth headlines with HTML and CSS?

Question

I saw a lot of web pages recently, that have very smooth headlines, like this website for example: http://boagworld.com/

How do they go about to do that? Are there any hidden clues?

At one point I heard from a technique where they used Flash (I think) to embed custom fonts onto a website and then replace normal headlines with this flash alternative.

What other ways are there besides flash?

Answer 1

Assuming you don't want to use images as text replacement, there are several techniques, that adapt font enhancement in very unobtrusive way:

• using flash - SIFR
• pure css = @font-face and directly embed fonts in ttf or otf
• javascript enhancement technique, the script is called Cufon

Personally I like to use web safe fonts with combination of less known and do proper fallback

Answer 2

They're just using images as the CSS background for certain things, in this case:

http://boagworld.com/wp-content/themes/BoagworldV2/images/logo.gif

You can do whatever you want with a few images and css, something like:

#header { background: #FFFFFF url(myLogoImg.png) center no-repeat; }

Answer 3

If you don't want to use image replacement or sIFR, but want custom fonts, you should take a look at TypeKit - http://typekit.com/. They let you call custom fonts (that they have licensed to you) directly from your style sheet with font-family, and use javascript embedded on your page to serve the fonts from their servers. I'm using it their service on a project right now and so far it seems to work well. They don't have a huge library of fonts available yet, but it's still bigger than Arial, Verdana, Georgia and Times New Roman.

Answer 4

I would recommend cufón for this. It's non-Flash (JavaScript), really really easy to set up, and degrades gracefully.