On my website I have noticed that there is a substantial difference in text quality between Firefox, Chrome, and Internet Explorer. While the text is crystal clear in Chrome, and even more so in Firefox, it seems blurred and out-of-focus in Internet explorer. Here is a picture comparison:
Personally I think it is not aesthetically pleasing to the eye. I would like to find a solution without asking users to use plugins like Microsoft Silverlight, as not all users will want to install a plugin just to view 1 website. I don't understand how websites like Facebook and StackOverflow don't have this problem (or at least less of a problem).
I've tried using CSS filters, different font-rendering properties, and using different units for font-size, but I'm seeing no effect. I know I haven't tried all possible CSS property combinations so this could still be the answer.
I've been scouring the web and StackOverflow for hours now, and have yet to find a solution. There are other similar questions here but they remain unanswered.
Any help, or idea of where to go or what to do, is very much welcomed. Run this Snippet in different browsers:
html,body{
margin:0;
height:100%;
font: normal 14px/24px "Lucida Sans Unicode","Lucida Grande", "Arial", sans-serif;
}
div{
text-align: center;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
background-color:rgb(28, 31, 37);
color:white;
padding:1em;
}
p{
font-size: small;
}
input{
padding: 16px 12px;
width: 250px;
border: 0;
background: #0A0A0A;
color: #eee;
font-size: 14px;
font-family: "Open Sans",sans-serif;
-webkit-box-shadow: inset 0 0 0 1px #323742;
-moz-box-shadow: inset 0 0 0 1px #323742;
box-shadow: inset 0 0 0 1px #323742;
}
}
<div>
<h1>Compare this text</h1>
<p>And this text as well</p>
<input type="text" placeholder="Even placeholders are blurry">
</div>
The Snippet actually looks similar in different browsers: but looking carefully there are definite differences though. Chrome (Version 44.0.2403.125 m) seems to have a sharp edge effect. IE (11) seems to have a slight blur. Whereas Firefox (38.0.1), as explained by @user4749485, seems to have selected the best of both worlds to achieve the best legibility. Is there a way to manually calculate and adjust the font for IE only? (Another possible method to fix it)
I'm not sure where the rest blur is coming from (the Snippet's text seems clearer here, than the text on my website). If we can uncover where this difference comes from then perhaps this will be easier to solve.
TL:DR, and just to elaborate the question: I would like the text to look clear in IE like it does in Firefox or Chrome.
