Fixing Internet Explorer 11’s Blurry Font issue

This issue started with my first subscription to The Wall Street Journal.  I noticed that when I viewed web pages at www.wsj.com, the fonts always seemed blurry.  Even after adjusting my ClearType settings in Microsoft Windows, the web pages were still not clear.  I even tried switching to a different browser, Google’s Chrome, but the issue was still the same.  I think I’ve found a solution that I want to share with you. 

As a reference point, the computer that I’m using is a Microsoft Surface Pro 3 using Windows 8.1.  Internet Explorer 11 is Version 11.0.9600.17728 Update Versions: 11.0.18 (KB3038314).  I used OneNote’s screen clipping feature to capture website images and Microsoft Paint to mark the web pages.

Problem

Below is an image of what I saw on IE11.  The red boxes show examples of blurry text that I’m referring to – you can probably find more but I’ll just limit it to these. 

There appears to be gray shading on the edges of letters and they seem to be more pronounced with uppercase letters and the letters on the titles of each article.

Here is a close-up of some text using Microsoft Paint zooming in at 200%.

There is just too much gray in the letters’ edges which leads to blurry fonts.

When I tried using Internet Explorer’s options to change fonts and ignoring font styles specified on webpages it, unexpectedly, affected Microsoft’s News App and Microsoft’s Health & Fitness App. 

Here is how the News App looks normally.

Checking the checkbox in Tools->Internet Options->Accessibility->Ignore font styles specified in webpages will fix Internet Explorer font issues but will have side effects.  It causes icons and text to disappear from the News App like so (see the red boxes indicate missing icons).

Maybe Microsoft has a technical reason for linking Internet Explorer 11’s settings to the News App or the Health & Fitness App, but whatever it is, the result is annoying and just plain wrong.  However, I’m glad to report that there is a fix – albeit lengthy.

Solution

The fix involves the use of a style sheet that changes the font to a size and style that is more readable.  The reason I use a custom style sheet is because it limits the fix to Internet Explorer 11 and does not affect the News App or the Health & Fitness App.

Steps

• Create a style sheet by opening Notepad and cut-and-pasting the following text into it.

/*
* Save the file with a .css extension
*/

/*
* This next example changes the font size to large.
* It also says please use calibri as my default font.
* the ‘asterisk’ means apply this to the whole page
* the !important declaration should over-ride any values set by the website.
*/
*
    {font: large calibri, calibri !important;}

 

• Save the file to a location where you can find it again.  Make sure to save the file with a “.css” extension.  For example, I saved the file using the name StyleSheet02.css.
• In Internet Explorer 11, go to Tools->Internet Options

• From within the Internet Options window, left-click on Accessibility

• From the Accessibility window, check the box labeled Format documents using my style sheet like so…

• Then, left-click on the Browse… button to find the style sheet you created from the first step.
• After you’ve found your style sheet, left-click on the OK button in the Accessibility window, and left-click on the OK button on the Internet Options window.
• Exit then re-run Internet Explorer once more.  There should be a difference in the way fonts are rendered.

Result

Again, before the fix…

The result after the fix

I’ve basically changed the font style and size to minimize/remove blurriness.

Again, here is an image before the fix…

Here is an image after the fix, again using Microsoft Paint zooming in at 200%.

As you can see, at 200% there is still some blurriness in the letters but it has been substantially reduced.

At normal view (without zoom), comparing before..

.. and after…

This solution might seem a little complicated, but I think the fix is worth it.  There are probably more settings that could be made to the style sheet to improve the webpage even more but I think this is a good start in understanding what style sheets can do.  I hope you found this article helpful.  Have a nice day.