Detecting font smoothing with JavaScript

“Progressive enhancement”, “graceful degradation”, “hardboiled”; these are just a few of the terms we hear being frequently passed around designer and developer conversations nowadays. However, it is quite understandable that others, especially clients, involved in a web project might not have heard or fully understood what these terms mean. It is not uncommon to hear someone ask why the site looks “different”¹ on their browser when compared to the designs or when they see it on their home or colleagues computer. This can lead to a lot of questions being asked as you try to explain browser inconsistencies and enhancing for modern browsers etc. Some people might argue that it is about managing expectations from the start, but whatever the case sometimes you just have to “fix” it. CSS3 has certainly increased the likelihood of this scenario happening, as developers look to include properties like font-face and transformation into a site.

However, these CSS properties can have a profound effect on the user’s experience. One issue that has been at the back of my mind recently is the effect font smoothing can have when using transformations and custom fonts, which can result in text being rendered quite differently:

– Font smoothing in Windows XP using Firefox 3.6.

Though I believe the number of users who have font smoothing disabled to be quite low³, I found myself looking around to see if such a thing as detecting font smoothing was possible; and guess what, it is! Let me introduce you to detecting font-smoothing by Zoltan Hawryluk. This excellent, lightweight, JavaScript file uses the Canvas element to draw a shape (a letter “O” to be precise) and detect if there are any semi-transparent pixels. Genius!

– A close-up of font smoothing disabled and enabled.

With the hasSmoothing function returning “True”, “False” or “Null” we can then insert a class on our element to use as our CSS hook.

me.insertClasses = function(){
  var result = me.hasSmoothing();
  var htmlNode = document.getElementsByTagName("html")[0];
  var classValue = "hasFontSmoothing-unknown"; // result == null by default
  if (result == true) {
    classValue = "hasFontSmoothing-true";
  } else if (result == false) {
    classValue = "hasFontSmoothing-false";
  }
  if(!htmlNode.className) {
    htmlNode.className = classValue;
  } else {
    newClassName = htmlNode.className;
    newClassName+= " ";
    newClassName+= classValue;
    htmlNode.className = newClassName;
  }
 }

I modified this method slightly to detect if a class on the element already exists in which case the correct spacing between class names could be maintained. From here on we simply need to style our page using the selectors accordingly:

...
body {font-family: Arial,sans-serif; }
.hasFontSmoothing-true body {font-family: 'QuicksandBook', Arial,sans-serif; }
...

How you use these selectors is up to you. Personally I would like to think that the majority of visitors would have font-smoothing enabled and therefore make it the default:

...
body {font-family: 'QuicksandBook', Arial,sans-serif; }
.hasFontSmoothing-false body {font-family: Arial,sans-serif; }
...

Another point worth making is that Zoltan uses an additional function, originally created by http://dean.edwards.name/weblog/2005/09/busted/”>Dean Edwards, to initialise the font-smoothing detection function as soon as the DOM is ready. This is a great approach as large pages might cause the DOM to wait for other resources to download. In the demo I have combined the event helper and font smoothing function into a single file. You could remove this event helper function and simply initiate the font-smoothing detection script on window load if you wished:

window.onload=function(){TypeHelpers.insertClasses();}

However, using the event helper function minimises a flash of un-styled content that can sometimes occur due to the DOM being loaded but waiting for other files to download. There we have it, now we can detect font smoothing on a users machine and style our CSS accordingly.

1. Maybe there are no rounded corners on older browsers.
2. Technically it is not broken. You build it with progressive enhancement in mind.
3. Font smoothing statistics seem to be a little rare.