New from Typekit: Improved font rendering on Windows

As part of our ongoing work to improve type rendering, we’re rolling out some changes to the font outlines we deliver. To explain how this works, let’s first review how font files are rendered, and then look at some examples to show how we can improve upon them.

In previous posts, we’ve discussed how font files typically include outlines in one of two formats: TrueType or PostScript. TrueType outlines can include detailed instructions (usually referred to as “hints”) which provide additional information to the rendering engine. Hints can resolve the warts and inconsistent stroke widths that plague fonts in Windows browsers.

At small sizes (and especially when a font has been well-hinted), the Windows GDI rendering engine, with ClearType enabled, makes for clear, crisp rendering. But GDI’s ClearType subpixel antialiasing only works in one direction (horizontally). GDI ClearType does not smooth letterforms vertically, so diagonal strokes and curved strokes — especially at large sizes – can look pixellated, even if a font is well hinted.

Bello Pro, showing pixellation on the horizontal strokes
Bello Pro, TrueType outlines, GDI ClearType. Note the ugly stepping effect on the curved horizontal strokes, due to a lack of vertical smoothing.

Close up of Bello Pro with pixellation
Close up look at Bello Pro under GDI ClearType.

DirectWrite — the default rendering engine in IE9, and enabled via a user preference in Firefox 4 — corrects this problem; it uses ClearType subpixel antialiasing for horizontal smoothing, and also smooths letterforms vertically. However, many users have yet to upgrade and are stuck with GDI ClearType. And unfortunately, no amount of hinting can correct this.

There is a solution, however: due to a quirk in the GDI rendering engine, PostScript outlines cannot be rendered with ClearType, but rather display using grayscale antialiasing. Grayscale antialiasing smooths in both directions, and looks great at large sizes. So we can improve this rendering scenario by serving PostScript outlines instead of TrueType.

Bello, TT outlines on the left, PS on the right; PS outlines are dramatically smoother
Bello Pro: TrueType outlines on the left, PostScript on the right, both in Windows GDI with ClearType enabled. The PostScript outlines render dramatically smoother.

Starting today, we’re serving PostScript outlines for a number of fonts: Underware’s Bello Pro, as well as Calluna, Lapture Display, and Quatro. In each case, the rendering of the font is significantly improved:

Calluna before and after
Calluna: TrueType outlines on the left, PostScript on the right.

Lapture before and after
Lapture Display: TrueType outlines on the left, PostScript on the right.

Quatro before and after
Quatro: TrueType outlines on the left, PostScript on the right.

If you’re using these fonts, republish your kits to get the updates. We’re working closely with our foundry partners to identify additional fonts in the library that would also benefit from PostScript serving, and we’ll be rolling those out as we can. Stay tuned!

