Blog

New article: Font Smoothing Explained

While working on the recent redesign, I decided to leave IE testing until the very end. It turned out to be almost a good decision. It certainly saved me a lot of time and sanity. However, it also made me overlook how the type looks on Windows. And, damn, it looks bad.

Mac OS X
szafranek.net on Mac OS X
Windows
szafranek.net on Windows

I decided to build the whole design upon a single typeface, Palatino. I used rich typography, including big headers. The results look great on Mac OS X. When the design had been completed and almost all the code had been written, I checked how did it look on Windows XP. It was a terrifying experience. Just look at the screenshots. When compared to the full, smooth shapes on OSX, glyphs on Windows look like an anorectic abomination.

I’m not a Mac fanboy and I really appreciate what Microsoft has done for web typography. The problem is that Microsoft’s most popular operating system doesn’t, by default, use any kind of font smoothing. It makes typographic efforts almost futile as most of the users won’t be able to experience the type as it was designed.

I decided to devote some time to research how different operating systems display type and how it should affect the work of web designers. The main conclusion is that displaying fonts correctly is almost impossible task due to ridiculously low resolution of computer screens. This fundamental limitation is another obstacle that any designer thinking about typography must consider while selecting the typeface and its size. I summarized the research and tips for designers in the article:

Font smoothing explained

I hope you’ll find it useful. Comments are welcomed.

PS. Big thanks to Carolyn Harman, my faithful editor :).

Comments

  1. Hey Krzysztof!!!

    Great page. Perfect look! And this article is well done! Thanks. BTW Adding you to my last.fm. Cheers.

    Lukas from Prague ;)

Leave a Reply

Your email address will not be published.

You can use the following HTML tags: a, acronym, b, blockquote, cite, code, del, em, i, q, strike, strong.

Respect others.