: Why is text on microsoft site not smooth in non-IE browser? The following link: http://www.microsoft.com/en-us/server-cloud/windows-server/buy.aspx and possibly all other links in MS site does not
The following link: www.microsoft.com/en-us/server-cloud/windows-server/buy.aspx and possibly all other links in MS site does not render text smoothly in Chrome and Firefox. Why so?
IE7:
Firefox 16.0.1:
Chrome 22.0.1229.94 m:
More posts by @Miguel516
2 Comments
Sorted by latest first Latest Oldest Best
Long story short, you have font smoothing turned off in your OS, but IE7 is overriding this and smoothing anyway.
If you view your sample images at full size, it's apparent that the bottom two images are using no anti-aliasing at all. All modern operating systems support anti-aliasing of fonts, though Windows XP (which is 11 years old at this point) didn't enable it by default.
Nevertheless, I believe it's possible that IE7 may be overriding this and smoothing the text anyway, possibly because it is aware that the font in use, Segoe UI, is "optimised for Cleartype". More on this later. Or it could just be that IE7 simply ignores your system font smoothing setting (because you should always have Cleartype enabled on Windows).
How to fix
You need to enable font smoothing. Go to Control Panel -> Display -> Appearance -> Effects -> "Use the following method to smooth edges of screen fonts" -> Cleartype.
About font smoothing
The font smoothing setting in Windows is really referring to anti-aliasing of text. Anti-aliasing is pretty simple, and just means that each pixel is not just fully on, or fully off, but it can have degrees of transparency in between. A simple averaging process is used to find out how much of each pixel would fall inside and how much of it would fall outside the pixel square, and this is just like anti-aliasing in a graphics program.
Windows XP defaults to no anti-aliasing (or "font smoothing" as it calls it) and uses hinting only. Font smoothing settings needed to be set to "Cleartype" to enable the best anti-aliasing, but the fonts will still only be anti-aliased in the horizontal direction. (There was a third setting, "Standard", which turned anti-aliasing off for most text but on for larger headings, and certain special fonts).
Windows Vista and 7 always have Cleartype on. An interesting thing about recent Windows applications is that they can either use GDI or DirectWrite to render fonts, and DirectWrite uses a newer, better version of Cleartype with better anti-aliasing. This, however, is probably not relevant to this issue.
Why it only seems to affect the Microsoft site
Most fonts used by web sites up to this point have been from a specific set of fonts including Arial, Verdana, Times New Roman, Georgia and so on which have been well optimised for display even on older versions of Windows (up to and including Windows XP) which did not use font smoothing.
However, Microsoft's website uses Segoe UI, a font present in newer versions of Windows (and in certain other products, so chances are you already have it even if you're still on XP) which is notable for being optimised for Cleartype. What this really means is that it's not as much optimised for pre-ClearType font rendering, thus it requires proper font smoothing to look good.
In digital type, characters are designed as abstract drawings. When a text is displayed on screen, this very precise, ideal shape needs to be expressed with a more or less coarse grid of pixels.
The earliest method of expressing letter shapes was using black and white pixels, sometimes referred to as bi-level rendering. In the mid-1990′s, operating systems started to control the brightness of each pixel. This allows more information to be brought into the rasterized image.
For the display of text, almost all browsers rely on system rasterizers. There are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform).
Source: www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
From a personal point of view, even if @font -face is being used widely, its support (in the sense of rendering) is quite limited. I've had a very hard time trying to find fonts that render ok in most OS and browsers (btw, Liberation Sans does!). Sites like FontSquirrel give you the font in as many formats as possible. Even so, when you see the rendering you notice fonts vary a lot (even in kerning and size) and usually look quite pixelated.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.