The State of Webfont Quality from a Type Designer’s View

Written by Ross Mills on April 26, 2011

The rendering issue, at least at text sizes, is not going to go away anytime soon. As it’s been pointed out, the naivety of some designers, coupled with the marketing motivations of webfont services and distributors, does not bode well for the readership. The bandwagon has left, with everyone on board, but not realizing it’s missing a wheel.

[Editor’s note: Ross initially posted this text as a comment but I felt it required the space and prominence of a new post. — SC]

Some of the following simply reiterates what Stephen has already observed, but I think it is worth reinforcing from a slightly different perspective.

Firstly, let me address the statement:

Font buyers rely on providers more than ever before. Those who provide quality and transparency will lead this new market and medium.

I certainly hope this will be the case soon. Currently, providers use a few approaches to address the quality issue. One approach is to leave the optimization up to the foundry or licensing designer. This is obviously the least expensive and most profitable approach in the short term — profitable for the third party provider, that is, probably not for the smaller foundry. Another approach is to develop some sort of “autohinting”. From what I’ve seen this is at best a stopgap that provides somewhat adequate results some of the time, and would be what I consider only a first step, perhaps suitable for fonts that you knew were only being used at larger sizes, or as a basis for manual improvements. If I could generalize, the main point of weakness is that most automated routines only recognize obvious features of glyph anatomy (eg. stems, and to a lesser degree vertical alignments) but are mostly incapable of recognizing relationships, which is a core principal of TrueType hinting; the rasterizer has to be explicitly instructed that the counter of an ‘e’ shouldn’t collapse and should have white inside of it, unless told otherwise using Delta instructions. Autohinting can only say there is a top stroke, a middle stroke, and a bottom stroke, and that the top and bottom are in alignment zones. In fact, it doesn’t really know that the middle stroke is in the “middle”, it just knows its a stroke, and it doesn’t know anything about the relationship between the top and bottom. And so on.

I see some mention of rendering quality — how one provider’s approach bests their competition — but I see little actual sensitivity to the quality. For the provider’s own websites, where they can chose the best option (one would hope they would, at least), they chose fonts which are not optimized and have obvious, easily remedied issues. Not the best advertising, but at least its truthful, I suppose.

Even with those who really do know better, you see rather odd examples. Stephen pointed out Monotype’s FontsLive site, which doesn’t show examples below 24px (ppms?).


Webfont at FontsLive.com with ClearType rendering.

On this page they are promoting the quality of their webfonts, but if you look at the first ClearType example, it very much looks like it is not even hinted (vis. 36px and below). It doesn’t surprise me that it isn’t hinted, but that they are using it as an exemplar of their webfonts. This illustrates a couple of the issues I already mentioned: the “provider” is pushing a service without adequately addressing quality issues, which in turn aren’t seen as affordable to the original foundry because the original foundry’s/designer’s slice of the pie doesn’t warrant the expense. So the complaint that they are only showing larger samples is a valid one. It’s a bit of a snow job, but in this case they can’t even pull that off because the problems manifest themselves even at display/headline sizes. (The second Copperplate example has the same problems.) Fortunately, their collection of fonts for text are well chosen because they are well hinted, but the distinction can be blurred, especially in cases where something that could be a “text” font is categorized as “headline” because its unhinted.

So now we have webfonts, and they’re spilling out into the wild faster than they really should. Well, actually, they aren’t really all webfonts, they’re just marketed as such. What are the discussions about quality taking place in foundries, distributors, and third party providers? What steps are they taking towards addressing the quality issues? Do they care? The one positive thing with webfont services is that the fonts are served, rather then installed, and so when a better quality version becomes available there isn’t some onerous install and upgrade procedure to deal with.

It also doesn’t help to skirt the issue by placing blame, or making excuses or predictions that are not demonstrably accurate. Saying its Microsoft’s fault because their rendering is “crappy” is specious. The (TrueType) rendering is fine, as long as the (TrueType) font has a suitable level of instructions. There are more fundamental reasons why MS have chosen to retain this relationship between the rasterizer and the font, some of which has to do with the global nature of their market. Whether or not Windows rendering is better then OSX rendering can be debated subjectively. This debate has no affect on the existing and near-future market that the font and design industries have to serve, where actual OS proportions should rule the decision-making process. Windows XP may well be anachronistic, but it so happens over 50% of users happen also to be anachronistic, and an additional 40% of people are using other flavors of “crappy” rendering systems. That’s approximately 90+% of users out there using “crappy” “anachronistic” software, and as suppliers of content to those systems we have to do the best we can.

The same goes for the argument that in a couple of years we will all have 300ppi screens. Well, maybe, but I wouldn’t count on it. We will have more high resolution devices (mostly mobile devices), but again we are looking at the bigger picture when producing content for the web. I won’t go into it in great detail, but it is considerably more difficult to manufacture say, a screen that is 70 square inches (such as a laptop) then it is to manufacture a screen that is 5 square inches (such as the iPhone). Manufacturers have to be able to produce volumes of screens at an attrition rate that does not impact efficiency (ie. if you have to chuck half the panels because they have dead pixels, it doesn’t make financial sense). This end of the industry doesn’t seem to move nearly as fast as the other components. Screen resolution has been nearly fixed for the last decade, with most devices hovering around the 100ppi mark (+/-10ppi). So this argument is fine, if you don’t mind not releasing any webfonts for the next 10 years (or however long it will take for high-res screens to be the norm) — otherwise you’re not really doing any good to our end customer’s experience.

Which brings us to the solution end of things.

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. […] But nonetheless, type-designers, get busy with it! — Angus Shamal

Right. Easier said than done. There are only a handful of people on the planet who do TrueType hinting professionally. FontLab certainly has the basic tools available, if you know how to use them or are willing to learn. So that’s one hurdle. The other is time and/or money. Hiring a third party to do your hinting is an option if you can find someone with the time and if you can afford it. It is highly specialized and is priced accordingly. But the more basic issue — regardless of the form of the investment in hinting — is whether that investment translates to a reasonable return for the originating foundry or designer after all the distributors and “providers” have taken their cut. It seems to me a more coordinated effort may be a better option and that all parties involved carefully consider the quality of the product being released, and collectively find a solution to deal with the issue.