29 Responses

  1. Guys – this is glorious. Way to fix a previously very frustrating situation. Hope to see it roll out on as much type as possible.

    1. Well said and couldn’t agree more!

  2. Richard Cook says:

    What great great news. I’m a Mac user ;) but I always hated viewing webfonts on a Windows machine. Roll on the rest ;)

  3. Jeff says:

    Rad. If I had a site I cared about enough, or developed sites, I’d be a paying customer.

  4. Matt Wiebe says:

    Obviously this solution only makes sense if the font isn’t used at small sizes. Most of the above fonts are for display purposes, so the PS outlines makes sense, but Calluna is a text face, making it trickier. There might need to be an option for serving TTF of PS outlines in those cases, with suitable explanation about rendering and font size.

    Still, I love that you keep pushing the quality forward.

    1. Mandy Brown says:

      In many cases, grayscale antialiasing is comparable to ClearType at small sizes. We’re testing to make sure each font we serve with PS outlines will work at any size reasonable for its design. There may be cases where a font would need to be served as TT for small sizes, and PS for large sizes; but we’re continuing to explore how best to handle those fonts.

    2. Faruk Ateş says:

      @Mandy — What about making it an (advanced-user) option in the Kit for a font, so that when we design with it we can indicate “I plan to use this font very large, so use PS” or “This font will be my body type, use TT” ?

    3. Mandy Brown says:

      @Faruk: under consideration :)

  5. Will this change only affect display fonts? The samples you display here are at very large sizes. If you show smaller sizes, where hinting would help out legibility, I wonder what the effect would be?

    1. Mandy Brown says:

      PostScript outlines will not have any appreciable effect on fonts set in text sizes; for that, we are continuing to explore other options, including manual TrueType hinting.

  6. KJ says:

    Great start. Hoping that the Museo family will get added to the mix soon.

    1. Matt says:

      I agree. Please get Museo on board with this!

    2. Edgedesign.cz says:

      One plus vote from us! :o) Thank you.

  7. This is a hugely exciting development. Will you be working with FontShop to do this with their webfonts (both ones in TypeKit packages as well as purchased licenses that TypeKit is hosting for customers)?

  8. Richard says:

    Brilliant work as usual guys – this kind of passionate attention is exactly why I’m happy to be a TypeKit customer.

    Now if you’d just license Trade Gothic… ; )

  9. Great work guys. Would really appreciate a list of well supported fonts through all browsers/systems. Don’t want to spend time playing with fonts which look suboptimal on some platforms. Do you work on such a list?

    1. Mandy Brown says:

      We’re working on better exposing fonts that render well in the browsing UI; in the mean time, all our fonts feature browser screenshots that show how they render across all the major operating systems and browsers, so you can review a font before trying it out.

  10. Ryan Block says:

    Would love to shout out Proxima Nova — help us fix our Windows rendering! Much love, you guys are awesome.

  11. Font rendering on Windows is just horrid. Wish there was a way to get the weight up without GDI++. In case you don’t know about this tool: http://vladg.com/2009/03/make-windows-fonts-look-as-smooth-as-mac-os-x-fonts/

  12. ebrunborg says:

    Wow – this is the best webfont news since Typekit! Obviously the best thing would be if Windows changed their font rendering strategy from the outset ( I wrote about this a few weeks ago: http://8gramgorilla.com/the-end-of-anti-anti-aliasing-please/ ), but this is a step in the right direction. Well done guys, and keep it up!

  13. mailette says:

    Great work guys After designing a site on Mac and then testing on PC.. guh! Would be ace to see this across as many fonts as possible =)

  14. Awesome stuff and a huge step in the right direction. Currently we’re forced to replace a lot of fonts on Windows due to rendering discrepancies and its a royal pain. Can’t wait for the day when everything works perfectly across all browsers on all platforms!

  15. Luke Jones says:

    Amazing work. Type rendering in Windows is incredibly frustrating. Especially for fonts like Adelle… It looks beautiful on Mac but when viewed in Windows 7 it’s like being punched in the face by a child.

  16. Wei Huang says:

    Most of us have ClearType turned off since it makes most text look blurry anyway…?

    1. Mandy Brown says:

      Since ClearType is on my default in IE7 and higher, a majority of users have it turned on. Also, while some people think it looks blurry, many others believe ClearType is an improvement. These different preferences show (in part) how rendering involves everything from the design of the font, to the rendering engine, to the preferences of the user.

  17. Great! The windows rendering problem has kept me from using Typekit until now. Will you keep us updated on what fonts have been reworked?

    1. Mandy Brown says:

      Of course!

  18. Richard Fink says:

    A cool idea.

    The trade-off here is that if the font renders too small – due to zoom or a mobile-sized screen, to name two things that will influence the amount of pixels available for rendering – there can be some annoying side effects, like uneven horizontal alignment which a hinted font with TT outlines can preserve at the smaller size.

    I’m interested in which browsers this technique helps?
    Some quick tests of mine show that Chrome responds well. As does FireFox.
    In IE there’s no diff, unless I’m missing something.
    In other words, specifically in which browsers and platforms will this improve matters?
    Where will you see a difference?

    1. Tim Brown says:

      Thanks Rich!

      PostScript-based outlines make a difference in all Windows browsers except IE<8. Additionally, large type looks great in browsers that use DirectWrite — no matter which outline format is used. The reason PS-based outlines don't affect IE<8 is because the EOT format, used in those browsers, requires TT-based outlines.

      As for zooming and resizing, you have quite valid points. Serving PostScript-based outlines is just one of many techniques we use (and will use) to get type looking as good as it can. Right now, we seek TrueType hinting if a typeface is meant for text use; similarly, we serve PostScript-based outlines to Windows browsers if a typeface is meant for display use. In the future, we hope to do things like make both formats available (based on size, or perhaps via user preferences), and assist designers with media-query-based decision making.

      If you have a particular situation in which our decision to serve fonts with PostScript-based outlines is creating unintentionally problematic rendering, please let us know: support@typekit.com. We'd be happy to discuss at length, and work through the specific issue with you.

Comments are closed.