New to Typophile? Accounts are free, and easy to set up.
Typekit and the discrepancy between their browser samples and real life
Posted by apankrat in
3 Jun 2011 — 7:04pm
3 Jun 2011 — 7:04pm
I am trying to get down to the reason for a discrepancy between what I am seeing on Typekit's "Browser Sample" page and what I am seeing in the real life.
Here is what they promise for Firefox 3.6 on XP:
And here is what I am seeing in Firefox 3.6 on XP, ClearType is on, Firefox is at its defaults:
To put it mildly - these do not look the same.
Tried talking to their support, but so far it yielded some quasi-marketing gibberish about them "working closely with type designers to improve screen rendering" and some such, basically ignoring my question and answering something that I did not ask.
Anyone here from Typekit who can shed the light on this? Are these not actual, but "synthetic" screenshots, done with some sort of a ClearType emulator and not a real browser?
User login
Support our Sponsors
3 Jun 2011 — 7:14pm
Their screenshot appears to be using regular antialiasing (The XP default) not ClearType. Try that option and see if it matches.
Cheers, Si
3 Jun 2011 — 9:03pm
Tried just now, not a match either it seems.
4 Jun 2011 — 2:54am
Ironically, Cleartype is worse than Greyscale for large sizes. Sii is right, Win XP has Standard Greyscale rendering as default, leaving 95% of all webfonts unusable for body copy.
4 Jun 2011 — 6:55am
Are there any good stats concerning the installed-base of XP versus Vista/7?
Also: what's the remaining 5%?
Related:
http://typographica.org/2011/on-typography/the-state-of-webfont-quality-...
hhp
4 Jun 2011 — 10:18am
Drop it, gents, please. This is not an issue of Greyscale vs ClearType.
I want to understand why Typekit's sample looks nothing like what I am seeing in my browser.
4 Jun 2011 — 10:29am
This is not an issue of Greyscale vs ClearType.
Zooming in on the samples you provided, you can clearly see the monochrome and softed Greyscale rendering (above, from Typekit’s screenshot) compared with Cleartype’s use of coloured pixels to trig the subpixels (below). Is this not what you are talking about?
Uhm, it appears I overlooked your earlier post ...
4 Jun 2011 — 10:35am
AFAIK there are even different iterations of CT: in the more recent one vertical anti-aliasing is enabled - so for example the top of the "f" wouldn't look aliased like in that zoom. And in one iteration or another subpixel positioning is also used.
BTW I'm not pretending this is 100% about the original question. It's a good thing that Typophile posts are rarely limited to helping a single person learn something. :-)
hhp
4 Jun 2011 — 10:33am
Here’s the Mac rendering.
4 Jun 2011 — 10:43am
Sloppy. With the occasional exception of overshoots, extrema of grayscale letterforms should be solid.
hhp
4 Jun 2011 — 4:38pm
Hrant: AFAIK there are even different iterations of CT: in the more recent one vertical anti-aliasing is enabled
Yes, this is the case with the DWrite implementation of ClearType, as implemented in IE9, but this is not available to XP.
4 Jun 2011 — 4:42pm
Apankrat, the difference in rendering is definitely down to greyscale vs ClearType rendering, as Frode's enlargements show, but the antialiasing choice may be implemented at a level independent of the OS rendering controls that Si pointed to. I have not examined Firefox 3.6 on XP, but in Firefox 4.0 it is possible to affect the antialiasing used in the browser's internal options (for instance, it is possible to turn on DWrite rendering in FF4 under Vista and Win7). So perhaps there is a setting in the Firefox config file?
4 Jun 2011 — 5:09pm
So is anyone here implying (or actually stating) that Typekit have tweaked various settings as to achieve the best possible rendering without saying so?
[On a side note, I'm not particularly happy with how Adelle renders on Win. I hope Type Together give it the same treatment as the other faces they recently re-hinted.]
4 Jun 2011 — 11:03pm
Well, here's an update. I got another reply from Typekit support, this time it was sensible and more technical and it did point at the ClearType being a culprit. Apparently their screenshot is made with greyscale anti-aliasing, not ClearType, and this what makes Adelle look pretty on XP.
I managed to confirm that on one of two XP laptops I have at my disposal, however on the other laptop I am still seeing jagged Adelle regardless of the OS anti-aliasing settings. (edit) Latter is running Firefox 5.0 though, will need to double check if this is relevant or not.
--
As far as conspiracy theories go - I do believe that they bend the reality their way by showing the best of two possible screenshots for XP, and not even mentioning that enabled ClearType creates rather serious rendering issues.
I had one of my websites serving a small JavaScript that tests for the anti-aliasing type used on the client side. Just pulled the stats off the database and from 498 Firefox/XP visitors, 486 had ClearType enabled. So that's the "XP would typically have ClearType off" myth going down the drain. All these people would've looked at a crappy version of Adelle if I were to use it naively trusting the Typekit's browser samples.
5 Jun 2011 — 12:30am
"XP would typically have ClearType off" myth
Grayscale is the default, but more recent versions of IE (and some other apps) force on CT.
5 Jun 2011 — 3:30am
Alex: The stats of your anti-aliasing type detection seemed very high for the ClearType, so I made a quick search and found that the javascript you are using (link) unfortunately doesn’t recognize the difference between ClearType and Standard anti-aliasing – it only tells whether the font is aliased or not.
However, it would be interesting to know the true results, only the script has to be modified to detect if there are any pixels which have different values of subpixels for a black type on white – if so, they are rendered in CT.
The second screenshot you posted is strange, it features both Standard and ClearType. Sometimes I have to refresh/restart the browser to see that I enabled CT.
5 Jun 2011 — 3:41am
>I had one of my websites serving a small JavaScript that tests for the anti-aliasing type used on the client side. Just pulled the stats off the database and from 498 Firefox/XP visitors, 486 had ClearType enabled. So that's the "XP would typically have ClearType off" myth...
Is your js distinguishing between the two kinds of aa on xp? I.e. does your survey show 486/498 use CT and the other 12 are split tween aliased and standard?
5 Jun 2011 — 4:19am
Alex, I looked more closely and saw that you already modified the script ... still, the numbers seem very high. It could be that Standard Windows rendering when anti-aliased doesn't return alpha-based image but already alpha "baked", but I don't know.
5 Jun 2011 — 6:31am
Alex, you'd be doing the font world a great service by writing a truly lucid version of your JavaScript snooper, and hopefully not only providing the results but even making it available for others to use via their sites (because everybody has a different flavor of average visitor). It would need to: distinguish the exact type of rendering; convey the associated browser being used; and use a very large sample. I used to rely on thecounter.com, but eventually that became too limited and now it seems to have stopped in early 2009.
Please? :-)
hhp
5 Jun 2011 — 10:47am
> Is your js distinguishing between the two kinds of aa on xp? I.e. does your survey show 486/498 use CT and the other 12 are split tween aliased and standard?
Yeah, I can tell apart CT and GS (greyscale). Here is the script, have a look - http://bvckup.com/js/font-smoothing.js. There is a single function and it returns 0 for failed detection, 10 for no smooting, 20 for greyscale, 25 for IE with smoothing (see below) and 30 for ClearType.
498 is a number of Firefox visitors on XP, 486 using ClearType and for the remaining 12 the detection failed. In other words not a single detected one used standard or aliased.
--
Hrant, the script is linked above. Note though that in the IE it is not possible to tell CT and GS apart at all. I have wrecked my head over different options for over a month and gave up. See, for example, this thread for one of the attempts. There is a way to detect CT/GS by making a Flash applet render a glyph, but that would detect an OS level setting, which may (and most likely will be) overridden by the IE.
--
miha, with regards to the CT number being that high I think there is a very simple explanation. IE7 was a part of Windows Update at some point if I am not mistaken. That would've forced it on a very large number of XP users enabling CT. That's it. CT is the new default for fully patched XP.
5 Jun 2011 — 10:48am
> Please? :-)
Not a firm promise, but give me a couple of days :)
5 Jun 2011 — 11:02am
> not a single detected one used standard or aliased.
Considering this
http://en.wikipedia.org/wiki/Usage_share_of_operating_systems
I have to think there's something wrong here. Can we really believe
that a huge proportion of XP users delve in and change the rendering
default? People have trouble changing the Times (and now Calibri)
default in Word! :-/
I understand that newer versions of IE use CT no matter the OS setting.
But the OS setting is not altered. Plus you said those stats are for Firefox.
And in any case we can't ignore the penetration of Firefox!
> There is a way to detect CT/GS by making a Flash applet
> render a glyph, but that would detect an OS level setting
But coupled to a detection of which browser is
being used, wouldn't that cover things nicely?
hhp
5 Jun 2011 — 11:04am
You know, if you were to whip up something that generates robust stats on this stuff via a pertinent, high-traffic site* I think you can guarantee yourself a lot of airtime at TypeCon and/or ATypI. Which BTW is not [necessarily] about vanity - exposure leads to commissions.
* Guess where would be ideal... Typophile! :-)
hhp
5 Jun 2011 — 11:08am
Nah, Typophiles have too high a number of Macs and savvy Windows users too give us any relevant numbers.
5 Jun 2011 — 11:21am
But those are the font buyers too! :-)
Certainly though the more sites you leverage the better.
hhp
6 Jun 2011 — 2:20am
I installed XP SP3 on a freshly formatted notebook last summer. I attempted to turn on ClearType out of habit but it had already been activated. Perhaps later versions of XP have ClearType on by default or it checks the display hardware.
6 Jun 2011 — 6:40am
A>Yeah, I can tell apart CT and GS (greyscale).
In Firefox.
>...in the IE it is not possible to tell CT and GS apart at all.
Ugly. kinda happy I assume CT "or else" in web fonts for windows.
HP>...extrema of grayscale letterforms should be solid.
The diagonals, non-extremes of curves and lots of other letterform edges technically and absolutely cannot be solid. Then what?
6 Jun 2011 — 7:13am
Hrant: They are font buyers, not font readers.
6 Jun 2011 — 8:42am
Hi everyone,
Tim Brown here, Type Manager for Typekit.
Alex, I'm sorry our support team didn't immediately pinpoint the nature of your question. We receive frequent inquiries about web type rendering, and the issue you have noticed is very similar to Windows rendering support requests we can often solve by explaining (in general) how type rendering technology works.
Our screenshots are taken by real browsers with default OS/browser settings.
As Si mentioned, Windows XP does use Standard antialiasing by default. However, if you're using IE7 on XP, or any browser on a machine where IE8 happens to be installed, ClearType will be enabled (Typekit's series of blog posts on type rendering, to which our support team initially pointed you, explains this and more). For these reasons, the percentage of XP users seeing ClearType-rendered fonts is indeed greater than default browser/OS settings would make things seem. That percentage varies by audience, though, so it's excellent that you are paying such attention to your own visitors via your detection script.
Regarding one other point:
We do not bend reality. We do our best to explain, and show, what's going on in each of many possible font/browser/OS mixes, and we're learning more every day. You used the phrase, "the best of two possible screenshots." While we're on the subject of multiple possibilities, I'd like to share some of our latest R&D.
Many fonts, even well-instructed ones, do not look good at large sizes on Windows with GDI ClearType enabled; some of the same things that help small text look crisp make large text look choppy. On the other hand, large text rendered with GDI Standard antialiasing looks smooth. Wouldn't it be great if ClearType were active when type is used small, and Standard were active when type is used large?
The answer might lie in serving files with PostScript outlines when type is meant to be used large and serving files with instructed TrueType outlines when type is meant to be used small. In many Windows browsers, PostScript outlines trigger Standard antialiasing even when ClearType is enabled.
Already this year, our developers have restructured the way Typekit fonts are stored, processed, and previewed so that we can test theories like this. We'll continue to do our best to explain each improvement that happens as a result of such work.
Tim
6 Jun 2011 — 9:49am
> The diagonals, non-extremes of curves and lots of other letterform
> edges technically and absolutely cannot be solid. Then what?
Do you mean that the contrast between grayscale parts and totally solid parts is unpleasant, so we should just make everything blurry? If so, I admit that's something to consider, but to me in the end:
- Blurry has its own inherent ugliness.
- When we're reading blur is more damaging than that contrast.
--
In that big "Cl", look at the inside tips of the serifs of the "C", and look at
the top of the el; do you really think that's better than making them solid?
hhp
6 Jun 2011 — 6:22pm
Hello all,
Thank you @apankrat for directing me here. As the author of the original JavaScript that you based your work on, I'd like to share the reason why I created the script and how it is relavent to this discussion.
When I wrote the font-smoothing detection script, it was because I noticed that some embedded fonts looked horrible under XP, which was (and still is) the standard platform of the telecom I used to work for. A standard XP SP3 image at that shop always had font-smoothing off. They still use Office 2003 as their standard Office suite and IE6 due to legacy apps that require it, whuch may be the reason why their XP image has not font-smoothing enabled at all. This company will be off this platform by the end of this year (I believe ... I no longer work for them, but it seems like this is still true). Most telecoms and banks that I have IT friends working at in Canada still run this antiquated combination. I hope not for long, but I don't call the shots there ... these are institutions that are not known for their up-to-date IT infrastructure (keep in mind that these dudes still have COBOL code from the 1980s kicking around on their systems).
The primary reason why I wrote the script was so that I could serve a different font to this audience ... it just so happened that there were other web surfers that were still using IE6 without font-smoothing on. While that latter audience has dwindled quite a bit, I don't think the former has, and this audience may not have been picked up in the user sample in the experiment above.
So, my gut feel (i.e. non-scientific) is that if, in the next year, your audience *may* contain old conserative companies that has a lot of legacy intranet web apps that they are still migrating over to a modern browser like a telecom or a bank, you may want to ensure that you use something like my or @apankrat's font-smoothing script to serve alternative fonts to that audience (for those interested, my version of the script is located here).
My $0.02, for what it's worth.
Z.
6 Jun 2011 — 9:04pm
Tim: Wouldn't it be great if ClearType were active when type is used small, and Standard were active when type is used large?
That's what MS Word does on Windows. Unfortunately, they implemented it at the application level at a default point size (20-something, as I recall), regardless of either individual typeface design relative to em or resolution. Ideally, this sort of behaviour -- and several others affecting aspects of font smoothing, subpixel spacing, etc. -- would be set at the font level, in extensions to the gasp table. This would enable font makers to optimise these behaviours relative to specific design characteristics.
In many Windows browsers, PostScript outlines trigger Standard antialiasing even when ClearType is enabled.
Yeeeees, but... Windows PS greyscale antialiasing is not the same 'Standard' antialiasing as applied to TrueType. If you are able to control which format you send on the basis of font size, then the PS fonts will look better at larger sizes under GDI, but may look much worse than even auto-hinted TrueType at text sizes.
_____
PS. I see that you mentioned GDI ClearType specifically in part of your response; thanks for that. Given that GDI and DWrite ClearType are so different, in both the x- and y-direction, I think we should consistently identify which we are discussing when making statements about ClearType.
6 Jun 2011 — 10:04pm
As per some earlier comments, I've put together a page to try and quantify the use of ClearType on the Web - http://swapped.cc/font-smoothing
The page hosts and includes tiny JavaScript that tests browser's rasterization method and then posts the result back to the server. So far I have about 6500 samples (fewer if uniques are considered), but they came mostly from my own traffic and it won't hurt to diversify them.
Additionally, there is a HTML one-liner that can be dropping into any existing web page and it will run the same test and record the result when the page is loaded. If you can embed the script in some sites under your control, it would mean better diversity and quicker sample accumulation. I am working on the Statistics page, and it should be up and running in few days.
Any thoughts or comments - I am all ears. And don't forget to click that link to let my script to look at your rasterizer.
--
@Tim, regarding bending of the reality - there was another thread on a similar subject and it too revolved around rendering issues and TypeKit not providing an easy way to filter out Windows-unfriendly fonts. This was over a year ago, and I don't think anything changed. Not simple flag saying "this font is not recommended for use on Windows (in small/large sizes)". No community-driven font rating as per sii's suggestion. Nothing to help me decide against using Adelle if I have a large Windows audience. Add to that XP sample that actually acts the opposite way and then do tell me that this whole situation does not look a bit strange.
7 Jun 2011 — 1:11am
The second screenshot you posted is strange, it features both Standard and ClearType. Sometimes I have to refresh/restart the browser to see that I enabled CT.
Not strange at all, as Firefox respects the system-wide anti-aliasing settings for local fonts, but has its own option for downloaded fonts, gfx.font_rendering.cleartype.use_for_downloadable_fonts, which is set to true by default.
7 Jun 2011 — 3:58am
JH> I think we should consistently identify which we are discussing when making statements about ClearType.
Will you design different outlines for GDI and DW? hint them differently? what's the difference to the developer?
JH> If you are able to control which format you send on the basis of font size,
CSS is mostly not ready for this as far as I know, and completely not ready if the user zooms through the server's division between formats.
TB> We do not bend reality.
I'm a complete believer in this. But then again, anyone who publishes web fonts that have the word "Web" in the font name, is likely to be bending reality, somewhat ;)