Greasemonkey Hacks

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. I'm 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.

Tip

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

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.

Tip

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 ...