Semi transparent copy of the text? Do you mean, that the text has to be stored two times in the markup? If yes, trick #1 is inacceptable dirty in my opinion. Even if the copying and overlaying could be solved with Javascript, the trick #1 seems to be dirty.

Is there any advantage in using the standard smoothing? How many people use the standard smoothing?

> How many people use the standard smoothing?

Anyone on XP with IE6 or any non-IE browser, which could be quite a lot. For example, one of my websites has 38% of XP visitors and IE6+FF+Chrome combination is 79% out of these 38%. This amounts to 30% of visitors seeing the site with Standard smoothing (assuming they all use default settings, which is very likely).

The advantage of using standard smoothing is that it consumes less CPU resources than ClearType. And turning off anti-aliasing completely uses less CPU resources yet.

For a web site to attempt to subvert these user settings, so as to force its appearance to the originator's quality standards, regardless of the proportion of the viewer's CPU time that the viewer wishes to allocate to its rendering is not something that I would wish browser manufacturers or standards bodies to facilitate.

At least people have a choice of whether or not they wish to install or enable Adobe Flash Player on their computers.

Anyone on XP with IE6 or any non-IE browser, which could be quite a lot.

Cleartype can be activated on XP.

> Cleartype can be activated on XP.

Certainly. By it is off by default. People are lazy, and so defaults are sticky.

> The advantage of using standard smoothing is that it consumes less CPU resources than ClearType. And turning off anti-aliasing completely uses less CPU resources yet

Do you know anyone who turned off ClearType specifically to reduce his CPU usage? I saw people doing that because they wanted their fonts to be built out of real pixels, but I am yet to meet someone who said "Screw the aesthetics, I will not upset my trusty 386 with any of this subpixel nonsense. Argh." :)

This isn’t the case, both ClearType and traditional antialiasing rely on oversampling, in the case of XP ClearType in one direction, whereas in regular antialiasing in both x and y. The difference in performance is negligible.

Although I've not seen stats on CT use on XP, many OEMs, especially those making laptops, would turn it on by default. In addition in your sample there are likely FF and Chrome users who have installed (but are not using) IE7 or IE8 so these would have had CT turned on.

.

Waaait a minute. Installing IE7/8 turns on CT at the OS level? I was under the impression that the IE simply used the CT if it was enabled in its own preferences (which is the default).

Also, while you are here, Simon -- I am wrecking my head on how to tell CT and Standard smoothing apart in the IE and in the confines of JavaScript. On FF and WebKit I can draw a letter on canvas and then check what pixels look like. On IE there's no canvas. There is fontSmoothingEnabled, which is quite useless as it's True in either case. I tried rendering text with VML, but it seems to be using alpha anti-aliasing only. Also tried pushing IE into changing the size of the rendered text when switching the CT on and off (by using tiny font sizes, odd letter spacing and characters) - no luck. I have all but given up on this, and resorted to looking at the IE version and the platform and assuming the CT is off if it's IE6/XP and it's on otherwise. Can you think of any sure way of detecting the smoothing type? Any pointers or ideas or anything...

>Installing IE7/8 turns on CT at the OS level?

Yes, if memory serves me right.

>Also, while you are here, Simon

I'll ask around.

> I'll ask around.

That would be great, thank you.

If I can get this detection stuff sorted out, it should help a lot of fence sitters like me to start using @font-face. Poor rendering quality in non-CT/non-Apple cases is a major deal breaker at the moment.

Setting the user’s browser rendering to CT when a user has aliasing set in the OS, is fine by me. Setting a user’s browser rendering to what you show, is the reason people are leery of letting web developers loose on rendering options. The OEMs making the None/CT smoothing decision for the user, have been doing so soundly, based on desktop performance from the given screen device. The web and @ff on the other hand, require descent to good anti-aliasing, or all the type looks either crusty from lack of aliased hinting, or bland from being forced to a skeleton by “good” aliased hinting.

Your method functions poorly for text over a range of sizes and styles, and I don’t think you are helping reading, or readers transition to anti-aliasing.

David, are you saying that you prefer Windows Grayscale rendering for font-face?

