Blurry text in IE9 and/or Firefox 4?? READ THIS

EDIT - Microsoft has released an update regarding some blurry font in IE9. Some users also note it seems to have improved the fonts in Firefox as well.

http://www.sevenforums.com/news/172125-font-smoothing-ie9-update-latest-recommended-updates.html




As I see so many posts all over asking "Why is the text blurry"??, I'll post this thread and maybe it might help you out possibly.


Here's just one example from me in Firefox 4.

With gfx.direct2d.disabled set to True, normal look on the left, and with the enabled blurry look on the right:




Some users, not all, now notice blurry text in Firefox 4 and/or IE9.
*Some may only get this with system specific hardware/drivers. Some may not get the problem at all.*

It basically comes down to (not going to get technically into it) a problem relating to Hardware Acceleration that these new browser now use, and Microsoft's Direct Write/Direct2D/Direct draw components. Pretty much a fix needs to come from MS, not the browsers' developers. (Both browsers now have HA enabled by default).

Until then, a couple workarounds that have worked for me since I encountered it months ago and others, can be implemented.

A particular workaround in Firefox that I use is to type in the address bar -

about:config
I'll be careful/OK

Find the Boolean entry - gfx.direct2d.disabled, and set it to True.

You could also un-check - Use Hardware acceleration when available, in Firefox's Options Advanced/General tab.




I leave mine enabled, and just set the Boolean value to True and it fixes the blurry text for me. This only disables Direct2D, and leaves Direct3D enabled.


For IE9,

Enabling - Use software rendering instead of GPU rendering, which effectively turns off Hardware acceleration in IE9, doesn't seem to fix the blurry text at all for me.




What does seem to work for me is to set that particular website that shows blurry in Compatibility View Mode.

If you find most if not all websites give you blurry text, then you can set all to display in Compatibility View Mode if desired.

http://www.sevenforums.com/tutorials/1220-internet-explorer-compatilbility-view-all-websites.html


While this may not help all, I hope this helps some until some actual solution is given out to fix the problem, as it has me since I've used both browsers. If this doesn't work for you, you may have better results googling "blurry text in Firefox 4", or IE9 and researching for a possible workaround.

Some of these settings may basically turn off or partially disable HA. For me, I'd rather have my fonts display right and not be all blurry and cruddy looking over using HA. But that's just me.



FF reference: Direct2D/DirectWrite Accelerated Rendering

You may also want to check out this add-on for Firefox: Anti-Aliasing Tuner

You should be able to modify the text to your liking while leaving HA completely enabled.

Additional Observations:


IE9 vs FF4

I get completely identical results either way. When using GDI FF4 and IE9 are equal. When using D2d/DirectWrite FF4 and IE9 are equal.

IE9 has an advantage in that you can change on the fly without a restart. Many pages render in IE7 compatibility mode by default giving the impression it works better, it doesn't, the page has just dropped down to GDI rendering, so it isn't using DirectWrite.


On using About:config gfx.direct2d.disabled.

I have read that this is exactly the same as unchecking "Use hardware acceleration when available". Both of them disable D2d and leave D3d alone. Also changing it in the in advanced preferences over-rides the about:config setting , so you may as well set it in the advanced preferences and forget the about:config setting, unless you have a test that verifies it does something different.


Bug or Feature?

Do a bit of research and you will find that the softer smoother (blurrier) fonts are on purpose and a sign it is working as intended. In fact if driver differences are playing a part at this point, it is most likely the systems that show sharp fonts that have broken drivers because they are reverting to GDI fonts. These new fonts are more typographically correct. DirectWrite fonts are meant to ignore pixel boundaries to flow more naturally and have bidirectional Anti-Aliasing. This makes for a more accurate font representation, that flows, moves and transforms better. BUT it also means that GDI fonts that snap to the grid will be sharper. The difference is negligible on larger B&W fonts, but smaller fonts,reverse fonts(light on dark) and color fonts can look quite bad in DirectWrite.

Unfortunately the internet is full of small, color, reverse fonts. So until Microsoft finds a work around to improve small/color font output many of use will have to work around this by disabling Hardware Acceleration in FF4 or using an IE compatibility mode.

Demonstration of DirectWrite Text "Benefit".

Find a page with reflowable text, not all of them work, but this one does so you spot it the first time:
DirectWrite « Marc Gregoire’s Blog

Now start shrinking the page down horizontally to squish the text, very slowly.

DirectWrite on: Shrinking is very smooth and even until a word gets moved.
DirectWrite off: Shrinking jitters all over the place as words shake back and forth.

