Cure for the Common Webfont, Part 2: Alternatives to Georgia

For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now, in web type’s infancy, we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned—and in some cases drawn from scratch—for the screen.

Unfortunately, there are still few worthy replacements, and none are more readable in all environments than Georgia itself. With time, that will change. Meanwhile, make testing a part of your font selection process. A font you like on your OS X screen is often a very different (and sometimes even illegible) font in Windows. That’s why this list is limited to fonts that perform adequately at text sizes in the harshest rendering mode that is still common: Windows XP with ClearType off.


Georgia, Chaparral Pro Caption, and Le Monde Journal, with default Windows XP antialiasing

I use the word “adequate” cautiously, by the way. Even among these top class fonts, grayscale rendering (Windows XP) is uneven compared to Georgia, which was created to match the pixel grid. The screenshots above show Chaparral Pro Caption, which takes Win XP butchering fairly well, and Le Monde Journal, the bottom of our bunch. Of course, my standards may not be yours, so again, test before you commit.

Fedra Serif Screen

Available from: Typotheque

Typotheque’s Fedra Screen family, with Sans and Serif partners, is arguably the most well hinted of any on this list. Check out the samples and you’ll see that it suffers from very few of the grayed or missing strokes that most webfonts do in Windows XP. In fact, Fedra on Windows looks quite different than it does on the Mac or in print. This is because it was painstakingly optimized to match the pixel grid, much in the same way that Georgia was. You sacrifice some of the typeface’s character for high legibility on all systems”a fair tradeoff for many jobs. For some, Fedra’s extremely narrow italics might be a buzz killer, but they render remarkably well.

FF Tisa

Available from: FontShop, Typekit

Early out of the gate, and chosen by some well respected folks for their own sites, FF Tisa has become a web designer’s darling. This is one of the first examples of how to do screen fonts right. Its rugged build, short serifs, lack of decoration, and gently leaning italics are all well suited for the pixel grid. It also has the benefit of being clearly different than Georgia, for when you really want to make a change in text face count.

Websites using FF Tisa: Hicksdesign, Made by Many, Elliot Jay Stocks, Long Shot Magazine, more

Benton Modern RE

Available from: Webtype

Despite its name (it references the Modern classification to which its print companion belongs) Benton Modern feels almost antique. It comes closest to replicating Georgia’s Scotchy appearance, with even more pronounced ball terminals and a wider stance. Like the other Reading Edge (RE) fonts from Font Bureau, it is one of the rare families drawn from scratch (not merely hinted) specifically for small sizes on screen. Its sans counterpart performs equally well.

Websites using Benton Modern RE: Webtype Blog, The Dale Guild

Chaparral Pro Caption

Available from: Typekit

With an open aperture and sturdy serifs, Humanist slabs make ideal screen fonts. Chaparral Pro Caption is also an example of how typefaces that were built to withstand small sizes in print can be good for the harsh conditions of the screen too. It does this while maintaining Chaparral’s casual personality. A great choice for informal copy.

Websites using Chaparral: A Working Library (though not Caption), Involver

FF Meta Serif Web

Available from: FontShop, Typekit

With its low stroke contrast and large x-height, FF Meta Serif is just right for screen text, especially when paired with its famous sans partner. FontFont’s legendary production team did an excellent job tuning it for Windows. My only quibble is that the letterspacing can feel a bit tight at some sizes.

Websites using FF Meta Serif Web: Alduvi, AllDevJobs, Dallas Society of Visual Communications, more

Droid Serif

Available from: Font Squirrel, Typekit, Webtype, Google

Steve Matteson and Ascender’s many years of screen font experience paid dividends in this family created for the Android platform. I’m not a huge fan of the overwrought lettershapes at large sizes, but Droid performs admirably at text sizes and has a sans companion.

Sabon Next

Available from: Fonts.com

I can be accused of giving Fonts.com’s Web Fonts service a tough time. This is mostly due to their awful presentation up front and, more importantly, their lack of browser/OS samples revealing the quality of their fonts in all render environments. Thanks to screenshots sent to me by Dan Reynolds, I’m pleased to report that at least some Monotype and Linotype fonts are hinted by hand. Sabon Next is one. It’s a welcome option for those who want a Garamond/Garalde face. And the hand hinting means that the delicate shapes and low x-height don’t punish it too much at small sizes.

Ibis RE

Available from: Webtype

In most settings I think Cyrus Highsmith’s Ibis is really strange. Almost too strange. But as a webfont it excels. Its unusual squareness serves it well on screen. In my experience it works far better in some pixel sizes than others, so experiment before judging.

Minion Pro Caption

Available from: Typekit

Like Chaparral Caption, another typeface designed for small sizes that translates well on screen. Not quite as readable as Chaparral below 16 pixels, but good if you want a more classical appearance.

JAF Lapture

Available from: Typekit

With its angular finish, Lapture is easily the most unusual face in the list. But its underlying structure is actually quite good for screen text, and the midas touch of hinting expert Tim Ahrens doesn’t hurt either (though Lapture isn’t quite as clean on Windows as Ahrens’ drawn-for-screen Facit Web). Much more calligraphic than Georgia, use Lapture when something more lyrical is in order.

Websites using Lapture: Whisky Picnic

Le Monde Journal

Available from: Typekit, WebINK

Designed for the French newspaper that gives it its name, Le Monde Journal is a contemporary Times New Roman without the long, sharp serifs and closed forms that make Times such a poor screen font. Its performance on Windows could use some improvement—in fact it just barely made the grade for this list—but it’s really gorgeous at all sizes on OS X. Check it out if most of your readers are Mac users.

Websites using Le Monde Journal: Mike Davis, Chez Porchez

