Answer 1: Not really, because we have no data on what percentage of XP users have ClearType turned on. As noted previously, some OEM installations come with CT enabled. I'd guess that well over half of the XP users are seeing aliased/greyscale rendering, but I couldn't estimate a percentage.

Answer 2: There's a big gap between ‘poorly hinted’ and ‘not hinted extensively for aliased rendering’, and a lot of fonts exist in that gap. Some presuppose greyscale antialiasing, and some presuppose subpixel antialiasing, and some have halfway decent aliased hinting but not the quality of the Windows core fonts and web fonts. What I think of as poorly hinted will have legibility problems due to inconsistent alignments, stem weights and counters.

I'd guess that well over half of the XP users are seeing aliased/greyscale rendering, but I couldn't estimate a percentage.

I assume, 10% or less.

And I assume, that round about 55% of all systems (inclusively browsers) fill the requirements for webfonts with a strong tendency upwards. (I was very surprised, that meanwhile almost 50% are using Firefox.)

The core web fonts are hinted extensively, but a lot of the fonts available in MS Office are not.

But most Office documents are probably intended for printing. In contradiction to that a website (displayed on screen) is the end product for most users. So they have higher demands on websites than on a Word document, that is displayed on screen.

(When I write a text, the quality of the rendering is less important for me.)

Answer 1: Even if we knew the percentage of manual system settings as John mentioned, we still can not determine it – we need to know the usage share of IE 7 and IE 8 on XP, because they both change system settings. Unfortunately I couldn't find this data anywhere, I would love to know it!

An estimation, excluding Safari on XP, the number of XP users with ClearType GDI rendering: XP OS usage share – number of IE 6 – (number of FF + Chrome + Opera on all platforms) * XP OS usage share = 53% – 17% – 22% = 14%

The data is from Wikipedia, which also includes W3C statistics (Usage share of web browsers, Usage share of operating systems).

I used an estimation that FF & others have the same share on all platforms. They don't, but share of IE 7 and IE 8 varies much more depending on OS, so I rather used the data of other browsers.

This leaves 39% users with Standard GDI rendering, not including manual settings. Final number is smaller, but how much? Also, there is probably minority of users who turn off CT in IE 7, 8.

I also see a problem: The usage share of IE 6. W3C data is 7%, NetMarketShare is 17%. I would say W3C visitors are not so typical and use more advanced browsers.

And maybe an interesting fact: you can actually determine what system setting is someone using. You can use Flash, which can render system text on the bitmap, and then you can read pixels and inspect them. I have to check if something similar exists for HTML 5 canvas.

… they have higher demands on websites than on a Word document, that is displayed on screen.
Good point.

Some presuppose greyscale antialiasing, and some presuppose subpixel antialiasing, and some have halfway decent aliased hinting but not the quality of the Windows core fonts and web fonts.
Yes, this gap is obviously huge. I’d love to learn more about what the actual differences are in hinting for Greyscale, subpixel antialiasing (Cleartype) or at a level like what was done with Georgia/Verdana.

My third question:
At what level should we expect a web font to preform today?

Miha, I was writing while you posted.
Standard GDI = Greyscale?

Standard GDI = Greyscale only or combination of greyscale/Black & White or Black & White only. It all depends on font outlines and GASP table.

PS: I leave answers for II & III for others :-P

@Arno and John: Just to be clear, I’m interested in a percentage of all web users, not just Windows users.

@miha

So, your estimates are roughly:
• 50% (WinXP, 14% + WinVista, 23% + Win7, 13%) of all web users see Cleartype
• 40% see Greyscale/Black & White
• 10% see OSX’ Quartz rendering or Freetype (or other)

Am I right?

Yes, except the Windows GDI is probably lower. Also, you have to be careful with the terminology: ClearType GDI doesn’t necessarily mean ClearType, because fonts with PS outlines are rendered in greyscale (this is also visible on @font-face rendering diagram).

Thanks, Miha. I’m asking from a type design perspective, as in “What level of hinting would I need for my fonts to render acceptably?” as much as I’m asking as a graphic designer (“Are web fonts ready for professional use?”).

Some of my clients who couldn't afford full TT manual hinting for b/w rendering opted for semi-auto hinting with the gasp table set to have antialiasing active at all sizes. This means that the text is always greyscale antialiased in GDI if ClearType is not turned on, regardless of text size. In practice this means that typical regular weight fonts are quite grey, and light weight fonts are very pale, but the aliasing artefacts that more intensive hinting would be needed to correct are avoided. I wouldn't recommend any of these faces for great readability in text sizes on the web -- nor were they intended for such --, but even in their pale grey incarnations they still look a heck of a lot better than PS fonts under GDI.

