This has been a common problem amongst web designers. You can opt for the standard H1 ttiles, which are standards compliant, search engine friendly and lightweight - but you can only use fonts that the visitor has on their machine.
The alternative has been to create an image containing your text. This looks much better, but is inefficient because images download much slower, and Search Engines don't index them as readily as H1 tags. It is also very difficult to use image based headings with a Content Management System, or where the titles are generated dynamically.
There is a Microsoft technology which allows fonts to be downloaded on the visitor's computer. Surprise, surprise this only works on IE, so it's not the amazing solution that it could be.
The new alternative is sIFR, a technique described in detail and available from http://www.mikeindustries.com/sifr/
This technique uses standard H1 tags on the page so that the page is standards compliant and search engine friendly. A piece of Javascript is inserted at the end of the document, which replaces the H1 tag with a small Flash object. Your custom non-arial font is embedded inside the SWF file, which allows the document to display your H1 text within the flash object. To the visitor, you have a custom font for your H1 text. For search engines and non-javascript / flash browsers you have a standard H1 tag.
The main downside is the extra weight this adds to your site. Firstly, there is a 10kb Javascript file that needs to be downloaded. SWF files containing your custom font average out at about 10kb per font. This overhead is a once-only download, the SWF and JS file should be cached by the browser. Certainly an added hassle for 56k users.
Installation is easier than expected, there is a Javascript and CSS file to include in your document, then a line of javascript to do the replacement.
The Green Headings in "Adventure" font on this site are an example of sIFR in action. These titles are generated from the CMS, and it's nice to have interesting looking headings that don't require lots of Photoshopping to maintain.
Related Articles
- Contextual Linking
- Javascript bug not IE's fault
- Automatic META Keywords
- Preventing Duplicate Content
- Search Engine Optimisation
post a comment
Post Comment
We welcome comments on this article, provided they have something to contribute. Please note that all links will be created using the nofollow attribute. This is a spam free zone. HTML is stripped from comments, but BBCode is allowed.