I was building my husband’s site and thought I would try out some of the newly available browser features: @font-face and text-shadow.
David doesn’t use a business name, and the focus needs to be on his services and not him personally. In case he wants to change the site name, the header needs to be text and not a graphic. For his name I specified Fontin Sans SC (using @font-face), Lucida Grande, Verdana, sans-serif. The tagline is Georgia.
The desired header (Firefox 3.5)
Looks pretty good, doesn’t it? Sigh.
In Internet Explorer his name disappeared completely, so I adjusted the colors. It’s a little more gaudy than intended, but it will work.
Google Chrome (Win) - added 7/25
Opera 9 (Win)
Safari 4.0 (Mac)
Firefox 3.5 (Win)
Firefox 3 (Mac)
IE 8 (Win)
IE 7 (Win)
IE 6 (Win)
I was disinclined to fire up the second PC for this post, so the IE 7 and IE 8 screenshots are courtesy of IE Net Renderer. My laziness also explains why there’s no screenshot from Google Chrome.
Update August 20, 2009: I couldn’t handle the variation in headers. It was too confusing to me to have the site look different depending on which browser I had open. It was an interesting experiment, but I felt like the trade-offs required to make the header usable for all browsers exceeded any design benefits.
