How to create smooth headlines with HTML and CSS?

views:

287

answers:

+5 Q:

How to create smooth headlines with HTML and CSS?

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?

+7 A:

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

Juraj Blahunka 2010-02-22 22:21:57

+1 for complete list. I have worked only with sIFR but it is a bit haggly to set up sometimes. People (at least around here) seem to like cufon better.

Pekka 2010-02-22 22:24:27

Exactly, sIFR was the name of that Flash implementation. Thanks very much!

Sebastian Hoitz 2010-02-22 22:25:28

The only downside of using cufon is that fonts with proper encoding for mid-european charsets are rare to find.. also the prepared font script becomes large

Juraj Blahunka 2010-02-22 22:26:44

FWIW, the site in question is using images. This is the oldest way (and therefore the most acceptable way) of doing it. The CSS font-face method is probably the most modern way of doing it.

Josh Stodola 2010-02-22 22:29:03

@Juraj On smashingmagazine.com are a lot of font-collections with also european characters: http://www.smashingmagazine.com/2009/06/05/beautiful-high-quality-free-fonts-for-your-designs/ (see additional entries at the bottom)

Sebastian Hoitz 2010-02-22 22:33:16

@Sebastian thanks for recommending :)

Juraj Blahunka 2010-02-22 22:34:51

+1 A:

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; }

Nick Craver 2010-02-22 22:22:24

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

Skilldrick 2010-02-22 22:25:06

+1 A:

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.

nickfrench 2010-02-23 01:02:03

ansaurus

tags:

views:

answers:

How to create smooth headlines with HTML and CSS?

related questions