Ross Mills is a type designer and co-founder of Tiro Typeworks. He has been involved in the design and production of multilingual and specialist typefaces for Microsoft Corp., Linotype Library, Apple Computer, the Government of Nunavut and others.

43 Comments

  1. FontLab certainly has the basic tools available, if you know how to use them or are willing to learn.

    Fontlab has the tools. And better tools could probably be written. But type designers still need simple up-to-date documentation about how to hint fonts for ClearType rendering without relying on delta hinting.

    Beat Stamm has given us his very detailed treatise on the theory, science, math, methods, etc. of hinting. And Microsoft has released some very detailed technical information. But none of this documentation does a good job of explaining the basic process of hinting a font for ClearType. And hinting for ClearType is hardly a subject one can pick up at the local Microsoft Certified technical school.

    Why can’t Microsoft produce simple, practical hinting documentation that addresses the rendering environments of 2011? As far as I know, the last practical TrueType hinting documentation from Microsoft is Vincent Connare’s TrueType hinting tutorial. That is dated 1997 — before ClearType! Would it really kill them to do a better job of explaining this stuff?

  2. Bram Pitoyo says:

    Though I’m speaking here as a type hinter, I advocate for the other end of the solution which is to design types that specifically target the 8–14 px sizes in 96–112 ppi situations.

    Yes, this means that stroke contrast needs to be fairly low, and x-height fairly high, and everything else that makes type works at small sizes. But this also means that it needs to look decent with autohinting and no other delta tweak applied.

    It’s a very hard job, yet if types that look good in low res displays is the direction in which we’re heading to, won’t it be wise to start designing for it—or at least, to keep it expressly in mind? (Think of it as an “Emigre 2.0” of a sort.)

    In the meantime, hinters are still left with the job of bringing existing type catalogs up to par—a sizable venture.

  3. design types that specifically target the 8–14 px sizes in 96–112 ppi situations.

    Font Bureau is doing just that with their RE families.

  4. k.l. says:

    It seems to me a more coordinated effort may be a better option and that all parties involved carefully consider the quality of the product being released, and collectively find a solution to deal with the issue.

    Could you please be a bit more specific as to what such a solution would look like?

  5. Tim Ahrens says:

    Ross, thanks for pointing out the issues. I agree with you, we shouldn’t ignore the problems when something new and exciting comes up.

    However, you are not saying how things should be dealt with in your opinion. The text is full of “shouldn’t” but lacks suggestions how to things could be handled better. You are criticising without making any counter-proposals.

  6. Some of us have been ranting about this shit since day one ;)

    Anyway. Shouldn’t that be 10–16 px? 8 px type on a screen is not useful for text.

  7. Angus Shamal says:

    One thing that bothers me when reading about webfonts today, especially when it comes to small text sizes, is how easily people seem to turn to hinting as the ultimate fixer-upper for any type on screen — and by doing so, regarding the purpose — and even more so, the quality — of the font design, as secondary.

    Following this flawed approach to typography, we’ve been seeing many different examples of beautifully crafted typefaces which simply weren’t designed or aren’t suitable for small size or lengthy text applications for whatever reason, and certainly less so on screen — being marketed to us as perfectly suitable for all applications because they’ve been extensively hinted to look like they are! Doing all that with little to no optical change to the design itself.

    It is as if you’ve been told/advised to set your text book with this display typeface and been promised it will look and read great, but you’ll have to wear this special “correcting” goggles at all time, otherwise it would look and read like “crap”.

    Isn’t this layer of “illusion” what makes us cringe each time we hear about extensive re-touch work on photographs to the point where the subject looks no where near to real life, just to sell magazines?

    Ethics and morals aside — this kind of backwards approach to typography is not only the arch enemy of Progress, it also takes us a few steps backwards to the times where bitmaps were the only representation for type on screen, and in text sizes most of them looked so much different than the printed page.

    But fortunately, technology is also quickly evolving towards high resolution screens where type will be rendered truer to its form with TT-hinting only being partially supported or needed.

    Knowing this, we’d have to ask ourselves, do we want to know if our type choices were good or bad Now? Or do we rather find out later?

    I strongly support Bram’s point regarding refining or designing type that specifically address certain point sizes on screen. The hinting then will take the appropriate and intended role in helping to render such designs correctly on screen.

    Font Bureau’s RE families are also a welcome discipline in designing type for screen. Although weither I want my RE 10px type to look like 12px type is questionable — it remains a good effort.

  8. Matthew Butterick says:

    The lack of fully-hinted webfonts is a function of economic incentives, not ignorance.

    At no point in the last 20 years has TrueType hinting been part of mainstream digital font production. Why? Because in most cases, there’s not enough demand for the benefits of TT hinting to justify the expense.

    In webfonts, nothing has changed. We have a lot more choices in webfonts than we did a year ago. But the technology is still sort of dawdling around the edges of the party. Does Google use webfonts? Amazon? NY Times? Huffington Post? Apple? No, no, no, no, no. Typophile? No. Typographica, FontFeed? Display yes, text no.

    For the most part — and somewhat ominously — web designers seem pretty happy choosing among Georgia, Verdana, Times New Roman, and Helvetica. I say “ominously” because that means not much has changed in 15 years.

    To me, debates about webfont quality are small potatoes compared to the issue of whether people are using them at all. Is there a major website that’s waving the flag for webfonts? That’s not a rhetorical question — I’m genuinely curious, because I haven’t seen one.

    That’s not to say that betting on the continued relevance of TT hinting is invalid. Some foundries will place that bet and make money. Some will place that bet and lose money. Others will choose to bet elsewhere.

    As for that Monotype font at the top of the post, believe me, if Monotype thought they could profit from doing the TT hinting, they would’ve already done it. The fact that they haven’t doesn’t reflect ignorance about type quality. It reflects their prediction about where the webfont market is going.

  9. Ross Mills says:

    First, I’d like to point out that the post was originally a comment, not a treatise or otherwise in which I could flush out solutions or many specifics. Secondly, I would view this as an opportunity to begin to discuss the real issues, as I say, collectively—as I alone do not have all the answers, nor do I want to presume to speak for all concerned.

    But to be a bit more specific, such a discussion should involve web font service providers, type designers and technologists and web designers. No one is going to admit that they ignore quality issues. My comments are based on my observations of implementation, so there is some disconnect there. There is also a disconnect between web designers and the realities of the font industry’s little corner of the world. This needs to be addressed. No doubt it is being addressed in some camps, but my impression is that implementation has leap-frogged quality issues. No doubt web designers just want something that ‘works’, but my point is that the type industry isn’t enabled to instantly produce hundreds or thousands of fonts that will be adequate as text web/screen fonts. And, yes, they should be ‘adequate’. The font industry needs to communicate with the web designers what constitutes ‘adequate’. Web designers should educate themselves and not blindly implement new technologies that make the web a uglier place to be. Such technology should be let into the wild carefully, lest its supposed benefits bite its own head off.

    The base solutions are already here. There are already knowledgeable people in the font industry who understand how to make screen fonts and how to improve existing fonts for use on the screen (two somewhat different issues). The problem is that the number of web fonts being released does not equal the number of fonts that are suitable for use as web fonts, and that almost over night we have gone from what was a small niche area of font development to a virtual wholesale commodity. Those designers who have opted to avoid the cheerless depths of TrueType may have to reconsider should they wish to market something purporting to be a web font. Sorry.

    This is only a prod; I invite others to get more specific, and may do so myself in separate posts/comments.

  10. Is there a major website that’s waving the flag for webfonts? That’s not a rhetorical question — I’m genuinely curious, because I haven’t seen one.

    That’s a fair point. New technologies that are highly visible to the end user will often have a slower adoption curve, and webfonts are no exception. But I think we’re on the verge of hitting a steep rise in that curve. Here a few major organizations using webfonts:

    New York Times (headlines, bold text)
    The New Yorker (headlines, nav)
    Smithsonian Channel (headlines, text)
    Martha Stewart (headlines)
    37signals (headlines)
    Gawker (headlines)
    Pentagram (headlines, text)
    Wired (headlines)
    Scientific American (headlines, nav)
    Harvard Business Review (headlines)

  11. Ross Mills says:

    Why can’t Microsoft produce simple, practical hinting documentation that addresses the rendering environments of 2011?

    I sympathize. But why exactly is it Microsoft’s obligation? They certainly have the resources to do so, but I suspect these are allocated to other higher priority projects. It’s not really their job to make hinting easier for anyone, although they already provide VTT for free, into which they have no doubt invested quite a lot. You may not think that VTT makes hinting easier, but compared to what it was like before…

    Like so many aspects of type design and production, one has to be very self-motivated. If you can’t figure it out yourself, there is probably someone out there who can help, although the information may not be all neatly wrapped for you.

    But let me try: don’t hint for ClearType, hint for greyscale. If it looks OK in greyscale, chances are it will look OK in CT, whereas the opposite is not necessarily true. Don’t bother with X-direction deltas, but do add basic X-direction stem hints. Don’t bother adding X-direction hints to italics as they are likely to cause more problems then they solve unless you are very thorough.

    You’re better off having absolutely no hints then having bad hints. If you have no hints, set the GASP table to anti-alias at all sizes. Don’t sell such a font as a web font suitable for running text.

    There are some CT ‘hooks’ that can be added in the pre-program and font program, but generally I would count these as higher level refinements. Set the GASP table to account for the new CT flags, although until FontLab implements these you may have to hack them in through a table editor or in VTT. Nothing will explode if you don’t set the new flags. CT was made as a generalized rendering environment, such that you don’t actually have to target it specifically, although you can if you want. There are all sorts of cool things you can do with TrueType, (see Beat’s article), but most type designers won’t be going that far down the rabbit hole; it’s filled with people who speak in tongues.

  12. As an example of the wealth of info to be found at the aforementioned website by Beat Stamm, here are the ClearType rendered results of a Times New Roman lowercase ‘e’, 10.05 pt at 96 DPI before and after hinting:

  13. Ross: thanks for writing these comments up.

    I would like to see major webfont services highlighting type that is carefully hinted. Or perhaps better, saying what is acceptable for small text (footnotes, sidenotes), long text (article), short text (blurbs), headlines, big sizes with appropriate pixel sizes. Saying “it is for text” does not make things clearer to webdesigners I suppose. Everything is text in the end.

    How come that all fonts usually cost the same, no matter obvious quality differences (aesthetic, hinting, character set, …). Is there somebody saying it is odd? Different price tag may also help webdesigners to get oriented.

    Stephen: An important major organization is BBC with their BBC Arabic and BBC Persian news portals using Nassim for text (Screenshots from Win XP). I know it is Arabic, but the readership may be one of the biggest? Titus’ blog post about the design.

  14. Beat Stamm says:

    @James: Hinting seems to be one of the most well-misunderstood concepts in font rendering. Most of the TT “hinting” I have seen so far was some kind of a static kludge, topped off with a bricolage of deltas for “pushing around” unwilling pixels. Make it work, somehow, sort of. Depending on the number of deltas, marketing may call this “Core Quality Screen Fonts” or “Optimized for ClearType” or what not.

    The problem with “auto-hinting” and manual “hinting” is that there is more to TT “hinting” than Anchors, Links, Interpolates, and Deltas—the most frequent Typeman/VTT Talk instructions (and thinly veiled TT instructions). On their own, these instructions don’t readily permit to implement a previously recognized relationship between the middle, the top, and the bottom stroke of an ‘e.’

    Ross is probably the first typographer I had the privilege to talk to who, in the context of hinting, explicitly talks about these relationships: “In fact, it [Autohinting] doesn’t really know that the middle stroke is in the ‘middle’”—nor does a manually coded Interpolate-and-Link duo of instructions. To me, these relationships are on a higher level of abstraction than Links and Interpolates, and this level of abstraction is key to continuing with TT “hinting” in a world of diverse rendering environments.

    I have illustrated the design and implementation of a prototype of one such relationship in §6.3.0 and §6.3.1 of the Raster Tragedy. The problem with explaining this beyond the level I did is that I would have to incorporate textbooks on math, computer programming, and an annotated TT manual for good measure. This is not something that can than be learned during a long weekend. Accordingly, for most typographers wanting to hint their own fonts, this is not a practicable solution.

    The alternative I thought about is a hinting language on a higher level of abstraction, containing instructions for the aforementioned relationships (“place crossbar between top and bottom” or “place left and right stem between side-bearing points”) instead of Links and Interpolates. This is what I did, at least partially, to create the illustrations in §6.1.0, §6.1.1, §6.3.3, and §6.3.5. With such a language, day-to-day hinting could be reduced to identifying (“clicking”) control points of features (stems, crossbars, etc.) and their relationships (“the bar is in the middle”).

    While I was working at Microsoft, I made several attempts at going in the direction of a higher level language. For reasons that are inexplicable to this engineer, these were met with skepticism (“Why bother with xyz, we already know that this doesn’t work!”) or flat-out if not mindless disbelief (“A computer could never do this!”). The latter example seems to ignore the fact that it’s not the computer that does the thinking, it’s the engineer who compiles the typographic input, tries to identify a hinting pattern from this input, thinks about a strategy that yields this pattern, and finally translates this strategy into TrueType code.

    Regardless of acceptance or disbelief, at the time I added as many of these strategies to the auto-hinter as needed. An auto-hinter doesn’t “see” that a crossbar is too low or too high, hence it cannot add any deltas to fix any problems it doesn’t “see.” Instead, I had to come up with a strategy that puts the crossbar into the right place without deltas. After all, even Bill Gates pointed out right away that the Interpolate-and-Link approach is not the smartest (cf §6.3.0).

    Once you get into the realm of a hinting language that separates the concepts (stems, crossbars, and their relationships) from their implementation (oodles of bone dry TT code, I’m afraid), you can indeed do all sorts of cool things, like getting the stroke design contrast right for a y-anti-aliased environment like WPF or DirectWrite (cf §3.2.3), or improve on plain Gray-Scaling for current media tablets that use landscape and portrait orientation interchangeably. Make the effort once, profit from the effort for every subsequent font.

    I vividly recall my first glance at “Perceptually Tuned Gray-Scale Fonts”[1] on Roger’s laptop at RIDT’94. I had just presented (or was just about to present) the core of my PhD project on intelligent font-scaling—and there was this early laptop screen that showed something like type, not pixilated bi-level fonts! “What the @#$% is that!?”

    Fast forward a decade or so and I tried to implement some of these concepts in TrueType—in view of ClearType’s asymmetry w.r.t. landscape vs portrait orientation, and in consideration of end-users having issues with the colors of ClearType (personally, I generally don’t seem to have issues with colors—but this is irrelevant because I’m a dichromate). But once again, this was met with disdain: “I don’t like it that you are trying so hard to make gray-scaling look so nice!” More or less verbatim how I got told off.

    So, to answer your question, “Why can’t Microsoft produce simple, practical hinting documentation that addresses the rendering environments of 2011?”

    I’m afraid I don’t know the answer. All I know is that hinting is not simple, but I tried to make it simpler.

    I really did!

    Sorry I didn’t succeed…

    [1] Roger D. Hersch, Claude Bétrisey, Justin Bur, and André Gürtler: Perceptually Tuned Generation of Grayscale Fonts (Ecole Polytechnique Fédérale de Lausanne, Basel School of Design), IEEE November 1995 (http://infoscience.epfl.ch/record/99793/files/ptggf.pdf)

  15. Ross Mills says:

    How come that all fonts usually cost the same[…]?

    The near-commodification of our work is an issue that has concerned me greatly since I got into this business. It should be a discussion and debate on its own.

    A lot comes down to individual presentation and distinctions, rather then bundling all the widgets into one basket. We should demand more of our clients, and give more in return.

  16. I’m surprised that nobody talked about alternative & astonishing text rendered for windows gdipp : http://code.google.com/p/gdipp/

    I suppose massive installing of this text renderer and/or on-the-fly rendering using this open source tool could help.

    You’re not forced to believe me, just test it and you’ll see web fonts revolution for real in Windows, i.e. available for common people.

  17. Ross Mills says:

    As for that Monotype font at the top of the post, believe me, if Monotype thought they could profit from doing the TT hinting, they would’ve already done it. The fact that they haven’t doesn’t reflect ignorance about type quality. It reflects their prediction about where the webfont market is going.

    I should note that this isn’t a ‘Monotype’ font, rather a font that is licensed through their web font service from a third party. The third party is probably responsible for quality control, whereas in this case Monotype is responsible for presenting appropriate examples of the service they are providing.

    Such a company probably profits quite well from any hinting services it undertakes. It probably also profits quite well from its web fonts services, regardless of screen quality, as is the mandate of a corporation.

    But yes, we can agree that if it proves unprofitable on either counts, such considerations of the customer will be given all due respect.

  18. What are the discussions about quality taking place in foundries, distributors, and third party providers?

    Some people believe that you can wear a belt around your waist at night that will make you slim as you sleep, some people will vote for a guy as president who’s been bankrupt three times, and some designers will use any “pretty” typeface as a webfont. Blame them, blame freedom of choice, blame democracy, but don’t blame the foundries. They make fonts, and designers use them.

    Screens are just another substrate, bad paper for now. Paper mills started in the 14th century, but industrial manufacture of paper didn’t take off until well into the 19th century, just in time for faster printing machines that ran thousands of sheets an hour, rather than hundreds. Those machines destroyed type, so foundries made more rugged typefaces. Then paper got smoother and printing machines more refined and foundries released more delicate faces. Newsprint was still bad and newspapers were printed from stereos, so foundries made special typefaces for those conditions (e.g. Mergenthaler’s Legibility Group in the ’20s), at the same time taking into account design constraints like short lines, minus leading, et al.

    All the time, there were no laws stopping anybody from setting Bodoni 6pt and printing it on a platen press. Except common sense. Nobody asked the foundries to make Bodoni rugged enough to withstand that treatment because that wouldn’t have been Bodoni.

    We have more than 200,000 fonts to choose from, theoretically. Even if you dismiss all the one-trick ponies, we still have more and better type than ever. Brands need type for recognition. We have that: above 24 px most typefaces on screen will look the way they looked on the designer’s paper proof and can brand any on-screen message.

    For now, designers will have to pick suitable type for smaller sizes or live with the consequences. I don’t want my typefaces have all their character hinted out of them. If subtleties cannot be reproduced in a certain media, you’ve picked the wrong font.

    Sometimes I wish hinting had never been invented, so designers had to try a little harder rather than blaming it all on the foundries or Microsoft.

  19. One web design principle that is clearly applicable to webfonts is Beautiful Degradation.

    Use webfonts for users that will get a good experience out of it (Win7, OS X), use standard system fonts for XP & Vista users if your webfont does not have the hinting it would take to look good.

    It’s what web designers have always done facing various levels of support for features, and it seems to be the way to go forward with webfonts, too.

    If as a foundry you have the ressources to invest into decent TT hinting for your webfonts, great. Otherwhise, if you want to be honest, you should clearly communicate that they should not be used at smaller sizes in XP and Vista.

  20. Bram Pitoyo says:

    Font Bureau is doing just that with their RE families.

    Now that I think of it, faces created specifically for low res devices did see a resurgence in late 90s to early 2000s in the UI of many PDAs and color cellphones.

    Since these fonts did their job when handheld gadgets didn’t have anti-aliasing, they’ll probably look decent (if not better) with autohinting on computer screens.

    Which brings me to an intriguing temporary solution: if vendors and type designers behind these now obsolete devices would commercially release their fonts for CSS use, I can see our web-optimized catalog expanded—maybe not greatly, but by a decent measure.

  21. Dberlow says:

    Tiro has long been a very close vendor to MS with access to the details of CT rendering for 7 years or longer. Where are your screen fonts that show the optimal possible results on Windows CT that you are evangelizing?

  22. oh guess says:

    ES:

    “Brands need type for recognition.”

    “If subtleties cannot be reproduced in a certain media, you’ve picked the wrong font.”

    Branding-to-crude-media via Windows: loop overload warning.:)

  23. k.l. says:

    Another approach is to develop some sort of “autohinting”. From what I’ve seen this is at best a stopgap that provides somewhat adequate results some of the time, and would be what I consider only a first step …

    I do agree that webfont services are not doing anyone a favor when they apply some autohinting. Especially foundries should think twice about giving the most important aspect, appearance of their typefaces, out of their hands, into the hands of a party whose business is web technology rather than font technology.
    But neither is “hand hinting” inherently good nor is “autohinting” inherently bad. Worse, the term “hand hinting” suggests, especially to an end user audience, that such fonts are on one level with Microsoft’s core fonts, which is outright misleading. In short, whether “hand hinting” or “autohinting” says nothing at all.

    Saying its Microsoft’s fault because their rendering is “crappy” is specious. The (TrueType) rendering is fine, as long as the (TrueType) font has a suitable level of instructions. There are more fundamental reasons why MS have chosen … Whether or not Windows rendering is better then OSX rendering can be debated subjectively.

    “Saying it’s Microsoft’s fault” is not the point. Of course merely blaming anyone for a status quo does not help. In similar vain, merely defending a status quo does not help either — and is just as specious.
    The point which e.g. I have made is that Microsoft is offering, or imposing, an infrastructure which goes by the premise that fonts come with considerable extra preparation, without bothering much how this premise would be realized efficiently and on larger scale, i.e. by the type designer community at large. They built a house and promised that the fundament would be added later. Maybe.
    There is nothing “subjective” about comparing the Microsoft with the Apple way of rasterizing. You can compare, beyond expressing some kind of today-I-feel-like or I-am-fanboy-of, results as such as well as in light of the costs to produce them — when costs refer not to time and money alone but, more broadly, to efficiency of a solution.

    This debate has no affect on the existing and near-future market that the font and design industries have to serve, …

    You are presenting a short-term solution, based on observation of the status quo, as a long-term solution, pretending that the status quo is carved in stone once and for all times.

    What your comment says is this. (1) Don’t dare to challenge Microsoft rasterization. (2) Don’t dare to think of autohinting. (3) Don’t dare to discuss if it is worth to invest in hand hinting. Instead, discuss how to share the investment. (4) I offer hand hinting service targeting at Microsoft rasterization, by the way.

    The shorter but hopefully more constructive part:

    Discuss pros and cons of different approaches to rasterization, their premises and consequences, advantages and shortcomings — of each of them, since each of them has shortcomings of one kind or another. Long-term.
    Think about how to make a currently (on production side) inefficient approach more efficient. Practically speaking, allow type designers to get Microsoft-approach results at the same efficiency as they get get Apple approach results. Short-term.
    And forget the ideological “hand” vs “auto” opposition. This is marketing bullshit. If you have a clear understanding of something, you can program it — and thus automate it.* Anything else, indeed, is better “debated subjectively” while having tee and biscuits.

    * If I interpret Raster Tragedy halfway correctly, then this work is foundational as to an “autohinting” which may leave most “hand hinting” far behind, and may address both your appreciation of the Microsoft approach to rasterization and my request for an efficient and viable solution.

  24. Erik’s thoughts echo exactly my feelings too.

    And I don’t understand why in these discussions on webfonts, web designers are so often regarded as typographical nitwits. I’d be insulted.

    It is the job of professional web designers to pick the right palette of typefaces. It is their job to test their designs in various web browsers on various platforms, whether that’s with regard to consistency of user experience, layout, colour, or typography. That’s what they have been doing ever since their profession was invented. A professional web designer should be able to sort the chaff from the weed.

  25. “But why exactly is it Microsoft’s obligation?”

    From a strictly business perspective Microsoft has an obligation to their shareholders to ensure that the huge investment they made in type rendering is rewarded with type that renders well in Windows. Windows text rendering is not one of Microsoft’s experimental projects that can just be written off at tax time. Having readable text on Windows is critical to the commercial viability of the OS as we move into an era when people read more than any time in history and will do most of that reading on screens.

  26. Auré says:

    Really interesting post, thanks.

    As a web designer I’m trying to well understand type rendering issues in order to better choose my web fonts.

    I’ve got a little question. Here is a little test I’ve done: Arial vs FF Meta Serif Web Pro at really small paragraph size 11px.

    Could you explain me why, whereas I’m only on Mac OS X, the rendering isn’t the same on the browsers ?

    1. Why Arial rendering is different on Firefox 4 ? (On Windows Vista/7, FF4 use DirectWrite rendering engine (Right?) but on OS X ?
    2. Why FF Meta Serif Web Pro has 3 different rendering: FF4 / Safari / Chrome-Opera

    I’ve read on the Typekit blog that the type rendering on Mac OS should be the same on every browsers as they rely on the OS rendering engine. As it’s shown on my test, that’s not the case. So, where does the differences come from? Is it a hinting issue ? Maybe the hinting isn’t equally applied on each browsers ?

    Article like this one — and all the comments which follow — are fantastic for us (web designers) to better understand web typography. Thanks for that.

  27. Matthew Butterick says:

    Here a few major organizations using webfonts:

    OK, so I clicked through and scrutinized these  —

    New York Times = webfonts only in the opinion section

    The New Yorker = headlines yes, but using their own fonts

    Smithsonian Channel (headlines, text) = OK

    Martha Stewart (headlines) = only in one place (the home page feature block), otherwise none

    37signals (headlines) = OK, though not really a mainstream consumer site

    Gawker (headlines) = nope. They only use webfonts for their small section labels.

    Pentagram (headlines, text) = not a mainstream site

    Wired (headlines) = Only on the “Laelaps” subsection of the Science section. If you go in through the home page, and click on any stories, you won’t see webfonts.

    Scientific American (headlines, nav) = OK

    Harvard Business Review (headlines) = nope. Section labels only.

    I appreciate the list Stephen. But it tends to prove my point: adoption of webfont technology is weak. These sites are being held out as webfont showcases, but most of them barely use webfonts. That’s a problem.

    It surprises me sometimes that debates about micro issues (like subpixel rendering in ClearType) seem to attract more interest than macro issues (like why webfonts aren’t being used on more websites). Is everyone just trying to avoid talking about the elephant in the room?

    I find it particularly bewildering that most font foundry websites don’t even use webfonts. If foundries send the message that they don’t believe in webfonts, then no one should be surprised when customers follow suit.

  28. The micro issue is a root cause of the macro issue.

  29. Ross Mills says:

    What your comment says is this. (1) Don’t dare to challenge Microsoft rasterization. (2) Don’t dare to think of autohinting. (3) Don’t dare to discuss if it is worth to invest in hand hinting. Instead, discuss how to share the investment. (4) I offer hand hinting service targeting at Microsoft rasterization, by the way.

    My comment says none of those things, and projecting isn’t doing the conversation any good.

    I am no fan of the status quo — what I am saying is that fact does not make the status quo go away. I am neither advocating nor defending, and am confused as to how you interpreting my comments as such. I am saying the road is pockmarked and has pot-holes, and you are saying we should just put in a high-speed train. Or am I now the one projecting?

    There is nothing wrong with using autohinting, but one has to be aware of its limitations. My meagre experience has shown me that there are pretty much no instances where autohinting alone can produce something I would want used as a screen font. It may well be that the secondary “hand” improvements are limited, or they may need to be more involved, but can’t be avoided altogether.

    We build tools for the present, which will hopefully also work in the future. The decision of whether or not you want to build a PostScript Type 1 font, a TrueType font with or without ‘hinting’, an OpenType font with advanced features etc. is entirely up to the font maker and his or her estimation of how much investment in the product will benefit the end user (and presumably whether the designer wants to profit from the endeavour).

    I don’t care much which approach you take as long as the end result performs well. By all means, engage in academic debate and push for better standards, but suggesting that I personally am not an advocate of such improvements is specious.

    A professional web designer should be able to sort the chaff from the weed.

    Yes. I’m advocating less weeds. I hope people don’t take offense to that — I know some weeds are pretty.

    Where are your screen fonts that show the optimal possible results on Windows CT that you are evangelizing?

    In what way am I ‘evangelizing’ Windows CT?

    don’t blame the foundries. They make fonts, and designers use them.

    Foundries make tools. There is judicious balance between creating a tool that functions well and delegating misuse as “operator error”. If a tool demonstrably does not function well, then is all responsibility for that on the operator’s choice? Maybe, maybe not.

    One could absolve oneself from such technicalities if they are not directly involved in the manufacturing process, the rest of us have to come to grips with managing that aforementioned “balance”, given that the industry is such that authors and manufacturers are often the same.

    The notion of substrate is apt. A font designer (or a font itself) can float above the vagaries of how exactly it is to be applied to that substrate — as an intangible ideal. But at some point the lead has to hit the paper, the plate to the blanket cylinder, the photons through crystal. At that point the ideal is transformed, and someone, somewhere has to try and optimize the transformation. Some of that optimization takes place in the font itself. This is why 6pt Bodoni doesn’t look the same as 72pt Bodoni. Printers still ended up smashing the hell out of it, but some optimization was attempted. I don’t see hinting as much different — it’s making the best of a bad situation. If you don’t want your designs abused by device-level adjustments, that’s fine with me. Alas, saying that you wish hinting had not been invented is like saying you wish WYSIWYG hadn’t been invented. Or power steering. Or plumbing.

    Hinting isn’t a crutch, and shouldn’t be used as a kludge to attempt to make something that isn’t a screen font into something that is (didn’t I just say that no hinting is better then bad hinting?). It is a component of existing technology that can, if properly applied, improve the readers’ experience. I would hope that is the goal of anyone who is making fonts.

  30. John Hudson says:

    Angus:

    One thing that bothers me when reading about webfonts today, especially when it comes to small text sizes, is how easily people seem to turn to hinting as the ultimate fixer-upper for any type on screen — and by doing so, regarding the purpose — and even more so, the quality — of the font design, as secondary.

    I agree with you that hinting should not — indeed, cannot — be regarded as a means to make any arbitrary typeface into a suitable screen font. There was a time when this was the case: heck, Microsoft and Monotype managed to turn Times New Roman into a pretty good screen font for bi-level bitmap environments, and who today would dream of starting from such a high-contrast design for a screen font? Antialiasing technologies do put an initial onus on outline design in terms of text font screen suitability.

    But hinting is font design. An unhinted font is at best, in a low resolution environment, a single-size master. All the care in the world can be taken to optimise the design for that size, and even for a particular rendering environment, but as soon as that outline is shifted off that particular ppem grid, you either need to give up on all notions of design and let the rendering system have its way with the outline, or you need to employ constraints on the rendering, which is what hinting does, and that is a design process, i.e. making decisions about how particular shapes should look at particular sizes within particular environments. Some of those environments provide more control over how the shapes look than others, but so long as the rendering system accepts even some input from font instructions there are design decisions to be made, even if some of those decisions are about least worst results rather than optimal best results.

  31. Bram Pitoyo says:

    Could you explain me why, whereas I’m only on Mac OS X, the rendering isn’t the same on the browsers ?

    Auré, as far as I know, Firefox does come with its own rendering engine. It certainly does with its OpenType text shaping engine: they use harfbuzz-ng. Combined with everything else on the browser rendering stack, it might make the difference you mentioned about.

    I can help you connect to the right people in the organization, who may be able to help you get to the bottom of this frequently noticeable (but rarely complained about) problem—if it can be called a problem at all.

    What I do know is that Safari, Firefox and Opera have the tendency to lean towards the thinnest to thickest text rendering—in that order.

  32. But hinting is font design. An unhinted font is at best, in a low resolution environment, a single-size master.

    A great point, John. But should we alter this slightly for accuracy since OS X and iOS ignore hinting?

    “But hinting is font design. An unhinted font is at best, in a low resolution Windows or non-iOS mobile environment, a single-size master. ”

  33. Could you explain me why, whereas I’m only on Mac OS X, the rendering isn’t the same on the browsers ?

    The variation you see can also be caused by spacing differences. Some browsers, such as Safari, ignore kerning by default.

  34. Ross Mills says:

    The rendering may be different because there are different filtering options available through Quartz in OSX, as well as sub-pixel rendering.

  35. Dberlow says:

    When writing recipes is growing food, then shall hinting be type design.

    Hinting, if applied completely to a face, is a restatement of a type design’s basic principles, not its design. Hinting for windows CT is a restatement of the basic principles of the alignments of a font and that’s it. Thus, as 1000s of fonts can have the same identical hints, that’s not type design.

    There simply are not enough hints being interpreted for hinting to do any type design anymore, except at my house.

  36. Angus Shamal says:

    But hinting is font design. An unhinted font is at best, in a low resolution environment, a single-size master. […] you need to employ constraints on the rendering, which is what hinting does, and that is a design process, i.e. making decisions about how particular shapes should look at particular sizes within particular environments.

    Yes, hinting is design, and sure, font design to some extent. No argument there. It is also a very powerful tool, and when there’s an outline master attached to it, that’s when things get tricky. And that’s what I was trying to address, the misuse of that “power”.

    Aldo Novarese was asked many (many) years ago about what he thinks makes a typeface “timeless”. Part of his answer was that the typeface would need to look good on computer screens. This was an unusual answer compared to his pears, and a visionary one.

    Now, what do you think he meant by that? (I’ll come back to this later.)

    An outline font design isn’t a single-size master, or half a master, or half a font, in whatever environment. An outline font is the master! This is what the PostScript and TrueType (as does OpenType) technology is based on. Also, a font design isn’t only outlines, at least not to me. There’s a thought and purpose behind it, which translate to every aspect of the design — from the contrast of stroke and proportions to the smallest details and subtleties. A combination of which gives the design its character, but also its function in number of possibilities.

    This master and its function conducts — or should conduct — what type of hints should be applied and to what extent.

    When talking about hints, it’s like talking about an adapted screenplay based on a book — where the book represents the font design and the adapted screenplay are the hints adapting the design to the screen (pun intended).

    You can go all “purist” on that screenplay and follow every aspect and detail of the book, which will probably fail as a movie for being either way too long or much too complicated. Or you can over-simplify things by leaving chunks of the story and details out, which can result in a movie that is too generic lacking in character which doesn’t do the book much justice.

    You can also go all overboard and decide — this book is ok and it might work as a movie for some people, but how about writing a screenplay with more sex and action scenes here and more suspense and comical scenes there and we’ll make a movie that everyone will want to go and see … in 3D!

    God, if only hints could do all that! ;) but I think you see what I’m getting at.

    And while a book and an adapted screenplay can live as two separate entities, font outlines and hints can not, since they’re both sold as one complete integrated package.

    And as a font package either for display or for text or for both, people do and will need to be able to judge if they want to use that typeface by how it looks on their screen as true to the typeface design as possible.

    That’s what Mr. Novarese meant with his answer.

    That’s where high(er) resolution screens will fill that gap beautifully, or as you say, applying carefully designed hints that represent the font design as well as its intended and applicable possibilities. I just believe the first option will be the most effective in that.

  37. Beat Stamm says:

    Angus, this is a most brilliant comparison! Hinting adapts font design like a screenplay adapts the original book.

    The way I interpreted John’s “An unhinted font is at best, in a low resolution environment, a single-size master” is kind of designing the hints into one single font size (ppem size), to be used at this one size only, like writing a screenplay without writing the book.

  38. Ross:

    I said “Sometimes I wish hinting had never been invented”, quite a different figure of speech from the one you quote me with.

    I wrote that because too many designers think that hinting will cure all of a typeface’s ills. But if it isn’t suited to be rendered on bad substrate at small sizes, hinting will only make it more suited by taking away a lot of its guts – or should I say balls? Essentially, what we’re asking for is what we had before the pantograph was invented: size-specific cuts. But would the same users who complain that a single weight costs $29 (to be used in all eternity with no wear and tear) cough up that sum three times or more? No, of course not. They’d rather complain about bad hints.

  39. Ross Mills says:

    Ross:
    I said “Sometimes I wish hinting had never been invented”, quite a different figure of speech from the one you quote me with.

    Erik, I was simply balancing the hyperbole. I think on some fronts we are saying the same thing, which is why I reiterated that hinting is not a cure-all; it is only a optional component in our toolbox, which becomes less optional under certain circumstances. No doubt at some point in the future it will be redundant along with many other technologies we now use to render type. It is also why I said that no hinting is better then bad hinting — in that regard it can be dangerously manipulative to rendered outlines if not applied properly. That in itself does not make it a bad thing, as many aspects of digital type design can be misused or poorly implemented.

    The economics are indeed tricky. More investment can be difficult to justify when price structures tend not to be proportional to improvements in the product.

    The dynamics are somewhat different when we’re talking about web fonts, though (and we are talking about web fonts) — there is no expectation in this case that the end user (person reading the web page) or the web developer/designer purchase a new license for a new font which contains improvements, it is deployed with no intervention by either party. I’m not wise enough to predict how price structures for licenses sold in this way will pan out, but to be successful both the foundry, designer and licensing service should share responsibility in establishing making it a profitable venture. Those in the business of selling licenses in large quantities may choose a price point which is not going to be profitable for the smaller foundry. Unfortunately, as we have seen with other end-user license price structures, this has an impact on the viability of the smaller foundries as well as the incentive to invest in improvements.

  40. Jon Edwards says:

    Good article. As a web designer and developer who was initially trained as a “print” designer, web fonts have long irritated me for all the reasons outlined above. Hopefully, with some sensitivity to the aesthetics of typography rather than mechanics (CSS3 @font-face is largely driven by web developers, not designers), the cream will rise to the top. With big names like Google at the helm, the question really is how much people will pay for quality fonts.

  41. MB: It surprises me sometimes that debates about micro issues (like subpixel rendering in ClearType) seem to attract more interest than macro issues (like why webfonts aren’t being used on more websites).

    SC: The micro issue is a root cause of the macro issue.

    I think it’s fair to say that web fonts haven’t made it into the huge commercial websites as yet because it’s still early days. Web fonts have only been a viable solution for a couple of years. In my experience, big commercial entities don’t tend to move all that quickly, especially when it comes to web design and they are understandably wary of new technology. But do the hundreds of thousands of websites which are using web fonts count for nothing?

    I’m afraid to say, I doubt very much that the micro issues – font rendering – is the bottleneck in take up of web fonts. It may be a factor, but I suspect the larger culprits are inertia, speed (font download and rendering) and maybe cost (be it bandwidth and/or licensing).

    Sure, as a founder of Fontdeck I’m biased, but you need also to understand this argument from a web designer’s perspective: being able to use web fonts is a whole load easier than – and almost always preferable to – resorting to images of text or clever hacks using JavaScript, Flash, SVG or Canvas. It’s a far more suitable technology by pretty much any measure.

    But is the argument in this thread that web font services shouldn’t be offering any fonts unless they have been specifically designed for the screen and/or manually hinted? That would be a very short list, and there is clearly a demand for fonts other than these, and some foundries are doing very nicely out of supplying that demand.

    And that is the point, web font services are trying to supply a demand from web designers. Yes they might be responsible for drumming up some of that demand – but surely that just means type designers are getting paid by customers they didn’t have before?

    That all said, I agree with David Březina that “major webfont services should be highlighting type that is carefully hinted” and we at Fontdeck are designing ways to do that better – we want all that hard work to be recognised and rewarded.

  42. Matthew Butterick says:

    So how have we done with webfonts in the 20 months since this item was posted (in Apr 2011)? What I said at the time:

    We have a lot more choices in webfonts than we did a year ago. But the technology is still sort of dawdling around the edges of the party. Does Google use webfonts? Amazon? NY Times? Huffington Post? Apple? No, no, no, no, no. Typophile? No. Typographica, FontFeed? Display yes, text no.

    For the most part — and somewhat ominously — web designers seem pretty happy choosing among Georgia, Verdana, Times New Roman, and Helvetica. I say “ominously” because that means not much has changed in 15 years.

    My compliments to Typographica on switching to a webfont for body text.

    But otherwise, this comment remains accurate. Big web sites — even standard-bearers for good typographic design, like newspaper websites — remain committed to Georgia, Verdana, Times New Roman, and the other old chestnuts of mid-90s operating systems. Across the mainstream web, webfonts are still quite rare. And about half the time I see them, it’s a low-quality free webfont on a site run by a company that could clearly afford better.

    To be fair, nobody that’s entered the webfont business has exited it — and most of the libraries have only gotten bigger. Meaning, webfonts must be finding enough customers to justify continued effort. That’s good.

    But it still seems to me “ominous” that despite the availability of webfonts at every price point, they have not become a standard ingredient in quality web typography.

    I find it particularly bewildering that most font foundry websites don’t even use webfonts.

    Still bewildered on this one too. Though to make sure I’m not misunderstanding something critical, I formally invite a representative from Typekit or Google Web Fonts to explain why, after multiple years, they don’t use webfonts on their websites (http://blog.typekit.com/ and http://www.google.com/webfonts)

  43. Matthew – I share your disappointment in the speed of webfont adoption among font providers, and in the quality of webfonts used by companies whose standards should be higher. But beyond that the general state of web typography is much more encouraging than you describe. Today, when a new site launches, webfonts are actually the norm – not the exception. You can see some evidence of this at Fonts In Use via the “webfonts” tag. Perhaps many existing organizations hold off on webfonts until they redesign their site. That way they are incorporating new typefaces as a holistic part of the design. I think that measured approach should be applauded.

Post a Comment

Comments at Typographica are moderated and copyedited, just like newspaper “Letters to the Editor”. Abusive or off-topic comments are not published. We appreciate compliments, but don’t publish them unless they add to the dialog. Thank you!