Font Tech Info Journal

All web designers eventually have to deal with differences in how their web pages look in different browsers. But one difference that may be overlooked is the way text is rendered in different browsers. This is a critical difference considering that most web pages are driven by text. Before we look at actual results, let’s discuss the reasons for the differences.

Each browser, in order to show text on a screen, needs to use a text rendering engine. The rendering engine takes the vector outlines of each letter and scales it, then decides which pixels should be turned on or off to best represent the shape of the letter. Most rendering engines will use a type of “font smoothing” to make curved edges of letters appear smooth. This can vary from a simple grayscale algorithm (using gray pixels of different degrees at the edges instead of black or white), to more complex methods, such as Microsoft’s ClearType® method. Every operating system contains its own text rendering engine, and many browsers make use of whatever engine is present on the OS that the browser is running on. Some browsers bundle a rendering engine in their own software, so that text rendered in that browser will look different than the same text displayed in most applications on the same system.

Let’s look at examples to see where these differences come up. For this test, I’ve used the typeface Verdana, since it contains a large amount of high quality TrueType hints. These instructions in the font software tell the text renderer how to render letters to make them clear and crisp, however many current rendering engines ignore these hints, instead using their own technology to try to get a smoother looking character shape.

Internet Explorer 7.0.6001.18000	Firefox 3.0.5	Google Chrome 1.0.154.53
Apple Safari 3.2.1	Opera 9.64

Internet Explorer, Firefox and Chrome all make use of the native OS’s browser, in this case Windows Vista (with ClearType). The very subtle differences in the 100% size among these 3 browsers are due to the way the browser calculates the pixel size of each letter based on the % given in the style tag. The ClearType renderer uses only some of the hints present in a TrueType font. Note that Safari is quite different, particularly at 75% and 50% size. This is because Safari uses a bundled version of Apple’s text renderer, similar to the one used in the Apple OS. This rendering engine ignores all hints that might be present in TrueType fonts, and uses a sort of grayscale technique to get a smooth letter. It does have the effect of giving a blurry, bolder letter at smaller sizes. The Opera browser uses a bundled version of the opensource FreeType text rendering engine. This engine makes use of all of the TrueType hints present in the font, unlike the other engines. This results in a very readable, if not as smooth looking letter.

All tests were done on a Windows Vista Home Premium PC. Note that these differences in rendering appear at all sizes, but are most evident at smaller text sizes. If your pages require small text such as footnotes or legal notices, you should test how your pages look in different browsers, with an eye to these changes.

The Boston Globe reported that it’s owner, the New York Times, may shut the Globe down if it cannot get concessions from the Globe’ worker’s union. Speculation exists that the Globe may be forced to stop publishing in print, and move to an online model, perhaps before the year’s end. This is an increasingly common story in the newspaper business. The Seattle post-Intelligencer recently moved to an online only edition, and the Rocky Mountain News had to close earlier this year. But what does this mean for the font industry? If the “internet is causing the death of newspapers”, fonts are certainly used on web sites, right?

Yes, but not custom fonts, at least not as often. The web is still caught up in a compatability issue, and many sites limit themselves to Times, Arial, Helvetica and Verdana because of that. A 2004 study by Ascender Corporation found that

…each of the top seven daily newspapers use typefaces specifically designed or commissioned on their behalf. Further, 35 of the top 100 daily newspapers use a custom typeface or modified font in addition to retail, off-the-shelf fonts.

But, four and a half years later, many of these papers are in the process of, or considering ceasing publication and moving to an online only edition. Will these papers be willing to invest in a custom typeface, especially if the bulk of their content will set with a “font-family” tag? This is something that the font business, especially those concerned with large custom font projects, must consider. It could be a forecast of things to come.

As far as a strategy to abate this risk, it seems that font professionals need to put more support behind ways to use custom fonts on the web. At the least, we need to push sIFR and similar efforts to use technology to display custom type, although many of these technologies are notably slow to do replacement of large pieces of text.

But our real support needs to go towards a standard for font embedding. A notable effort, also sponsored by Ascender Corp with the help of many notable type industry experts, is the site http://www.fontembedding.com/. This site has much information on efforts to standardize font embedding. The most important effort discussed on this site is EOT (Embedded OpenType), which could give a format for embedding font information in web pages. A recent submission regarding EOT was presented to the W3C by Microsoft and Monotype Imaging. This effort would go a long way towards getting by the current issues in the way of using type easily and effectively on the web.

The death of newspapers might be overstated, but it is certainly coming. And the font industry should take this as a sign that we need to step up the efforts to get a standard implemented for font embedding.