Smoothing out the Creases in Web Fonts

Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems.

Apple OSX and Microsoft Windows have different ways of rasterising fonts and different text rendering engines. Apple’s text rendering engine is Apple Type Services for Unicode Imaging (ATSUI .) Microsoft’s text rendering engine is Uniscribe .

Font Rendering Methods in OSX & Windows

OSX tries to respect the anatomy of the type as far as it can using floating–point positioning — a combination of anti–aliasing techniques and sub–pixel rendering that does not lock glyphs to the pixel grid.

Windows uses two methods depending on the version of the operating system, (Standard and ClearType.) Standard uses a combination of hinting (grid fixing) and anti–aliasing. ClearType also uses sub–pixel rendering — using LCD display technology to achieve better anti–aliasing. With both of them, it prefers to lock the letters to the pixel grid.

Fig. 1: Firefox 2 on OSX (left) and IE7 on Vista (right) font rendering at 800% magnification.

ClearType is enabled by default in Windows Vista. In 2001, Windows XP had ClearType included but enabled Standard mode by default. Changing to ClearType requires navigating through the Control Panel to find the Appearance settings, then finding a button marked “Effects” to access the options. It’s the Windows equivalent of trying to change the accessibility options in browsers: Even if you know they exists, they’re a pain to find.

The legibility of each technique is subjective, and also depends on factors like ambient light, resolution, viewing distance, visual impairment, screen type and colour contrast.

Dave Shea prefers Windows’ ClearType method, as does Jeff Atwood and much of his commentators. For judiciously sized body text I mostly prefer the Apple method, yet previously in brand work I’ve also locked the letters to the pixel grid to get them as sharp as I’d like. Again, it’s subjective: How I see the individual font appear at a particular size and colour is the deciding factor.

Core Web Fonts

In August, 2007 Apple and Microsoft renewed the license for the core Web fonts. It was anticipated, but still, there was a collective sigh of relief that the fonts would still be common to all major operating systems. Matthew Carter, the designer of Georgia and Verdana said:

“By agreeing to make these fonts available cross–platform Microsoft and Apple will support their customers, and confirm their respect for the standards of type–design.”

Using the default Standard mode in XP, text is rendered with minimal (practically non–existant) anti–aliasing up to a certain size. The size at which text starts to become smoothly anti–aliased seems arbitrary. Good smoothing occurs at various sizes for each variant of each typeface. XP is still the most common platform used by our audience today, and this is how it displays Georgia in IE6:

Fig. 2: Screenshot of Georgia displayed in IE6 on Windows XP clearly showing smooth anti–alias starting at 17px.

Smooth Header Font Size for Windows XP

The Web Fonts test suite was used to produce the following table that compares the core Web fonts, and the size in pixels at which good anti–alias starts to occur in XP by default. (Every browser except Safari.) Only whole pixel font sizes were used.

* Andale Mono does not ship with Windows Vista.

Noticeably, Impact is never smoothly anti–aliased, and Courier New only when embolded (perish the thought.) The font being rendered with smooth anti–aliasing at the lowest size is Comic Sans; a fact that might produce a wry smile from its creator, Vincent Connare, who never intended Comic Sans to be used outside of the speech bubbles in Microsoft Bob.

Designers can choose to ignore the smooth anti–aliasing point in XP Standard mode altogether. My view is that headers look better when smoothed as much as possible, so a careful choice of weight for the font is important. Now there’s an added complication. ClearType in Vista seems worse in some circumstances to me than the Standard method, but that is a post for another day.

Future Font

Apple’s patent application for a system and method for displaying text—invented by Mark Zimmer—from June 14th, 2007 may make interesting reading for some. It includes references to grid fitting / hinting, specifically a method that, “increases contrast of tops of lowercase characters of the font family and preserves thickness at tops of stems of lowercase characters.”

In the future, the debate around platform specific font rendering may all be moot, as displays move to ever higher numbers of dots per inch and pixels per inch (160 as per the iPhone.) For now, how a given fonts behaves on different platforms is still crucial to user experience. I’ll still be keeping an eye on XP for a while yet, and I have a funny feeling I’ll be getting good use out of the table for a while, too.

1. Resources and further reading:
   1. Web fonts test suite
   2. Apple Type Services for Unicode Imaging (ATSUI)
   3. Microsoft Uniscribe
   4. Apple TrueType Reference Manual
   5. Microsoft TrueType Reference Manual
   6. Wikipedia: Font Rasterization
   7. Wikipedia: Anti–aliasing
   8. Wikipedia: Font hinting / grid fitting
   9. Wikipedia: Sub–pixel rending
   10. Microsoft ClearType
   11. ClearType tuner for XP

Share

Lately in the Log

1. Anakin — Tue, 26th Jun 2012 {4}

   I’m pleased to be able to say that Analog is joining forces with…

2. We, Who Are Web Designers — Mon, 19th Sep 2011 {65}

   In 2003, my wife Lowri and I went to a christening party. We were friends…

3. Ampersand, the Aftermath — Wed, 22nd Jun 2011 {2}

   The first Ampersand web typography conference took place in Brighton last…

4. Design Festival, The Setup, and Upcoming Posts — Mon, 20th Jun 2011 {1}

   Wow, this has been a busy period. I’m just back from the Ampersand…

5. Web Design as Narrative Architecture — Wed, 30th Mar 2011 {12}

   Stories are everywhere. When they don’t exist we make up the…

6. Ides of March — Tue, 15th Mar 2011 {4}

   My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

1. By Pravat in We, Who Are Web Designers:

   Nice to read Jon. When I introduce myself I usually say <blockquote> I’m a web…

2. By Esteban Valles in Web Design as Narrative Architecture:

   Thanks, what a great article.

3. By Shoutheasken1961 in Design Festival, The Setup, and Upcoming Posts:

   Most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern…

4. By M. Slack in Designer PHP: A Dynamic Menu with If and Else:

   This is fantastic! I wish I would have found this sooner! Thank you.

5. By Martin Varesio in Anakin:

   We share the same ethics and ambitions. We have fun together..!

6. By K.P. in Designer PHP: A Dynamic Menu with If and Else:

   Thank you. I’ve just started a new project using Bootstrap for the first time and I’ve been struggling…

People and XFN

Analog folks:

1. Andrei Zmievski

2. Chris Shiflett

3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

1. Ben Ramsey

2. Dan Mall

3. Denna Jones

4. Ed Finkler

5. Elizabeth Naramore

6. Elliot Jay Stocks

7. John D. Boardley

8. Helgi Þormar Þorbjörnsson

9. Joe Leech

10. Jos Buivenga

11. Kester Limb

12. Nicola Pressi

13. Patrick H. Lauke

14. Piotr Fedorczyk

15. Richard Rutter

16. Rick Hurst

17. Sean Coates

18. Simon Pascal Klein

19. Terry Chay