Again both IE9/FF4 behave the same way. IE9 is easier to test because you can switch without restart, but they are both the same.

Part of the point of DirectWrite is that it ignores pixel boundaries so movement, transformations are very smooth(but can have softer text). GDI text respects these boundaries so it has to jump to the grid (but can have sharper text).


Anti-Aliasing Tuner extension for FF4.

I did some testing with this and while I could get the sharpness improved, the letter spacing became even worse! Look at the tuner section one word at a time. The letter spacing is a mess. Look at "Bioware", it is there twice, each spaced a different way, look at the mess in "representatives"... This "fix" is not really usable IMO.



Actually if you read the text for the extension it says:
Known Issue:
* Glyph position is not correct when GDI* rendering is selected. (no idea to fix...)
Not correct is one way to put it. Random and drunkenly spaced is another.

Cleartype Off, Hardware Acceleration works!

If you don't like cleartype at all, you are in luck. When I turn off cleartype (unclick the "Turn on cleartype" box in cleartype tuner) it respects this and Disables DirectWrite fonts, but maintains Direct2D graphics acceleration. But this only works in Firefox. IE9 Does not let disable Cleartype.

Fonts have no AA at all and when I do the jitter test I describe above, they jitter like GDI fonts. So from any measure these appear to be GDI fonts without AA/CT or anything. They look just like CT-OFF without HW acceleration. No difference.

Direct2d Graphics demos are still accelerated.
Go to any of the Direct2D demos like this one and they are still full speed accelerated:
HTML5 Speed Reading

Output sample:
Compare this output with the above. If you look closely you can tell this has not CT, NO AA. It is even sharper than GDI sample above. Letters are also spaced correctly.




Bottom line

We either have to workaround and disable it, or get used to it. If you don't like Cleartype you are in luck. It appears you get the best of both worlds. HW acceleration without DirectWrite fonts.

For the rest of us, hopefully Microsoft will find a way to improve small color font CT rendering so it looks like the GDI fonts we like, before this starts getting forced on us everywhere, as this is Microsofts new text system going forward.

Broader issue

Nice write up Snowdog. you've saved me the trouble of testing the new Firefox anti aliasing configuration plug-in. Sounds like it's not worth it.

Apart from the technical details that cause these issues there is a larger industrial/commercial issue. Clear Type is a compensation for limitations of LCD monitors, an afterthought fix to the realization that not everyone uses one resolution and that outside of one resolution most LCDs look dreadful. Yet still we have this blind and aggressive pushing of Clear Type (and of widescreen flat panel displays) in spite of the fact that CT applies only to a cross section of monitor technology (LCD) and user tastes. Although Firefox’s problem may not be specifically with Clear Type it is clear that most of those affected by this hardware acceleration problem are those who don’t use Clear Type or use it outside of the world of “LCD monitor at native resolution”.

I prefer fast performance (and screen response), high refresh rates and 4x3 screen ratios over high resolutions so I use a 1024x768 resolution on a CRT monitor at 85Hz. This provides marginally faster graphics responses within the GUI and allows me to play Crysis and GTA4 at high physics and game world settings with FPS of 50+. With an LCD panel I have to use a much higher resolution to match the native resolution of the LCD monitor and that impacts performance elsewhere.

In short (for my circumstances):

- LCD monitors guarantees lower performance to provide something I don’t want.
- Clear Type guarantees that if I don’t use an LCD my GUI looks like crap.
- That Firefox has been sucked into this trend has me here.

Thanks again snowdog.

I think that might be a narrower issue. As CRT use is almost certainly a small minorty today.

Do you mean Cleartype, when you talkabout Truetype? Cleartype is what is designed for AA on LCDs.

I just tested with Cleartype off, but with Hardware Acceleration On, and somewhat surprisingly, that works. See above.

Unfortunately. I have an LCD monitor and I like Cleartype.

blurry fonts cont.

D'oh! Thanks for the correction. I did indeed mean Clear Type. I did some similar tests to yours, in fact most of my tests were with font smoothing for the system set to Standard. In general in Vista at 1024x768 on a CRT even the font smoothing app that is now built into Windows 7 gave me no improvement over standard smoothing and nothing helps with the Hardware accelerated mess in Firefox except for turning it off. Oh well.

@Snowdog

exactly how did you turn off the blurry text with hardware acceleration still on?
was unchecking "turn on cleartype" in the windows cleartype tuner all you did?

