In the past, I used to have my web design based on primary browser of Internet Explorer; not that it’s the most sophisticated just that it’s the most browser used on the internet (and still is). The other concern I have is that for years it’s been well known among web designers that IE was also the browser with the least ability to support CSS standards at any given time, hence making our work on cross browser compatibility used to be a real challenge due to this family of browsers. Seen in this light also, if you’re able to make it to look nice on IE, then there’s a great chance that it will also looks good on any other family of modern browsers (IE, Firefox, Chrome, Netscape, Opera, Safari, etc.).

Firefox on the other hand, has always been the good friends of us designers since it enable us to pour our creative juice without much limitation. That is however, with a major lack in its font rendering capability; and it gets worse with the availability of online-based fonts.

Existed to replace the standard “safe” fonts which gave us the option to use other than the regular Arial, Verdana, and Times New Roman, the new font faces available online, like this Google Web Fonts set gives advantage for web designers to push the boundaries; many that can’t be accomplished by its previous generation of custom font visualizer like sIFR (Scalable Inman Flash Replacement) such as:

  1. Independence of Flash installation availability on the viewer’s browser
  2. Independence of Java Script activation on viewer’s browser

Sadly in this case, compared with other major browsers of the same generation (IE 7, Chrome 10), Firefox 3.6 is now the least savvy browser to support this online-based fonts due to its horrible looking anti-aliased font displays.

For example:

Font rendering in Firefox 3.6

Font rendering using Firefox 3.6

The better looking visualization however, could be achieved by applying the text-shadow element supported on CSS3; without trying to get too fancy, usually with applying a 1px shift to both coordinate, and use a lighter color than the font’s – but in line with the background color, then you could achieve a nicer looks for FF, while still play it safe on both IE and Chrome — wait, makes it look better instead, with the added depth, if you’re okay with that.


Font rendering using Firefox 3.6

Text shadowed font rendering using Firefox 3.6

Font rendering using Internet Explorer 7

Text shadowed font rendering using Internet Explorer 7

Font rendering using Google Chrome 10

Text shadowed font rendering using Google Chrome 10

To achieve this effect in the example, simply add the following element into the headers style:

text-shadow: 1px 1px 2px #999999;

And here’s the generic structure:

text-shadow: [x shift] [yshift] [blur radius] [color];

This solution of course, would not be applied for users with browser supporting only CSS2. But unless you are targeting users with very old browser, or very off the mainstream ones, this solution is applicable and worth to apply, as it would provide enhanced user experience for those with newer browsers, without taxing those with older ones. (byms)


Leave a Reply