Smooth text everywhere!

My web browsing experience, at least at work, is still not beautiful. The text that I read has no font smoothing on Windows XP, in any browser but Internet Explorer.

As an aside, here’s why: Microsoft has ClearType turned on in Internet Explorer in XP (The most common OS) by default. The result of this is that all the other browsers look poor in comparison.

This seems like a strategic move by Microsoft to give their browser an advantage, but it also means that ClearType is not turned on in Windows XP by default for all views. Poor Windows XP users.

I realize that I can turn on ClearType, but as a frontend web developer, I should try to see what my users are going to see (current OS stats), and therefore I leave it off. It’s hard to know how many XP users leave ClearType off, but I’m guessing the majority.

Getting back on the topic…. In Windows browsers, my text is ugly and jagged. But there is a way to render beautiful, smooth text. Well, there may be more than one way, but the solution I have is Cufón.

Cufón takes a font file, strips it of all the glyphs you don’t need, converts it to an SVG font, then to SVG paths which are converted to VML paths, and then into JSON with functional JavaScript. Converting to VML paths ensures that font replacement is very fast in Internet Explorer. Also, I like that the font can be customized and reduced to just the glyphs you need; since font files can be very large, this compression is a nice benefit. The “cost” of this is a font file and a Javascript file that add up to be about 50K, although you should serve your Javascript gzipped.

You can read more about the details of how Cufón works here.

One gotcha with Cufón-generated text is that it is not selectable, which may not be very accessible or adhere to web standards.

As users we can optimize our web browsing experience however we like, but as fronted developers our job is to make our pages look as good as possible, for as many people as possible. We can’t just ditch our browser. But the extra effort pays off, because for those who are not used to seeing text rendered nicely, a slick heading, for example, really stands out.