Fonts are rendered differently among different operating systems and devices. They depend on the algorithm employed by the system of the visitor. In this post I will share some ways to overcome this behavior so we get a similar experience.

A disturbing bug

Last week I was informed that some heading fonts were blurry on Sparked's marketing site. I checked them out on my machine (Ubuntu 12.04) and they seemed OK. Was it that they were super demanding about the font quality? Nope: an analysis of the site with an Apple machine showed a pretty blurry font.

We are using 3 versions (regular, semi-bold and bold) of the Proxima Nova fontype. Therefore, my first reaction was to check if we were forcing a stronger font-weight to our custom fonts. Some time ago, I experienced problems when a font-weight: bold/800 was forced on an external font-face, producing a blurry and less than ideal result. A usual best practice derived from this issue is including a font-weight: normal; whenever we load an external font-face. It wasn't that either.

A CSS fix

Luckily that day Sparked's designer Chad Renard was around and enlightened us with the solution: changing the rendering mode of the browser. We applied the following styles and everything looked much crispier:

.h1,
.h2,
.h3,
.h4,
.h5 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

The Font Rendering Issue

Why is there a difference? The short answer is that OSX's rendering algorithm places first the fidelity to the typeface over crispness, while Windows' font rendering values crispness over fidelity to the font. Ubuntu's default font rendering is arranged between these two in terms of crispiness.

So antialiasing algorithms are different for each OS/Device, which produces very diverse results. Another aspect that makes this issue harder to detect is the fact that Photoshop handles its own rendering algorithm, so we will experience these differences only when we test in the browser, not before.

An OS level approach

You can change the default font rendering algorithm of your machine, like they suggest in this question for Mac and in this other post for Ubuntu. Obviously this solution will solve the issue for us, not for our users.

What I learned

From the point of view of a web developer, trying not only different browsers but also different devices becomes more important and almost the only way of getting a proper idea of how our sites and web-apps will look for our users.

Another outcome will be the inclusion of the previous CSS snippet in my future project's base file.

Did you know about this issue? How do you handle it?

More about it:

• Antialiasing 101 on HTML5 rocks
• Subpixel Rendering on Wikipedia
• Better Font Rendering on OSX

Photo credit: Nina Matthews cc