Mike Schaeffer's Blog

June 30, 2005

For a few years, I used this graphic as the front matter for my website:


This, the logo for my website, is basically just antialiased text rendered into a bitmap. At the time, it seemed like a good idea to render the text as a bitmap because I didn't trust the browser to render it for me. Bad idea.

As it turns out, Internet Explorer rescales bitmaps on high resolution displays. This is a somewhat misguided attempt to make keep bitmap sizing consistent. Bitmaps aren't rendered at 1/1 zoom, they are rendered at screen_dpi/96dpi. On non-96dpi screens, that results in ugly scaling. While scaling can be disabled, that's not the ideal solution. The ideal solution is to do as much of the rendering as possible in the browser: which should know more about the client's display than the server. Therefore, my logo is now CSS formatted plain text. That means it looks the right size on more screens, anti-aliases appropriately, uses ClearType if it's available. The next step is going to be to switch from pixel sizes to 'real' sizes.