/ log / 22nd Oct, 2007 /

Smoothing out the Creases in Web Fonts

Stickman smoothing out the contour in a ligature.

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.

Comparing fonts at 14px and 800% maginifcation in OSX and Vista.

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:

IE6 on windwos XP font rendering

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

For your bookmarks: The Web fonts test suite displays text from all the fonts in a range from 11px to 21px so you can compare and contrast yourself.

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.

Typeface Pixel size for smooth anti–aliasing
Regular Bold Italic Bold Italic Small Caps
Andale Mono* 18 11 18 18 21
Arial 18 11 18 12 21
Arial Black 17 17 17 17 20
Comic Sans MS 16 11 16 11 18
Courier New - 16 - 17 -
Georgia 17 17 17 17 20
Impact - - - - -
Times New Roman 18 14 21 18 21
Trebuchet MS 17 12 17 12 20
Verdana 17 17 17 17 20

* 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

Browse More Articles

19 Comments

  1. 1. By Steve Avery on 23rd Oct ’07 at 07:09am

    Hey Jon.

    Great article, nice one… thought it would be good to mention to you that yesterday I noticed on a site that I’m working on (mentioned it to you last time we met) which uses a transparent png panel with text on had issues in IE6/7.

    To be honest I didn’t notice it but once it was pointed out to me it was clearly evident.

    The issue was that the text that is sat on top of the tranparent png kills the quality of the ClearType in IE6/7. Wierd I know but for some reason it renders the text differently if on a transparent background panel. So asked my good friend Google to see if he/she was aware of anything and I found this IE Blog article.

    Hope that helps out others who comes across this.

  2. Jon 陳’s profile 2. By Jon 陳 on 24th Oct ’07 at 06:06am

    Thanks Steve, great additional information.

  3. 3. By Ben Sekulowicz on 2nd Nov ’07 at 08:38am

    In your article you have used examples from Firefox on OS X to display the font-rendering abilities of the oeprating system. I can’t find any linkable proof to support this claim, but I *think* Firefox uses it’s own rendering engine, and not the engine that drives OS X and the Safari browser. Might be something worth noting …

    (On my CV the rendering of Myriad Pro, (if you have it) is remarkably different in Safari 2 and FF 2).

  4. Jon 陳’s profile 4. By Jon 陳 on 2nd Nov ’07 at 10:59am

    Hi Ben. I think you may be partly right, and make a useful point, although this article is primarily about grid fixing versus floating point positioning which Firefox on OS X uses, albeit with its own engine.

    Jeffery Zeldman’s article on Firefox and Safari text rendering (including the comments) is interesting. Aronnax’s comment that the difference in OS X is Firefox using Quickdraw until 3.0 and Safari using Quartz piqued my curiosity, although I can’t find reference to the current status but will keep looking.

    I’ll update if I find anything more and if you discover anything related, please let me know.

  5. 5. By Esben Thomsen on 10th Apr ’08 at 17:10pm

    Hi Jon,

    Thanks for a interesting article, a debate I somehow have missed.

    I might want to add, that in Firefox no matter version (so far as I know), the anti–alias kicks in at 0.85em or 13.6px on OS X. I do believe its also something that happens on Linux and Windows, but I haven’t testet it yet.

    The IE 6 chart for Georgia is very handy.

  6. 6. By Joakim on 29th Apr ’08 at 06:29am

    This is absolutely worth thinking about! Thanks for a great article!

  7. 7. By Firebubble on 23rd Jul ’08 at 11:37am

    Hi I feel this is commonly missed out in web design and never brought to light, but it is definitely something to keep in mind. The web font table is really useful

  8. 8. By Gustavo Ferreira on 9th Nov ’08 at 07:26am

    The size at which text starts to become smoothly anti–aliased seems arbitrary.

    in truetype fonts there is a table called ‘gasp’ (short for “gridfitting and scan-conversion procedure”) – it allows the designer to specify at which sizes gridfitting and anti-aliasing are turned on/off, independently from eachother.

    ‘gasp’ settings follow a certain logic: at the smallest sizes (ex: < 8px), only anti-aliasing is used; at text sizes (~8-16px), only gridfitting is used; and for sizes bigger than that, both anti-aliasing and gridifitting are turned on.

  9. 9. By Leicester on 5th Jan ’09 at 03:13am

    Hey I found that table extremely useful, thanks for sharing it.

  10. 10. By Milton on 9th Feb ’09 at 07:10am

    I agree with Leicester that table is great!

  11. 11. By Creare Design on 25th Feb ’09 at 06:23am

    Yeah I agree that table is incredible, I have been paying extra special attention to typography on the last few sites and I have continually been referring back to this post.

  12. 12. By Timo on 18th Sep ’09 at 06:23am

    Hi Jon,

    highly useful article, as always. Thanks a lot!

  13. 13. By Charlie on 7th Feb ’10 at 05:46am

    Thanks for the article

  14. 14. By JB on 25th May ’10 at 05:44am

    Thanks for this article. It explained a few things I have been wondering for a while.

  15. 15. By Robert Bremner on 28th Feb ’11 at 09:54am

    Thanks for writing this article and keeping online to refer back to.

  16. 16. By Barry Reynolds on 25th May ’11 at 08:34am

    This is great, font are a pain on the web sometimes. Have to say the typography on this page is excellent!

  17. 17. By Kjell Peter on 18th Jun ’11 at 05:50am

    Thank you for sharing your findings. Cross operating system typography is sometimes a mess. Especially your “typo-tables" are very useful.

  18. 18. By Martin on 6th Jul ’11 at 21:00pm

    It explained a few things I have been wondering for a while…

  19. 19. By DarkStar on 29th May ’14 at 20:02pm

    I agree with Leicester that table is great!

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

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 {66}

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

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

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

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

    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 {5}

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

Remarks from the log

  1. By OddsRİng Giriş in Ides of March:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  2. By OddsRing Giriş in Ampersand, the Aftermath:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  3. By OddsRing Giriş in Design Festival, The Setup, and Upcoming Posts:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  4. By OddsRing Giriş in We, Who Are Web Designers:

    pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a printer could afford. ucuz…

  5. By Otomatik Rent A Car in Typeface != Font:

    each typeface has its own personality, appropriate to the message it has to convey suit the usual measurements of…

  6. By OddsRing Giriş in Typeface != Font:

    pts to 72pt (an inch high) and sometimes 84pt and 96pt, or as large as a printer could afford. ucuz ukash Type…

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

Live the questions and one day grow into the answers.