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 render text smoothly in Chrome and Firefox. Why so?



Firefox 16.0.1:

Firefox 16.0.1

Chrome 22.0.1229.94 m:

Chrome 22.0.1229.94 m

  • What Windows version is this? – TehMacDawg Oct 25 '12 at 3:53
  • 1
    Looks like Windows XP with font smoothing off. – thomasrutter Oct 25 '12 at 4:11
  • Yes. Windows XP SP3 with font smoothing off. – Manish Oct 25 '12 at 15:06
  • seems like this should be migrated to SuperUser – DA01 Jan 10 '13 at 6:16

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.

  • 1
    Thanks for the great explanation! I enabled font aliasing and it looks much smoother now. – Manish Oct 25 '12 at 15:11

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).

enter image description here


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.

  • View his example images at full size (by opening them in a new tab) and you'll see the bottom two have no anti-aliasing at all. Looks like he simply has font smoothing turned off in his OS (probably using Windows XP). – thomasrutter Oct 25 '12 at 4:11
  • Thanks for the explanation. I didn't have all this idea about font rendering – Manish Oct 25 '12 at 15:11
  • Further to yisela's answer: Liberation Sans doesn't seem to be on FontSquirrel; but "Arimo" from Google Web Fonts is identical to Liberation Sans, and effectively makes Liberation Sans available to users who don't have it installed on their machines. – Gavin R. Putland Jan 10 '13 at 3:41

Your Answer