Hi,
I agree the trick #1 is too dirty.
In addition, I think web font rendering is an OS level issue.
Of course it is frustrating to look at your type (or the one chosen for your design project) poorly rendered on the web, but it is not a very good idea to alter the user’s environment and standard interactions, including font rendering.
Anyway the user will see all texts in a crappy way, so she/he will be used to it. And I’d even say if she/he keeps bad rendering settings or uses Windows based pcs ;-) , maybe she/he does not care at all about this issue.
If I’d was really concerned with on-screen text legibility, I’d approach the problem from the opposite side, checking which font sizes are rendered the best way for Windows platforms.

Just to clarify - I am not suggesting that this is an overly practical approach to improving font legibility, especially considering how distorted the actual letterforms are (see 'go' and 'e' in the above example). This is more a curious finding trying to deal with another problem - not being able to tell if the Internet Explorer visitor is using Standard or ClearType smoothing.

Based on a couple of weeks of scouting TypeKit, WebFonts, WebType, FontSpring and other places there appears to be no fonts available for @font-face licensing that look decent with Standard smoothing. For this reason the detection of an exact smoothing method is essential to deploying @font-face designs in production (to provide a reliable fall back to web-safe fonts when the CT is off). It is a deal breaker.

Try Fedra!

And Dez: There's no need for those periods. Look for the bookmark in the first post.

People are lazy, and so defaults are sticky.

Although that is true, often they simply don’t know, that they can profit from changing the defaults – and not only when they visit your website. You naturally cannot expect, that they install anything only because of your website. So I think, that it won't do any harm to teach them in a friendly and motivating way. And if the visitor ignores your before-and-after-images, it may be, that he either is not really interested in the content of your website, or he is contented enough with the actual look of your website. You could store some instructions on a central place of your website, how to improve the look (of your and other websites) with Cleartype. Not only with Cleartype, but with the Cleartype tuner, which I have installed on XP. From a certain point of view you support lazyness, if you contaminate the markup. It is comparable with the following: One of your friends does not wear gloves, when he changes the tyres of his car. And you give him your white shirt for cleaning his hands.

Anyone considered getting a lot of designers and programmers on board a "change your settings" campaign? An easily implemented badge pointing to a simple website explaining how and why.

>I am not suggesting that this is an overly practical approach

Good.

> the detection of an exact smoothing method is essential to deploying @font-face designs in production (to provide a reliable fall back to web-safe fonts when the CT is off).

Good. Let's wait and find out what Simon says. Standard smoothing, by promise from MS,, is always supposed to be there for users/developers with an aversion to Cleartype. If you can only find out what's on by drawing a letter and sniffing the pixels, we will even take that primitive method.

>It is a deal breaker.

What do you mean by this? If you can't sniff it all out you will blur the readably out, or you'll not use @ff fonts?

And Fontsquirrel: I prefer anti-aliasing in x and y, and I like it when the x and y hints work at small sizes, especially below "12" on Windows. This is Hinted CT above and Hinted Greyscale below.

