Geek Answers Handbook

How to create smooth headers with HTML and CSS?

I have recently seen many web pages that have very smooth headings, for example this website: http://boagworld.com/

How are they going to do this? Are there any hidden clues?

At some point, I heard a technique in which they used Flash (I think) to embed custom fonts on a website, and then replace the usual headers with this alternative.

What other methods are there besides flash?

+7
html css fonts webfonts
source share
4 answers

Assuming you don’t want to use images as a replacement for text, there are several methods that very unobtrusively adapt the font extension:

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

Personally, I like to use web safe fonts with a combination of lesser known ones and make the right reserve

+9
source share

They simply use images as 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 multiple images and css, something like:

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

If you do not want to use image replacement or sIFR, but want custom fonts, you should take a look at TypeKit - http://typekit.com/ . They allow you to name custom fonts (which they licensed for you) directly from your style sheet with a font family, and also use javascript built into your page to serve fonts from their servers. Now I use it in my project by project, and so far it works well. They don't have a huge font library yet, but it's still bigger than Arial, Verdana, Georgia, and Times New Roman.

+1
source share

I would recommend cufón for this. This is non-flash (javascript), really very easy to set up and wears out gracefully.

0
source share

More articles:


All Articles