i cant get it to work.. no matter what i do, if hardware acceleration is turned on, the text is cleartype-blurry.

i cant stand cleartype so i have to have hardware acceleration turned off.
and then of course i get 7fps on the tests

That is Strange. How could Windows behave so different for different people.

I get clean zero AA text with HW acceleration on in Firefox, either way I disable Cleartype. I tried a couple of ways and I couldn't get it to NOT work. IE9 OTOH always has smoothing no matter what I do.

There are two ways you can disable Cleartype. I tried both.

Disabled font smoothing (which also disables cleartype) then restated FF with HW accel on. No AA/smoothing.

Then I turned back on smoothing and just disabled Cleartype and restated FF, with HW accel on. Again no AA/smoothing.

DirectWrite was also non functional (fonts jittered on the squeeze test) but my Direct2D tests were running full speed.

In fact there was no way that it didn't work for me, does Microsoft have yet another setting that plays into font smoothing/cleartype??

See attached.

For me, whatever I try, in Firefox 4 I can't get the urlbar reverse text, Find box reverse text and Download window reverse text display nicely like it was in Firefox 3. (For me, IE9 has all its text just fine.)

Entering gfx.direct2d.disabled = true does fix the bad rendering problem for the web content text, but the fields mentioned above remain very bad no matter what. How to fix also those? For me, I'll switch back to FF3 if it can't be fixed, the rendering is awful.

@Snowdog

i just checked the dragon age 2 forums you use to check the fonts with,
that forum displays text correctly so dont use it for comparison.
this forum also displays text correctly, no blurry text here either

but on many other sites the text isnt shown correctly..

i.e google, check attached image.

the font smoothing setting is like an extra level or so, even when cleartype is off, there is some smoothing, as you can see on the X in firefox on the image.
when turning off font smoothing, it removes all smoothing, but then menus and so get messed up as well, check attached image

but the most obvious site ive found so far is http://www.chris.com/ascii/, check the ascii art with hardware acceleration on and off.
no matter what setting i use, cleartype on and off with font smoothing on and off, if hardware acceleration is turned on, the ascii art isnt displayed correctly, if hardware acceleration is turned off, it displays correctly no matter all other settings, but with cleartype, its blurry

Interesting. You seem to have found some exceptions(though I only see one on my end). I did go to quite a few sites like this and never noticed any with AA. Just Google Bold.

For me on Google. Only the bold font is slightly worse with HW on. All the rest of the fonts are still ZERO AA.

Ascii Art. I don't seem to have the issue you mentioned. No blur or issues on the Ascii Art.

All I can say is Microsofts font smoothing/CT/AA is quite a mess. With weird exceptions like that between fonts on the same page. But in the vast majority of pages there appears to be no AA/CT/Smoothing.

Attachments both with HW Accel on, CT off.

check the picture you atteched with ascii art, the vertical lines to the right on the cameras are'nt vertical, if you turn off hardware acceleration, they are displayed correctly, vertical.

if either hardware acceleration or cleartype is turned on, fonts get incorrect width.
when ever cleartype is turned on, all fonts get incorrect width and get blurred.
if only hardware acceleration is turned on, fonts get incorrect width and bold fonts get blurred.

Ok. I see it now. MS font systems do seem like they are in beta.

It is kind of amusing that while initially MS went for better looking screen fonts designed for LCD and a system to tune better appearance for LCD (cleartype) and Apple went more for "Typographic Purity", but blurrier looking on screen. Now MS seems to be following Apple with its new system and seems intent on forcing it on us.

I actually like tuned Cleartype fonts. They look clean and sharp to me and since I tuned them, they are ideal for my screen. The only way to get Cleartype fonts in Firefox 4 is to disable Hardware Acceleration. I guess the same applies for Non AA/CT fonts if you want them everywhere.

So I guess most of us will simply turn off HW Accel.

@borat. Interesting indeed. The differences between your screen grabs of the search drop down resembles the general differences I see on my system between setting font smoothing to Standard or Clear Type, regardless of the Firefox hardware acceleration setting. Attached is an example (from nytimes.com) of the difference between Firefox HA on and off (with font smoothing for the system set to Standard). Setting system font smoothing to Clear Type seems to split the difference, in which case the big fonts look better but everything else has that ol’ clear type haze. What a jumble, but listening in on y'all has helped me out.
Also, in more Ascii art testing I got the exact same results with the ascii picture of the camera.

ive moved back to 3.6..
fonts are too messed up in 4 for me..