@frode
If it looks good, it is good. So I'm a little mystified by the question. I'm not sure how you would go about quantifying what "acceptable" is.

The only thing I know for sure is that with zoom being the universal method for resizing - not text size like it used to be when IE6 ruled - it's important for the font to look "clean" across the spectrum of sizes it's going to be rendered at.
Too often with one-click auto hinting - there will be some sizes that rasterize weirdly.
Very frustrating - 12px thru 16px might look fine and then at 17px some globs appear for one reason or another. Stupid computers.

However, John Hudson is going to be publishing a full-featured tutorial on semi-automatic hinting soon so I don't expect this to be a problem much longer. :-)
(I think it would sell, John. Heck, I'd pay. It's sorely needed, that's for sure. The world needs you, man. Serious.)

rich

Misunderstanding on my side. The tutorial is not yet published.

>“What level of hinting would I need for my fonts to render acceptably?”

A general question independent of design style or use, but the earnest type designer should consider hinting the major cases, punctuation and figures very well in the Y axis.

This gets you the CT using majority, and on the bright side, maybe you can fund it by showing how good the fonts already look on the Mac. ;)

Windows X hinting hardly matters with the "tripling of the X resolution" unanimous and increasing reliance on sub-pixel spacing and glyph rendering, and the resolution rise.

But Y hinting'll be required on Windows for most sizes of use and most fonts and for the foreseeable future.

What "level" that is a hard question. It's a language, TT, and in learning enough to do decent Y instructions, you find out: to "learn it all", is required. I use around 20 hints or so, with variations, but it was nice occasionally to use one of the more obscure instructions every 80-100 glyphs when I needed it.

Unfortunately, auto hinterz are not nice about getting you part way there and leaving a fixable font, and even if they were... you'd have to know the language to fix little quirks here and there, caused by whatever unique design elements each new font design brings.

So, level 2 of 9? but you have to become a 5 first, then sink down to a 2 to do the work. And this is one big problem with needing hints at all, it's like trying to hire 1,000 biology Phds to collect frogs legs.

Cheers!

Rich: However, John Hudson is going to be publishing a full-featured tutorial on semi-automatic hinting soon...

I am? Apart from the fact that this is the first I've heard of it, I'm not doing anything soon. I am, however, doing a lot of things not soon, so don't have time for anything more imminent.

>I am?

More like "Could you?", but nice hide.

Cheers!

If I understand this correctly, ok* rendering in Greyscale mode requires hinting in the X and Y direction. Ok rendering in Cleartype mode requires only hinting in the Y direction. I’m simplifying things, but that’s the general idea, is it not?

* Not good, but fairly ok.

If just below 40% of every website visitor will see fonts rendered with Windows’ Greyscale rendering, fonts that doesn’t work in that environment are not “acceptable”.

We have autohinting, X direction hints and Y direction hints, and we have delta hints (could anyone explain what they are?).

Asking “what level is required” is probably a bad question, but there’s clearly a lot more effort in hinting like what was done with Verdana/Georgia than what Font Font do now. What is the difference?

delta hints (could anyone explain what they are?)

http://www.microsoft.com/typography/hinting/hinttut4.htm

I did some work on estimating the percentages of folks still seeing grayscale GDI rendering a couple months ago, and came out to about 31%. Well, 33% actually, but I also believe the percentage is dropping by about 1%/month right now.

That's fairly rough, as there are a number of missing pieces of info. But it should be the right ballpark. Seeing somebody else come up with 40% is not a surprise.

Cheers,

T

I remember some time ago a lot of blogs and even some newspapers encouraged people to upgrade from IE6. Maybe something like “Does the font on our website look awful? Click here to learn why and what you can do about it!” that pops up for users without Cleartype would be a good idea.

One thing to keep in mind is that for a given site, the stats on users visiting that site are more important than overall web stats. The OS/browser version pool of a site like Ars.Technica will probably be very different from that of a website dedicated to lovers of knitting (IE6 users for sure!).

The biggest problem among the people I know seems to be distrust in any Windows version to come out later than XP and likewise, distrust in Internet Explorer in general. The combination of XP with Greyscale rendering by default and a non-IE browser like Firefox is very common.

If those Firefox-on-XP users upgrade to the latest version, I believe the theory is they should see ClearType for non-system fonts in Firefox 4, due out in some 5-8 months. FF4 users on Vista and 7 may even see DirectWrite rendering, if things go as hoped. Right JD?

My general theory is that rendering will improve over the next few years, but the current issues may give webfonts a bit of a bad rap.

Regards,

T

Oh, John's just so lazy. Therefore, I decided to publish an autohinting tutorial on my own. Corrections and improvements suggestions are welcome:

http://sites.twardoch.com/typography/font-tech

Best,
Adam