See also: Alternatives to Arial, Cure for the Common Font

  • 1. Auré’s avatar Auré Dec 06, 2010

    Thanks a lot for this really useful review.
    I’m always impressed by the rendering quality of FF Meta Serif Web on XP (even with CT in grey-scale mode and more even when it’s turned off).
    A great typeface for screen, no doubt on that.
    Thanks for sharing your thoughts on this wide subject of screen (serif) font rendering :)

  • 2. k.l.’s avatar k.l. Dec 06, 2010

    Hi Stephen, I would have preferred to see “ClearType” and “Standard” rasterization for all of the typefaces — so that comparison is possible at all. As is, the three ones rasterized via “Standard” stand out unfavorably since the collection of screenshots causes me to compare them with other typefaces rasterized via “ClearType” rather than “Standard” too. Best, Karsten

  • 3. Stephen Coles’s avatar Stephen Coles Dec 06, 2010

    Karsten – The image at the top is to show the effect of Windows Standard Smoothing. Those fonts are shown again below, all with OS X Core Text rendering.

    If we had more time I’d love to do a more comprehensive post with comparisons in all the common rendering modes. But this is simply a listing, after all.

  • 4. David Březina’s avatar David Březina Dec 06, 2010

    Hi Stephen, when I read the article (very quickly I have to admit), I thought all of the examples are using grayscaling (non-ClearType rendering on XP) for which most of these look remarkably well. Now I learn they are Mac? That is slightly confusing, but I understand it would be too much visual information. I would prefer to see the extreme cases (Win XP, ClearType off and on) too, as these would show the actual quality of hinting (as far as I know, the Mac rendering does not make any use of TrueType hintning/instuctions).

    Besides, something I have realized thanks to Ross Mills from Tiro Typeworks: you can assume that there are not many XP users with ClearType switched off since IE7 came with the ClearType on by default => everybody who updated to IE7 or 8 (and I think people tend to update IE faithfully) has ClearType on unless they switched it off (bad idea :). That is: when you are deciding which font to use for your website it is better to look at the visitor browsers’ statistics rather than OS statistics. IMHO: there is no need for grayscale hinting if you do not want to support IE6 which some consider not only webfont-incompatible, but even web-incompatible.

    Cheers,
    David

  • 5. Stephen Coles’s avatar Stephen Coles Dec 06, 2010

    Good points, David. I’ve been hesitant to define just how many are seeing Standard/grayscale smoothing because there is no good data out there. But knowing that IE7 switches ClearType on by default does give us a better idea.

    Again, I’d like to show more screenshots. It’s just a matter of how much time we can devote to it. (I should say Erik Vorhes’ time, since he did most of that work.) But, like I said in my piece on Typographica, I think proper previews should be the responsibility of the webfont vendors. I hope you’re all writing similar letters to them.

  • 6. Erik Vorhes’s avatar Erik Vorhes Dec 06, 2010

    I’ve put together a page for everyone to compare various methods of antialiasing type. Hopefully this will help clarify some of the issues that webfont design must confront.

    For the TL;DR crowd: all these typefaces perform better with ClearType than with grayscale antialiasing, aside from Lapture and Le Monde Journal.

    Different text sizes might give you better results, but for that the onus is really on the webfont vendors. And in any case, it’s essential to “try before you buy.”

    Regarding user statistics for the type rendering method used, I’d say knowing which XP users have IE 7 or 8 installed can only partially answer the question; those browsers don’t affect the system-wide setting for antialiasing, so anyone using Firefox, Chrome, or whatever else will see type rendered according to the system preference. At this point, it’s probably best practice to assume the worst.

    There’s hope though, as users switch to Vista or Win 7. Both of those operating systems have ClearType enabled by default. And that’s not even touching on what will happen when DirectWrite takes hold!

  • 7. k.l.’s avatar k.l. Dec 07, 2010

    David:
    Good points.

    Stephen:
    “I think proper previews should be the responsibility of the webfont vendors. I hope you’re all writing similar letters to them.” No need for anyone to write letters. If you offer a list of fonts which, as you claim, get rasterized ok, it is on you to back this up with screenshots that allow the reader to “see” why you made this choice.

    Erik Vorhes:
    Thank you. This overview puts things into perspective.

    IE7/8 use ClearType for rasterization of webfonts regardless what the choice on OS level is. FF 4 (still beta) seems to follow IE7/8 in this respect. However — as Erik said — the current FF 3.6, Opera 10, Chrome 8 and Safari 5 (“Windows Standard” smoothing is the default) use the rasterization method chosen on OS level: which can be ClearType, greyscaling (“Standard”) or plain black-and-white. One cannot lean back and expect that people have activated ClearType, that would be wishful thinking. However, expressing a wish of mine, it were nice if other browser makers followed IE7/8’s and FF4’s example of using only ClearType for rasterizing webfonts. It would make webfont rasterization more predictable for foundries, web designers and end users alike. So much for Windows XP.
    In Windows 7, with browsers that use DirectWrite & its refined ClearType version, even unhinted TTFs get rasterized as pleasantly as in OSX. Try the FF 4 beta.

  • 8. growdigital’s avatar growdigital Feb 08, 2011

    How about Charis SIL ? I made a quick and immensely unthorough analysis of free serif fonts, and it came up trumps.

  • 9. Erik Vorhes’s avatar Erik Vorhes Feb 11, 2011

    Charis SIL is available as a webfont through Font Squirrel. You’ll still want to test it in a few browser environments to ensure it renders well enough for regular text sizes.

Comments are closed on this entry.

Subscribe for Updates

Blog RSS feed

Recent Entries

Categories

Archived Entries

2014
Jan
2013
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
2012
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2011
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2010
Jan
Feb
Apr
Jul
Aug
Sep
Oct
Nov
Dec
2009
May
Sep
Oct
Nov
Dec