It feels like this war has been raging for ages, but we’re still in the very early years of type on the web. When we look back on this moment — from the day the first webfont service launched to the imminent standardization of WOFF as a webfont file format — it will be but an em dash in the long history of screen typography.
Like Simon Daniels said so prophetically over a year ago, the war (over formats and security and delivery) is over. It’s time to win the peace. Now we’ve got to build some fonts.
Building the fonts is the part of this story that so few anticipated or dared to face. It’s the hard part. So hard, in fact, that some font manufacturers skipped the process altogether, simply releasing their print-optimized fonts as “webfonts” without the significant changes required to make them read well on screen. To me, this is akin to shipping software that is bug-ridden at best. Still, the tech media touts the “thousands” of new fonts now available for web use. Most of what consumers read is about how many fonts you can get and how they are served, but not so much about how they look and read.
Now that the painful reality of poorly hinted fonts is sinking in, web designers are realizing that there is little value in choice alone. In fact, having the choice between thousands of fonts that work only at certain sizes on certain screens isn’t much of a choice at all.
Things will get better. Display pixel density will improve. Windows users will upgrade, replacing GDI with DirectWrite. But this evolution will be slow, and we can’t do much to speed it up.
What we can do is push the evolution of font makers and services. Next time you’re shopping for type, don’t just look for your favorite face as a webfont. Ask for more:
1. Demand fonts that render well for the bulk of all web users, not just those on Mac OS X or Windows 7, but also the poor saps on Windows XP who still represent more than half of the browsing population. High quality releases like Web FontFonts, Fedra Sans Screen, and FacitWeb demonstrate that this can be done.
2. Demand comprehensive previews that show fonts in multiple sizes in all the most common rendering environments: Core Text (OS X), DirectWrite, GDI ClearType, and GDI Standard. Typekit and MyFonts have made valiant efforts here, but the experiences fall a bit short.
3. Demand transparency from webfont providers about the limits of their products. Fonts should be clearly marked when they don’t perform well at certain sizes or in certain operating systems. Webtype and Typekit lead buyers to fonts that work especially well for text. It’s a good first step. FontsLive offers a “minimium recommended size” which would be laudable if it wasn’t so suspect (you can’t even sample their fonts below 20px).
Choosing typefaces for print is fairly clear: you see what you’ll get. Webfont quality, on the other hand, is hidden behind a veil of browsers, operating systems, and end user settings. Yes, there are good webfonts out there, but finding and testing them is a struggle. Font buyers rely on providers more than ever before. Those who provide quality and transparency will lead this new market and medium.
Update: David Březina points out that IE7 switches ClearType on by default. So while there are many Windows XP users out there, most of them have upgraded to IE7 and aren’t seeing non-ClearType rendering in their browser. In this case, ClearType in Win XP would then be the harshest common render mode to test against.
Update, Oct 19, 2011: Since this article was published MyFonts and Fonts.com Web Fonts have joined Typekit in providing screenshots to reveal how their fonts perform in various browser, OS, and (in the case of Fonts.com) render engine environments. I commend these retailers for their transparency.
Update, May 16, 2013: Without explanation, MyFonts has removed their webfont previews. Boooo.
Hmm, most of those “print-optimized” fonts actually look pretty good on Mac. So currently the main obstacle is crappy rendering on Windows.
Yep. Thus the danger of designers on a Mac selecting webfonts without seeing how they are butchered by Windows. If the font is made well, the butchering is palatable.
The most important steps — from my point of view as a designer — will probably be:
– OpenType Features (coming with FF4), to get rid of that nonsense that the foundries don’t offer OSF even if the print-version of the typeface features those as standard (as most FSIs do).
- Webfonts being part of the Package. When I buy a new font I want it to be include the webfont-option as a moderately-prced «upgrade». Maybe the kind of «flatrate» model monotype is trying with it’s vast library is the way to go, but I’d much prefer if I can just buy the webfont.
- For older browsers, the ability to add your own webfonts to typekit or something like that would be neat.
- And of course, Microsoft f**ing catching up. People may complain about Apples rigid upgrade policy, basically forcing anyone who buys an ipod Touch to use iTunes 10, which means, you HAVE to have a system running 10.5 at least. Sucks for the individual, but it means that most Apple Users are at least somewhat up-to date. I mean, how old is XP? :-D. The MS-cats still use IE 5, and that really gives me shivers.
EULAs that make sense are needed, too. E.g. Fontshop’s EULA; the price depends on pageviews/month. You don’t pay more for a font used in a book design if the book becomes a bestseller either.
Process is the only type foundry I know of that calculates price only by the number of domains on which the font is used. But I can’t use Klavika or Bryant on every project…
Number of domains isn’t always the best measurement either. An organization can have many domains, regardless of its size.
In fairness to the foundries, they need a way to measure use and price it accordingly. Desktop fonts are priced by users, but that was often an inaccurate gauge too. The goal with pageviews is to prevent a CNN from paying the same as a blogger. More fair to maker and user.
As most visitors couldn’t care less what font you’re using this strikes me as eminently sensible advice; however, they will notice if it renders badly or is really difficult to read.
There’s not really any serif alternative to Georgia that works at all sizes across browsers, operating systems and monitors. But you see Tisa used for body copy quite a lot. I don’t think it’s ready.
And it’s a bit worrying if designers aren’t looking at their work in XP.
May someone tell me what’s wrong in using a Linux Libertine, a Goudy Bookletter 1911 or a Junicode? Really, please, someone tell me…
Stephen, I agree 100%.
There’s a great opportunity for a social font-rating website here, with a simple, comprehensive rating system.
[...] contributor on many things Web. He recently linked to a Stephen Coles-penned article by the name of The Webfont Revolution Is Over, Let the Evolution Begin. It’s a good read, and primarily focuses on the need for producing fonts that render clearly [...]
I utterly agree the argument regarding rendering environments here, and am astounded at how little this problem is brought up.
As web designers we could consider Windows as an ‘obstacle’, but when nearly 60% of all web pages are viewed using XP with no form of anti-aliasing or hinting, we ignore it at our peril!
Fonts *are* butchered on Windows. But how come Arial renders fine on it? Even between IE, Firefox and Chrome. As plain/boring as it is, it renders consistently. Where I find that Museo for example (from Typekit) renders horribly in Firefox, but fine in Chrome.
Why does Arial render consistently and Museo not?
Because Arial was made specifically for Windows, and likely fine-tuned over many years. Museo is fairly young — expect improvements down the road.
Great article, Stephen. You’ve highlighted a complaint that I have very well. More transparency is needed. Displaying fonts at large sizes isn’t helpful to anyone. More foundries/vendors need to show how their fonts look at sizes that people want/need to use.
Yikes, the challenge of rendering well on lots of systems. Hmm, that’s kind of a part of web design. It’s ALWAYS been one of the major the challenges of web design. Differing support, differing browsers, differing OS’s, differing versions, differing needs (accessibility).
It’s not like NO ONE doing web design for the last 10 years knew about grid systems or good typography. Sure, plenty didn’t — it opened up publishing to everyone, after all. But a major contributor to unsophisticated design on the internet has been technological limitations. Precisely how would you have *effectively* implemented a website with a baseline grid before line-height, pray tell me?
This is an industry where art relies upon technology. Own up to it, accept it, learn it, and love it for what it is, or GTFO.
For example, if you want to be in an industry where you can smugly dismiss Windows users, “Well, my fonts look GREAT on my computer (which is a Mac *of course*)! Maybe everyone should just get on MY same system so my arteestick vision needn’t be compromised by moronic XP users,” … seriously? Get back into print and off the web. You fail to get it.
We’re getting closer and closer every day to a truly beautiful web. I’m glad of it. It’s not that recognizing issues, bringing them up, and solving them are wrong. I think part of loving what you do means always pushing to get better. Here that means pushing the technology and education. Specifically, here that means a new need for fonts that are thoroughly web compatible & screen optimized.
Maybe these XP comments are really just expressing frustration at having to support a 9-or-so year old OS. I get you. I get mad about having to support IE 6 when it’s necessary and will make similar comments. The good news is that such support is a business and design decision. If you don’t give a crap about half of the internet, that’s your call! Maybe you’ll be lucky and you won’t have to.
But I think that’s missing the point a little. The author has pointed out that print and screen are two different mediums, with different needs and different optimizations required. Working on multiple browsers and OS’s is part of that. The author has ALSO pointed out that it’s possible to make fonts that render well on Macs AS WELL AS XP. They exist. It can be done. So maybe the attitude that Windows needs to disappear or that real designers are too far above Windows to care is counterproductive and a straw man. (I realize that characterization may not match you, dear reader. Yet the attitude exists.)
If you’re an @font-face user you SHOULD care and as the author says, you as a customer can ask to know what you’re getting. You can ask for the support you need. And you can spend your money on web fonts that work on the web. If you’re a font designer, please don’t think that your entire audience are Mac-using print designers who don’t care about XP.
If you value your art you won’t rest on your laurels. Web designers and typography artists both.
Right you are, Stephen. I don’t think foundries realize yet the “damage” they’ve done by saturating the market with libraries full of fonts not-yet-ready-for-screen. Making an important technological need, already barely profitable.
I’m sure many are busy with hinting their fonts for screen right now, but I hope designers coming with demands to foundries don’t expect fonts to be ready just like that. This takes SOOoooo much time and work to get right that they might come short with choices right at this moment.
But nonetheless, type-designers – get busy with it!
A bit of shameless self-promotion: I’ve just written a small extension for Google Chrome for Mac OS X that can aid Mac users to select webfonts that work well on Windows. It’s called Crisp Text and installs a button in Google Chrome that allows the user to toggle the text rendering on any web page between unhinted antialiased (the Mac default display) and hinted black-and-white (which is what Windows users will see with smoothing turned off).
The extension is not perfect (you need to click twice on the button sometimes, and you need to activate the black-and-white rendering on every page), but it works well. It also works well with webfonts, so you can navigate to any webfont-offering service that uses live webfont previews and check the screen quality in the crudest of all environments (black-and-white aliased).
It’s a one-click install at:
Brilliant tool, Adam. How many have smoothing switched off completely? Anyone have data on smoothing settings? I’d love to see an extension that reveals both Standard/grayscale and ClearType smoothing.
Well, that’s not possible to do on a Mac. The Mac essentially has two rasterizers built in: the “old” one, which is black-and-white and uses delta hinting, and the “new” one, which is the typical Apple Cocoa antialiasing and discards almost all hinting information.
The old rasterizer is not 100% compatible with Microsoft’s, but is nearly identical (e.g. Verdana and Arial render identically).
Mac OS X does not have ClearType or the Windows grayscale smoothing built in, so one needs to use a Windows machine to preview fonts in these modes. However, most fonts, when using the Windows grayscale smoothing, turn off the smoothing below a certain point size (which point size that is is controlled by the font’s “gasp” table). In these small point sizes, the Apple black-and-white rendering that you’ll see when enabled with my extension, and the Windows standard rendering, will be nearly or exactly identical.
(On Windows, I’ve found Opera particularly useful for testing screen rendering, because when you turn ClearType on and off in the system, the rendering is updated instantly. On Chrome, Firefox or Safari on Windows, one needs to restart the browser to see the changes.)
That having said, I consider my Chrome extension not a complete solution, but a quick way to get a feel of how certain fonts will render, especially in small sizes, on a Windows machine with ClearType disabled. It allows you to quickly see whether a font has been well and carefully delta-hinted (i.e. it won’t cause any troubles at all), or whether it’s been sloppily autohinted and won’t be very workable in small sizes on Windows.
For example, using my extension, when you turn off font smoothing in Chrome and go to webfonts.fonts.com, you’ll be able to find the few really superbly or well hinted families:
Aldus nova, Basic Commercial, Frutiger LT, Linotype Gothic, Metro Office, Neuzeit Office, Palatino Linotype, Palatino Sans, Times Europa Office, Trade Gothic, Trump Medieval Office, Versailles, Vialog,
as well as some styles of Avenir Next, Compatil, Helvetica, Helvetica Neue, Frutiger Neue, Linotype Syntax, Linotype Univers, News Gothic No 2, Palatino nova.
This is especially useful when examining similar families: for example, Linotype Syntax, Frutiger LT, Linotype Univers and Palatino Linotype look really well in small sizes, while Syntax Next, Frutiger Next, Univers LT and Palatino LT do not.
One can find some surprises, e.g. Syntax Lapidar or Chino Display ITC render really well in black-and-white. In fact, for some fonts, autohinting delivers really good results, and the rendering looks like the fonts have been hinted manually. But for many fonts, especially seriffed faces, italics and semibolds/bolds, the difference between autohinting and manual hinting still is huge.
One may like it or not, but users will compare the rendering of webfonts to Arial, Verdana and Georgia — and that bar is pretty damn high.
However, most fonts, when using the Windows grayscale smoothing, turn off the smoothing below a certain point size (which point size that is is controlled by the font’s “gasp” table).
This is a good thing to know, and one I learned only recently. Still, I actually see just as many fonts that allow smoothing at all point sizes as those that use the gasp table.
May someone tell me what’s wrong in using a Linux Libertine, a Goudy Bookletter 1911 or a Junicode?
Nothing. But G B 1911 is not in the same category as LL and Junicode if you ask me. From what I remember of working with it, it’s a bit of a “warts and all” re-creation that depends a lot on high-res for it’s effect.
No. They’ll be way more forgiving than that. They won’t be looking at it with a jeweler’s loop.
Thank you for your answer. Yes, you’re right, they are not in the same category. I was just focusing on their public domain license.
I can’t understand at what level I should consider a public domain font as bad quality.
Let me explain. I’m working on a stylesheet for ebooks. I’m working with ePubs, which support font embedding via @font-face.
Nobody still consider that @font-face isn’t just about web, but involves ebook too.
In ebooks you zip and distribute fonts so you HAVE to use public domain fonts.
So I have to choose font faces with an extended range of glyphs (not the case of GB1911), good readability, possibly old-styled or light slabbed, etc… with a SIL, GPL or other generous license…
I just need to understand if there is an alternative, or what kind of information I’m missing (I am an UX designer and I don’t consider myself an great expert in fonts) in evaluating the quality of the fonts I ‘m planning to use.
We have 300 dpi displays now. The displays are catching up to print. Hinting and Windows XP are already anachronistic and any time spent on them is wasted.
Still, I actually see just as many fonts that allow smoothing at all point sizes as those that use the gasp table.
That basically means that those fonts do use the gasp table with the setting “use smoothing from 0 px on”. Other fonts may specify this like “use no smoothing from 0 px to 14 px, then use smoothing”. The gasp table specifies ranges where to apply smoothing and hinting (and also ClearType 2.0 vertical smoothing), but there can be just one range with one setting, and that’s the case in the fonts you refer to.
Of course in such case, the rendering produced using my extension is not very representative, since it won’t be seen in any real-life scenarios, except if the Windows users disables font smoothing entirely (which is not a common case).
I particularly like the idea of providing size performance ratings, much like the way fishing line is rated by breaking strength. Giving the uninformed an idea of the “usable range” of type sizes would provide a great service when selecting type for screen use.
For example, using my extension, when you turn off font smoothing in Chrome and go to webfonts.fonts.com, you’ll be able to find the few really superbly or well hinted families:
This is indeed helpful! Though I caution folks not to use it to judge just any webfont. FF Dagny, shown on this page’s headline for example, performs far better in all versions of Windows than the Crisp Text extension implies.
I particularly like the idea of providing size performance ratings.
Typeface quality can be quite subjective (one person’s A+ might be another’s C-), but it’s an interesting idea. As long as it doesn’t take the place of preview images.
(to Richard Fink) I just need to understand if there is an alternative, or what kind of information I’m missing (I am an UX designer and I don’t consider myself an great expert in fonts) in evaluating the quality of the fonts I ‘m planning to use.
Got a couple of hours? Seriously, leave a message on my blog with your email (I’ll decline to approve it, of course.) I’d be happy to explain the ins and outs.
nice article. All signs are that that the sort of font hinting mentioned here will become more and more legacy. Screen and browser technology continues to move away from the need for it. Firefox 4 on Windows shapes fonts using Harfbuzz-ng irrespective of what the OS is doing. Whilst big chunk of devices attached to the www are still Windows/IExplorer the dominant ‘screen aesthetic’ has been set by apple’s pods & pads & phones, games consoles (e.g. compare windows against the xbox!), smart phones etc. Should guess that’s more where screen type is heading. Potentially pretty fast too.
[...] Stephen’s followed up with a full post on rendering in browsers and where things need to go, over at Typographica. (Read the comments too, for [...]
I completely agree with everything you’ve written, Stephen. Although my technical knowledge around web font development and rendering engines is less than I would like, the subject has been on my mind for years in various ways. I wish I’d known about the “gasp” table back then (thanks, Adam). Ironically, in my old tests, Comic Sans Bold triggered greyscale smoothing at the lowest size (11px) in XP compared wit the rest of the core web fonts.
At the moment, my colleagues like Rich Rutter at Fontdeck try to help designers and foundries prepare fonts for the web as best they can, but ultimately it comes down to the providers themselves. If nothing else because they know their work the best, and Fontdeck is a marketplace for foundries and designers rather than a foundry in its own right. However, plans have been afoot for a while to implement much of what you suggest, and I’m glad to see you highlight the issues we’re only too aware of.
It seems to me that there are not that many people who have the level of expertise or experience to successfully prepare web fonts. Font development is not the same as design, and I wonder if a separate service or curated body of knowledge around how to prepare fonts for the web would not be as beneficial to type designers as it would be to the end reader on the web. It’s great to see that knowledge being published and shared in much the same way as we in the web design community have been doing around standards for years. More, please, everyone! Web designers need your help.
a separate service or curated body of knowledge around how to prepare fonts for the web
Perhaps this new site would be a good place for that.
Hinting and Windows XP are already anachronistic and any time spent on them is wasted.
Unfortunately that is not the case. As Stephen has written, and others have commented above, you have to design websites for the current realities of today’s technology. Thus hinted fonts for Windows are critical to any web fonts solution.
with regard to EULA, i think font makers and foundries need to decide as a whole whether a font is intellectual property (which would favor the pageviews/domains pricing structure), or software (which favors # of users/license structure), or possibly develop a new scheme altogether.
i don’t believe that the current scheme of trying to have it both ways is a viable option, as it is needlessly confusing.
For a small time web designer trying out new fonts can be a nightmare since you have to test in both Mac and PC, different operating systems and browser which means both time and money are invested.
Sure hinting is required for the moment for text-sizes! But with the amount of work required, and the fact that in a pretty near future it will not be an issue anymore, i suspect most foundries will not produce well hinted fonts. Hinting is not a simple matter, it takes ages and, for most 1-3 designers foundries, is financially not worth the work.
in a pretty near future it will not be an issue anymore
I look forward to your definition of “pretty near future”. I’m not being flippant, I’d actually love to hear predictions.
One important consideration – beyond all the wonders of typographic niceties such as hinting, which may really be rendered moot over the next however long as high-DPI displays start replacing current low-DPI ones – is filesize.
I’ve seen some “web embeddable” fonts out there for free, which are over 1MB in size – EACH! So if you wanted a standard complement of regular, bold, italic and bold italic, that’s over 4MB of extra bandwidth overhead per visitor, just for fonts! Madness.
Good reminder, Mike. I should have added file size to the list of things vendors should display on their shops. It’s language support that usually accounts for most of those extra KBs, so if speaking Russian, Greek, Eastern European isn’t important to your project, use the basic “Western” version of your webfonts, or a service that allows character subsetting.
Regarding hinting, in some first tests with unhinted TTFs I got the impression that Windows 7′s DirectWrite and its improved ClearType do a surprisingly good job. What remains to be problematic is Windows XP, first because its older ClearType expects some hinting, and then because it allows users to choose from ClearType, Standard, and no smoothing. No smoothing is most demanding in terms of hinting, Standard less so, and ClearType even less.
My conclusion so far is that if browser developers would follow Firefox 4 beta and
1) use DirectWrite on Windows 7 & Vista,*/**
2) force on old ClearType on Windows XP,**
then fonts with light or autohinting should do in browsers on Windows XP, the most problematic platform. Foundries could go by the (not safe but close-to-safe) assumption that Windows XP’s older ClearType represents the minimum rasterization quality that fonts might face — a more predictable situation than the one we have today.
* If DirectWrite is not an option for a browser developer yet, then at least forcing on ClearType on Windows 7 would be a compromise.
** If not for all websites then at least for those that make use of downloadable fonts (CSS with @font-face), as Firefox 4 beta does.
I’ve actually been pushing this topic for quite some time over at Typophile, with little to no response.
Karsten, your suggestion would not allow us to assume that “Windows XP’s older ClearType represents the minimum rasterization quality that fonts might face.” Millions of windows users who never upgrade anything will still be using old versions of Internet Explorer that are capable of viewing a web font. We cannot force corporate sysadmins to update their static windows builds that still only use IE 7 and maybe Firefox 2.0.
Hi James, this is why I spoke about a “(not safe but close-to-safe) assumption”.
There is no help for some people who will continue to use FF 2 or 3, but statistics show that users of FF, like users of other non-IE browsers, are surprisingly up-to-date.
IE since version 7 is safe as it does enforce CT for downloadable fonts. FF 4 is the next one to do so. This is the background for my attempt to encourage the makers of the other three (of five) major browsers. I do not expect immediate effects. Forcing on (GDI) ClearType is a minor tweak to three applications’ future versions but an effective tweak, in terms of rasterization and in terms of spread.
On demanding fonts that render well: Neither Fontspring, Webink, Fontdeck, Kernest nor Fonts.com even mention the rendering issues …
This was a great article. The link to the article on GDI vs. DirectWrite was quite good.
@ Jeff: Arial renders so well because it was one of the core fonts of Windows 3.1 (which shipped in 1991), along with Times New Roman and Courier New. These three fonts were hinted to a degree (and at a cost) you wouldn’t believe.
That “brute force” approach, which used a lot of “delta hints”, is less necessary these days, and a more systematic approach can be taken, especially when hinting for grayscale or ClearType. Indeed, the advent of ClearType meant that Microsoft had to ratchet back some of the the more brutal hints in those core fonts which severely distorted the original outlines in order to turn on or off a strategically-placed pixel.
Average screen resolutions are also much improved, although it has to be said that many of those still running Windows XP are also running their screens at other than native resolution, because XP does a poor job of scaling UI in a usable manner. There’s nothing anyone can do to improve that reading experience. Those running Vista or Windows 7 fare a lot better in this respect.
As this article so ably points out, most of the fonts with which we’re familiar were designed for print and hinting was fairly rudimentary. If you expend the effort, many can be greatly improved.
Display resolution does not need to increase that much. In fact, on the MacBook Pro on which I’m typing this – and on my iPad – the 133ppi displays are plenty good enough for sustained reading. I’d like better, and they will get better, but they are eminently acceptable right now with well-designed and built fonts.
My view, for what’s it’s worth, is that website and font designers should focus on those cases where a reasonable amount of effort creates great-looking pages. Show the future, and use that to drag the past into it. The effort required to deal with older rendering systems, and resolutions much below 120ppi, will enslave you.
The reality (that Microsoft, for example, still has to face) is that the vast majority of people in the world do not need a computer, they need an information device. The browser is the only operating system they care about; what platform it’s running on is irrelevant to them.
As creative specialists, WE use our computers for page design, website design, video production etc. We need the power of a computer for those. Yet even we probably spend 90% + of our time in a browser.
When Marc Andreesen of Netscape “poked the Microsoft bear” in the mid-90s by declaring that the browser would become the OS, turning Windows into “a poorly-debugged set of device drivers”, he was absolutely right. Dumb. Arrogant. Committing business hara-kiri as it turned out. But right.
The iPad is the first really practical, true information device. It will be followed by a raft of Android-based “tablets”. Microsoft is still missing the point on tablets, after more than ten years, by insisting they will run Windows. It’s like insisting on 4096-bit encryption on the email you send to your granny.
[...] again. New technology, new ways to use type, and new fonts made specifically for a new medium. We’re still in early days but now that there is a standard format and successful webfont services we’re over a significant [...]
Notify me of follow-up comments by email.
Notify me of new posts by email.
Typographica is a review of typefaces and type books, with occasional commentary on fonts and typographic design. Edited by Stephen Coles, also of Fonts In Use and The Mid-Century Modernist.
Founded in 2002 by Joshua Lurie-Terrell. Relaunched in 2009 by Coles and Chris Hamamoto.
Set in Adelle Sans by TypeTogether, Turnip by David Jonathan Ross, and JAF Bernini Sans by Tim Ahrens.
Brought to you by this month’s nameplate sponsor, FontShop, MyFonts, FontFont, Wordpress, and the letter B. Read our editorial policy.
Fonts In Use
Type at work in the real world.
The Anatomy of Type
A book about the finer details of typefaces.
Lettering on vintage cars, appliances, and other objects.
Fleurs Coiffeur Liqueur
Lettering on storefronts.