I’ve seen some very promising examples of DirectWrite in action.

My theory is similar. The technology isn’t 100% ready yet, but it’s getting there.

Adam: Oh, John's just so lazy.

:)

Which reminds me that you owe me OTL feature classification, annotation and explication.

>Corrections and improvements suggestions are welcome

Well, how 'bout a preview of CT of some kind? ;)

Other than that, a new slogo has developed around FL for TT: No native drawing + no native hinting = no natives reading. :)

Cheers!

@ Adam

Thanks!

Corrections and improvements suggestions are welcome

I would like to view the images in their native resolution in my browser. But they have no extension.

The CSS and the Javascript are from Google?

@johnhudson

>I am? Apart from the fact that this is the first I've heard of it, I'm not doing
>anything soon. I am, however, doing a lot of things not soon, so don't have time for
>anything more imminent.

Awwww, you're no fun! The part about you doing a tutorial, of course, is a good natured poke in the ribs. So how about it? Say when, and I'll be there with copy of Camtasia Studio in hand. In person, if need be. I'll do anything to get out of Naples, Florida in the summer.

I understand perfectly well what Frode means when he says "acceptable". It's like the famous line about pornography: you can't define it but you know it when you see it.

Hinting is problem #1. And it's an industry problem. What Phinney's calling a "bad rap" isn't good for anybody. Everybody and everything looks bad. Type designers, browsers, Microsoft, everybody. If ever there was a need for some collective mind-sharing without concern for compensation, nailing down a practical methodology for hinting fonts to an "acceptable level" is it. And I'm not buying that it's voodoo and can't be organized and codified and presented so as to minimize the learning curve.

Glad to see Adam Twardoch stepped up - gotta go see what he's done. (And we must be in synch because I was shortly going to email him about exactly this.)
But I'm sure others have tips and tricks up their sleeves that can add greatly to the effort.

Some fonts can be much improved using one-click conversion with auto-hinting.
The best results I've gotten so far are with Fontsquirrel's online tool. Ethan Dunham's done a lot of tweaking. I've seen dramatic improvement with no glaring deviations at certain sizes - which often happens.
So a lot of fonts can't be greatly improved with a one-click procedure - that's where a bit of hands-on effort is needed.
From what I've seen and read and experienced - the eighty/twenty rule is at work here. You can get the eighty percent improvement for twenty percent of the effort of a full-blown hinting job done by an expert with VTT.

And I don't think web designers are concerned at all about how the font prints and that simplifies things - there need not be concern about trade-offs between print and screen. And there's a remedy if the font doesn't print well - a print-only stylesheet with a print-ready font. Or a print stylesheet with fallback system fonts.

rich

[Aside:

It's like the famous line about pornography: you can't define it but you know it when you see it.

As William Safire unforgetably defined it, ‘It isn't the teat, it's the tumidity.’ ]

Rich: From what I've seen and read and experienced - the eighty/twenty rule is at work here. You can get the eighty percent improvement for twenty percent of the effort of a full-blown hinting job done by an expert with VTT.

The actual percentages vary depending on the typeface, but as a conceptual average that's about right. But the implications of that 20% differ significantly depending whether one is talking about display type or text, and the implications of the whole hinting model are now dependent on a variety of rendering methods in a way that didn't used to be the case. Sure, one can make a lot of fonts suck less with autohinting, but if the result is readable on screen at text sizes, today that will have more to do with the design of the typeface than with the hinting. Hinting used to make screen fonts; now design makes screen fonts, and ClearType's non-linear subpixel rendering relegate hinting to optically scaling the design in one direction (independent of what the design is doing in the other direction).

Thanks, Adam, for the guide!

@John,

I am infinitely lazier that you've ever been :) I am very well aware of what I owe. :P

Except when it comes to an autohinting guide ;)

A.

@jh

First of all, re tumescence, great quote - were you aware that I was a big Safire fan? (I still check out the teats but you know, once you reach a certain age, the tumidity is less of a tissue.)
Alright, alright, maybe a pun too far into the blue zones, we'll let Dezcom be the judge of that.
I still find it difficult to read "On Language" since Safire's death - he was too good and put too much of himself into it for anybody else to make it their own.

>Sure, one can make a lot of fonts suck less with autohinting,

Yay! That is what we need! Less sucking. Also, the fonts that don't lend themselves to the screen should just be passed by. Total abstention is called for. I was working with the font Cardo that Google is offering. With all due respect to its creator, as a screen font it's a dog for a bunch of reasons. Not worth the fix. I might as well stick with Times New Roman.

We shall return to this... you have not heard the last, sir.

Rich