hardware acceleration and cleartype off makes the text in the addressbar not readable when its selected, and other text like on the orange firefox button arent readable, and on some sites the text still get messed up..
like on https://www.flashback.org/
the top menu bar, looks fine, but on hover, it get messed up

borat said:

ive moved back to 3.6..
fonts are too messed up in 4 for me..

hardware acceleration and cleartype off makes the text in the addressbar not readable when its selected, and other text like on the orange firefox button arent readable, and on some sites the text still get messed up..
like on https://www.flashback.org/
the top menu bar, looks fine, but on hover, it get messed up

Click to expand...

Update your display drivers, the site above displays fine for me with no blur or any other visual problems. I think this issue is machine specific since Hardware Acceleration depends on the GPU

In fact I never ever got any such issues with FF4

yowanvista said:

borat said:

ive moved back to 3.6..
fonts are too messed up in 4 for me..

hardware acceleration and cleartype off makes the text in the addressbar not readable when its selected, and other text like on the orange firefox button arent readable, and on some sites the text still get messed up..
like on https://www.flashback.org/
the top menu bar, looks fine, but on hover, it get messed up

Click to expand...

Update your display drivers, the site above displays fine for me with no blur or any other visual problems. I think this issue is machine specific since Hardware Acceleration depends on the GPU

In fact I never ever got any such issues with FF4

Click to expand...

have you tryed the ascii page i showed earlier with hardware acceleration and cleartype on and off, and you see no difference??

ive got the latest nvidia drivers

check the pictures, hardware acceleration and cleartype off, when the adressbartext is selected the it looks bad, and the hovermenutext change to bad, even the selected "sport" change, and the firefox button-text look bad as well, with hardware acceleration on, it change the dimensions of the fonts so the whole site change, like i showed in my last post..
width, and maybe height as well, of the fonts change, and get blurred or just look bad

view the images in full size in different tabs to compare
edit: added a 3.6 screenshot, no issues there

borat said:

yowanvista said:

borat said:

ive moved back to 3.6..
fonts are too messed up in 4 for me..

hardware acceleration and cleartype off makes the text in the addressbar not readable when its selected, and other text like on the orange firefox button arent readable, and on some sites the text still get messed up..
like on https://www.flashback.org/
the top menu bar, looks fine, but on hover, it get messed up

Click to expand...

Update your display drivers, the site above displays fine for me with no blur or any other visual problems. I think this issue is machine specific since Hardware Acceleration depends on the GPU

In fact I never ever got any such issues with FF4

Click to expand...

have you tryed the ascii page i showed earlier with hardware acceleration and cleartype on and off, and you see no difference??

ive got the latest nvidia drivers

check the pictures, hardware acceleration and cleartype off, when the adressbartext is selected the it looks bad, and the hovermenutext change to bad, even the selected "sport" change, and the firefox button-text look bad as well, with hardware acceleration on, it change the dimensions of the fonts so the whole site change, like i showed in my last post..
width, and maybe height as well, of the fonts change, and get blurred or just look bad

view the images in full size in different tabs to compare
edit: added a 3.6 screenshot, no issues there

Click to expand...

This is weird, I don't see all that blurry text in my FF4

yowanvista said:

This is weird, I don't see all that blurry text in my FF4

Click to expand...

Make sure you are clicking his images again after you load them, because when you first load his full size ones, they are still aren't 100% so everything looks blurry.

Also instead of arguing the subjective about what you see as sharp, provide your own sample, because opinions vary about what people consider sharp.

There are 4 potential display font outputs on Win7(what a mess):

1) True unaliased fonts, with no smoothing/CT/AA at all.
2) Cleartype fonts
3) Traditional Windows Smoothed fonts (but not cleartype)
4) New DirectWrite HW accelerated smoothed fonts.

People can have a subjective preference for any of the above, but they are essentially descending order of sharpness. 1) being sharpest, 4) being softest.

This is by design. If your HW accelerated fonts don't appear soft, you don't have HW accelerated fonts, and the problem is in your drivers, not the drivers of the people who do.

I'm with borat - back to Firefox 3.6x.

Snowdog said:

There are 4 potential display font outputs on Win7(what a mess):

1) True unaliased fonts, with no smoothing/CT/AA at all.
2) Cleartype fonts
3) Traditional Windows Smoothed fonts (but not cleartype)
4) New DirectWrite HW accelerated smoothed fonts.

Click to expand...

and since you can combine them, either your 4 options by them selves, or
2+3
2+4
2+3+4
3+4..

8 possible ways? probably missed some or added to many, im tired..