Hack 21. Banish the Scourge of Arial

Make the Web a typographically better place.

The Arial font is the bane of typographical snobs everywhere. Originally conceived as a cheap clone of Helvetica (due to licensing fees), Arial was adopted by Microsoft in Windows 3.1 and has since taken over the world. Firefox uses Arial as one of the default fonts for web pages that don't specify a default. Despite the rich capabilities for specifying multiple fallback fonts in modern browsers, Arial continues to dominate typography on the Web.

The first thing I do when I reinstall Windows (and the first thing you should do before running this hack) is change the default font in Firefox. Under Windows, select Tools Options to open the preferences dialog. In the General pane, click the Fonts & Colors button and change the Sans-Serif font from Arial to something else. Im partial to Helvetica or Verdana on Windows, and Mac OS X comes with a handsome font called Optima. But almost any choice is better than Arial.

Read more about the history of Arial at http://www.msstudio.com/articles.html.

3.2.1. The Code

This user script runs on all pages. It iterates through all the elements on the page and gets the element's style (using getComputedStyle), then removes Arial from the list of fonts for that element.

You might think that you could simply access an element's style by checking its style attribute. But this attribute includes only inline styles defined in a style attribute on the original page. It doesn't include styles applied by external stylesheets. To get an element's actual style, you need to call the getComputedStyle function.

Save the following user script as scourgeofarial.user.js:

 // ==UserScript== // @name Scourge of Arial // @namespace http://diveintomark.org/projects/greasemonkey/ // @description banish the scourge of Arial // @include * // ==/UserScript== var arElements = document.getElementsByTagName('*'); for (var i = arElements.length - 1; i >= 0; i--) { var elm = arElements[i]; var style = getComputedStyle(elm, ''); elm.style.fontFamily = style.fontFamily.replace(/arial/i, ''); } 

3.2.2. Running the Hack

As I mentioned before, the first thing you should do is change your default sans-serif font from Arial to something else. If you don't do this, this hack won't have any effect, because an element with a font declaration of Arial, sans-serif will be changed to sans-serif and use the default font, but the default font would still be Arial!

Before installing the user script, go to http://www.google.com, which uses Arial for all the text and links on the page, as shown in Figure 3-1.

Now, install the user script (Tools Install This User Script), and refresh http://www.google.com. You will see the text and links change to the font you defined as your default sans-serif font in the Firefox preferences dialog. I changed mine to Verdana, as shown in Figure 3-2.

Figure 3-1. Google.com with the scourge of Arial

Figure 3-2. Google with Verdana instead of Arial

3.2.3. Hacking the Hack

Currently, this hack only removes Arial; it doesn't replace it with anything. Web pages that define Arial as the only font will end up with no font declaration at all, and Firefox will display them with a serif font such as Times. To get around this problem, we can update the script to substitute sansserif instead of removing Arial altogether.

Change this line:

 elm.style.fontFamily = style.fontFamily.replace(/arial/i, ''); 

to this:

 elm.style.fontFamily = style.fontFamily.replace(/arial/i, 'sans-serif');