What causing the text of the same webpage to be shown differently on a screen with different resolution?

Question

I am working on automation scripts which use image detection algorithms. What I have noticed recently, is that the text on same page looks differently (at least when maximized) on different screens (the first screen is 1280x1024 and the second one is 1440x990).

For example, this is a magnified version of a text from the both screens. The top one is taken on 1440x990 and the bottom one is taken on 1280x1024:

I have tried:

1. Change resolution
2. Color depth

But the text still looks different when magnified. This could be a big problem for me since the automation script use image recognition on pixel level.

Any idea what is causing this difference and how to eliminate it? I would prefer the way it looks on 1280x1024

Answer 1

There is the problem with LCD screens. LCD unlike CRT screens use phisical pixels, while reproducing image. The actual quantity of physical pixels in LCD panel is known as "Native resolution". Because pixel have physical size here, when you set resolution, which is different with native, monitor can't just increase or reduce pixels quantity and it convert the image with different algorithms according needed resolution. When you maximize your image with 1280x1024 resolution at 1440x990 monitor, it stretch the image and use different effects (like anti-aliasing) for fitting the image your current resolution. Also if you set the same resolution at both monitors, you won't get the quality you want, because in this case "Native resolution" will be different with actual resolution, and monitor will convert your image for fitting physical pixel size. Also all of above consider that you use raster images, because vector images (like text outside the image, f.e. in web page) have different converting algorithms, giving you the best quality in any resolution.

Answer 2

The different resolutions of the screens are a red herring.

This effect comes from subpixel rendering. It uses the physical color components a pixel is made of (red, green, and blue subpixels) to achieve a higher apparent resolution, especially with text.

You can see this pretty well in your example: The right edge of white text is reddish (the red subpixel is the left-most one and hence activated), the left edge is blueish (because blue is the right-most subpixel).

Windows calls this technique ClearType. Disable in Control Panel » Appearance and Customization » Display to always get the second variant, without the colors. On Mac OS X, it's the Use LCD font smoothing option in System Preferences » General.

Answer 3

Eventually I have discovered that there is an option to disable the subpixel font smoothing feature (I work in Win7).

This could be done by performing the following steps:

1. Click Start
2. Type appearance
3. Choose "Adjust the appearance and performance of Windows"
4. Go to "Visual Effects" tab
5. Unclick the "Smooth edges of screen fonts"

After doing this on the 1440x990 screen, the text became similar to the "plain" text I was seeing on the 1280x1024 screen.