(For an accurate look at this, you must remove it from your browser and look at it from some graphics viewer... something's scaling it a tad.)

Though hardly a staggering difference, if a few extra hints make a better web text font people can use, then I prefer it.

David,

> If you can only find out what's on by drawing a letter and sniffing the pixels, we will even take that primitive method.

This does not work on the IE. In fact, no detection method seems to work, that's the problem.

>> It is a deal breaker.
> What do you mean by this?

I mean that I cannot use @font-face in production unless I can reliably prevent non-Cleartype users from seeing this (Standard smoothing):

while still being able to serve this to those with ClearType:

(this is Benton Sans as served by WebType)

Oh, and here's how the non-CT sample looks with the CSS trick #1 applied:

It looks.. erm.. acceptable, and this is why I started messing with CSS workarounds in the first place.

News from an old network admin and desktop support guy: it isn't laziness, computer users are fearful - especially at work where they fear being accused of "breaking" something. That's why they don't mess with the defaults.

@apankrat and all:

This hack reminds me of this:
http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-f...

And I was under the impression you *could* detect the status of ClearType in IE.
No?

Rich

David- Your sample in Grayscale definitely looks better to my eyes. Interesting.

@db

Though hardly a staggering difference, if a few extra hints make a better web text font people can use, then I prefer it.

Me too. What's the technical diff between the two? What did you do?

Then, if you can tell me how to keep a font from fattening up on the MAC, we're all set. (Nutrifast?)

rich

Dyazide, Rich ;-P

RF> Me too. What's the technical diff between the two? What did you do?

I said a few extra hints, but it's technically a few x hints, and a rasterizer (vista "standard" that uses them, fewer colors, and y antialiasing.

apankrat> It looks.. erm.. acceptable, and this is why I started messing with CSS workarounds in the first place.

Now you've moved into the realm of a font made for the purpose. The un-tricked bentonsansre, is too ghostly for greyscale, I agree. It was hinted for CT and not to over-bolden on Macs.

Do your thing, it's what you want to do. But I would add to your popularization of this, which is all you can control, that it is not best for all fonts. And, that one's best bet if CT is impossible, is to seek fonts with both x and y hints, like the soon to be available Custer RE, or something like the Ubuntu font family, which I think has x hints too.

@db

I hope it isn't over-bolden for me to suggest that this is the kind of thing Microsoft would have documented somewhere.
Is it?

Sii? Anything available on this? Re best practices for backwards compatibility?

Regards,

Rich

RF>...documented somewhere...

I am certain it is. toodles.

Bump. Simon, please ask around :)

Still looking at this and need a bit of help with a hinting question. Can anyone familiar with the subject matter have a look?

http://typophile.com/node/78360

Sorry for the delay on the detection issue. Sadly the IE engineers report that it is not possible to detect the CT state.

Cheers, Si

Thanks, Simon. I think I found the solution, just need to sit down and implement it.

Sii> Sorry for the delay on the detection issue. Sadly the IE engineers report that it is not possible to detect the CT state.

Not possible, is impossible, as it's been shown to be possible in other browsers. So we might be hearing "undesirable" used interchangeably with "not possible".

My question to IE engineer was...

"Detecting CT on/off in IE? Is this possible?" along with pointer to this thread.

Reply was...

"No, not possible"

There may be a trick they're not aware of so I wouldn't say experimentation is a complete waste of time.

Cheers, Si

Something needing to be tricked doesn't seem like an open alternative for web font rendering to color sensitive users or for web developers who need shades of a color from their type, as opposed to colors ala CT, when designing with type on color and photographic backgrounds. Even if you leave the million or so web designers out of it, color sensitive users are said to be 6% of 700,000,000.

Even bigger than both of those mobs times four though, is the market perched on aliased fonts. And the best thing to lure them to a modern branch is with well hinted fonts for standard windows rendering, which are making their appearance as more fonts get hinted. It's a shame that it's not easily possible for web developers to combine such high quality font assets with CSS to more narrowly standardize the rendering across windows browsers and improve the user's web experience.

@Sii Daniels

Sadly the IE engineers report that it is not possible to detect the CT state.

Er, really?

See http://SystemParametersInfo.

SPI_GETFONTSMOOTHINGTYPE

Retrieves the type of font smoothing. The pvParam parameter must point to a UINT that receives the information. The possible values are FE_FONTSMOOTHINGSTANDARD and FE_FONTSMOOTHINGCLEARTYPE.

Code example.

The graphics API common to all browsers on XP is GDI and GDI explicitly allows content to be rendered with ClearType enabled, even if the OS-level setting is turned off. That's what IE7/IE8 do for all fonts and that's what Firefox 4 does for downloadable fonts on XP. Such use does not alter the system-level default.

John Daggett

Thx for that, JD.
However, the problem apankrat is trying to solve remains, in that those values are not exposed in IE so that the average web author can query for them.
That's what's needed.

Is that not also the case in FF?

rich

Ah, right. Nope, there's no direct way to detect Cleartype usage via Javascript in Firefox. The canvas trick might work but even there I'm not sure you're guaranteed to get subpixel antialiasing in all cases.

From that same site Richard posted earlier;

How to detect font smoothing using javascript:
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing...

Yeah, that does not work for telling ClearType and Standard smoothing apart on IE.
http://typophile.com/node/78360#comment-449044