@Thomas Phinney
If those Firefox-on-XP users upgrade to the latest version, I believe the theory is they should see ClearType for non-system fonts in Firefox 4, due out in some 5-8 months. FF4 users on Vista and 7 may even see DirectWrite rendering, if things go as hoped. Right JD?

Yes, that's the plan. Nightly builds already contain the code for DirectWrite on Vista/Win7 (disabled by default) and forcing Cleartype on XP for downloaded fonts. Like IE, Cleartype might be forced on by default for system fonts also but that's more contentious, the decision hasn't been made yet.

To enable DirectWrite rendering with nightly builds:

1. Enter 'about:config' in the URL bar
2. After the warning, enter 'gfx.font' in the filter box
3. Double-click on 'gfx.font_rendering.directwrite.enabled' to enable
4. Restart

Once it's enabled by default, none of this will be needed.

@ Adam

If I am translating (your tutorial) to German – am I allowed to publish the translation on my website? You are living in Berlin. So you probably speak German. If you already have a translation to German, I would just set a link to it, if you upload it. (By the way, in which language are you thinking? Or are you able to think in different languages without any translation? I only can think in German.)

-----------------

(I just had checked, if I can contact Adam via his personal contact form, but I could not find it. So I have checked my profile. I am logged in, but the access to my personal contact form is denied. (“You are not authorized to access this page.” ) A few weeks ago it did work. Is this another Typophile bug?)

I think it's a bug.

My languages of thought and speech are, in order of proficiency: Polish, German, English. I also do speak some Russian, but certainly not to the extent of thinking in Russian.

I have not translated the tutorial into German, and don't currently plan to. But if you do make a translation, I would be happy to host it. The reason why I'd like to host it is because I'd be able to make further changes, and keep both versions up-to-date.

Please contact me ( adam at twardoch dot com ) and send me your Google login, and I'll duplicate the tutorial to make a German version, and will give you editing access. That's the beauty of Google docs.

Best,
Adam

@ Adam

I have a very long to-do-list. Translating the tutorial is not on the top of it, because I first want to make my own website run with all my own works. (I have to start from the beginning, because my old website based on tables, was very static and so on. At the moment I am contacting people for their consents with regard to the non commercial usage of source materials, that I had used for photo compositions. And many of the copyright restrictions inhibit creativity/culture. It is a bit like you had to ask for the consent to use bananas, if you publish a recipe for banana split. [In case of translations it is naturally different, because I have to be in background with my own creativity and therefore the source dominates!]) If I decide to translate the tutorial, I don’t need the Google account at once. I would contact you, if I am contented with the translation. Those translations are also an exercise with regard to the improvement of my English for me. And I am perfectionist.

“This document describes an example process of generating hinted fonts with PostScript or TrueType outlines using automatic and/or simple manual steps in FontLab Studio 5.”

Translation: Dieses Dokument beschreibt ein Verfahren [beispielhaft / eines von mehreren möglichen Verfahren / eine mögliche Verfahrensweise], Fonts mit PostScript- oder TrueType-Außenlinien [Maybe it is better, not to translate basic terms like outlines {or Vstem-/Hstem-Hints}] in automatischen und/oder einfachen manuellen Schritten [“In händischen Schritten” sounds odd.] in FontLab Studio 5 zu hinten.

Or: Dieses Dokument beschreibt ein Verfahren [beispielhaft / eines von mehreren möglichen Verfahren / eine mögliche Verfahrensweise], gehintete Fonts mit PostScript- oder TrueType-Außenlinien [Maybe it is better, not to translate basic terms like outlines {or Vstem-/Hstem-Hints}] in automatischen und/oder einfachen manuellen Schritten [“in händischen Schritten” sounds odd] in FontLab Studio 5 herzustellen.

Probably I would decide for this translation: Dieses Dokument beschreibt ein Verfahren, Fonts mit PostScript- oder TrueType-Außenlinien in automatischen und/oder einfachen manuellen Schritten [“In händischen Schritten” sounds odd.] in FontLab Studio 5 zu hinten.

And I am not yet contented. If I am thinking about all phrases with this intensity, you can imagine, that the translation is a bigger project.

Although I did ask you for your consent, because I want to host everything, in which I have invested time and energy, I agree with you, that it would be better to provide original and translations parallel. And because I think, that those documents should be provided at one place only, I can well live with the idea, that you also host the translation. So I would only link to both versions.

Arno,

if this were a translation into a language that I don't speak, I would prefer that this is hosted somewhere else. But since it's German, the primary reason why I think it's better that I host it is that, if I update the English version, I'll also be able to update the German version in parallel myself without much delay or hassle. This way, you won't need to track those changes yourself.

Obviously, I don't consider the document "finished". This is one of the types of publication that I think should grow and be refined over time — especially if new versions of software are released :)

Best,
Adam