The price of smooth looks: Anti-aliased fonts hurt eyes and damage eyesight

Text displayed on a computer, pad or phone display comes from a font that has been rasterized, which means it was converted from vector outlines to pixels. There are three main methods of this conversion:

Aliased rendering is the most basic and the oldest method where the letters are drawn by pixels, usually black and white. This method is also called bi-level rendering, because each pixel is considered to be in one of two possible states: it is either painted or not, belonging either to the text or to its background. Because the method operates with full pixels, it draws round contours with noticeable steps, and if the screen has relatively large pixels, the steps are can be very visible. Aliased rendering can be used on any screen, including monochrome displays. All system fonts and web-safe fonts are designed to look good in aliased rendering.

Then, there is greyscale antialiasing, where, in addition to black and white, shades of grey are used. This method can be used on any screens capable of displaying gradations of colours, for example, CRT monitors. This approach makes the curves look smoother, but, at the same time, the text looks blurry. Usually, larger fonts, like headers, look better, and the smaller text looks quite blurry and difficult to read.

The third method is called sub-pixel anti-aliasing. To smoothen the curves and reduce the steps, it uses red, green and blue components of each pixel instead of painting the whole pixels. This is supposed achieve the look as if there were three times as many pixels. This method works with RGB sub-pixel geometry, which most LCD displays have. Each pixel is vertically divided into red, green and blue sub-pixels, and when only a part of a pixel needs to be painted to create a smooth curve, the corresponding sub-pixel is illuminated — this is why the letters get coloured fringes around them. Microsoft named its sub-pixel rendering technology ClearType.

Text rendering methods: aliased, anti-aliased and sub-pixel rendering
Aliased, greyscale antialiasing and sub-pixel text rendering (magnified).

In the recent past, when designing websites, the designers had to use web-safe fonts — a group of fonts that were designed to look great in any rendering, including aliased. In fact, they look extremely crisp and sharp when displayed with aliasing.

Web-safe fonts are a limited set of very well-crafted fonts specifically developed for on-screen use, so the display quality and readability of these fonts is outstanding. These fonts were a part of most operating systems and web-designers could use them knowing that the users definitely have them already installed and the page will be displayed as intended. These fonts could be easily rendered in bi-level with every character drawn on the pixel grid using only 2 colours — text colour and background colour, and while pixels were clearly visible on the edges and curves of the characters, the web-safe fonts were very clear and easy to read on any device with any font rendering settings. These fonts could be rendered with anti-aliased and with sub-pixel methods, for those who prefer “smooth” text. The users had a choice. Anti-aliasing technologies like ClearType has been around for over a decade and was a part of many operating systems like Windows XP, but it could be switched off by the user. And because all websites used web-safe fonts, the users with anti-aliasing switched off could enjoy sharp, nicely rendered text when reading online.

However, web-safe fonts were offering little variety — there are only about 20 of them — because there is only so much flexibility in what could be drawn using 2 colours of bi-level rendering in a square of pixels a character of a certain font size was given. That wasn’t good enough. Many web designers wanted as much freedom on the screen as graphic designers and typographers have on paper. And there came web fonts, @font-face, ubiquitous blur, headaches and sore eyes.

Now, thanks to the web font revolution and WOFF (web open font format), web-designers got the freedom to use any fonts they like on their websites. No one is constrained by a small set of web-safe fonts anymore. Now anyone can place any font on a website, and it will look cute and smooth. It doesn’t matter if the user doesn’t have a particular font installed. Any fancy font is automatically downloaded on the “victim’s” computer and displayed in the only way it can be displayed — blurry anti-aliased and sub-pixel rendering.

With the ability to incorporate any font into any webpage and render it smoothly using anti-aliasing, more and more websites are moving away from web-safe fonts. They are using fancy smoothed texts without offering a non-blurred alternative for those who prefer to see sharp words and letters. If a user managed to switch anti-aliasing off in their system, the new fancy fonts look barely readable without anti-aliasing: they look jagged, pixelated and uneven, because the only fonts that can look good aliased were the limited set of web-fonts. Switching anti-aliasing off in the system makes the text look sharp in software interfaces, documents, menus and other parts of the system, but it doesn’t help with the web-sites if the designer insisted on a fancy font that has to use anti-aliasing to be rendered. The only way to get rid of the blur is to force the browser to replace the fancy fonts with web-safe fonts (see below).

So...

Yes, antialiased font-rendering and fancy web-fonts look cute at the first glance. Yes, WOFF brought a huge variety of fonts to the websites. Yes, there are many people who like those smoothly-blurred texts. But, they are also those who don’t. There are those who get visual fatigue, headache and sore eyes from reading blurred fonts. There are those who want their eyesight to stay good for as long as possible. There are those who dislike, or even hate smooth font rendering. Perhaps, it’s all down to personal perception, perhaps they are in the minority, but who has extra time to waste on slower-reading fonts, or an extra pair of eyes to damage?

The headers and some other design elements may look nice in fancy variety fonts, but what would you rather look at if you need to do a lot of reading:

Anti-aliasing makes text blurry with colour fringes, WOFF font rendered with anti-aliasing off makes the text looks broken and uneven.
Left to right: a web-safe font with no anti-aliasing, “smooth” anti-aliased font, and a “fancy” font rendered with anti-aliasing off – the text looks “broken”, the letters are lopsided, have verticals with uneven thickness and some pixels sticking out on the curves.
Coloured fringes around anti-aliased text created by subpixel rendering
A word Pixels displayed in a normal font and anti-aliased font, and the same word enlarged 12 times.
Coloured “fringes” around anti-aliased text are obvious; it’s uncomfortable to read and harmful to vision.

Perhaps, antialiased fonts will look good on very high pixel density screens, one day, when such screens are widely used, because they would need to create less blur to render, but at the moment, on usual displays, it makes text look worse instead of better. Though, with very high pixel density, aliased rendering will also show very good results.

Before writing this article, I have experimented with what’s good and what’s bad for my eyes. Reading a black web-safe font on white background made my eyes tired, not sore, after 4 hours. Reading black anti-aliased text in non-web-safe font of the same size, also on white background, on the same screen, same topic, same line lengths and interline spacing made my eyes tired in 8 minutes, made me feeling dizzy in 42 minutes, my eyes became sore in 1 hour and 3 minutes, and the speed of reading was about 20% slower. Reading the same text with anti-aliasing switched off made my eyes tired in 2 hours, but the speed of reading was nearly 70% slower!

There are many websites with lots of useful information for reading, but if a website doesn’t offer an option to read a good old sharp font and is forcing anti-aliasing on its visitors, I try to find the same information elsewhere. Unless, of course, I manage to switch the blur off.

How to switch anti-aliasing off

If you have anti-aliasing switched on, you end up with blurry text. If you have switched it off and trying to open a website that insists on using fancy fonts,

Broken text: fancy web-font looks terrible with anti-aliasing switched off
(aliased rendering of a non-web-safe font — “broken” text)

There are a few ways to revert the countless lot of the blurry anti-aliased fonts to the limited set of the good old crisp web-safe fonts. The method and its success depends on the operating system and the browser. Generally, switching anti-aliasing (smooth edges) off in the operating system gets rig of the blur in the software interfaces, menus, text documents and other parts of the system, however, the text on websites may still appear blurry or “broken” even though the browser menus are all sharp. To get rid of the anti-aliased text on websites, the web fonts should be switched off in the browser, on top of switching anti-aliasing off in the operating system. However, in the Internet Explorer 7 and 8 ClearType setting independent from the system setting.

Windows XP – turning ClearType off:

Right-click on the Desktop and select Properties. This will open the “Display Properties” window.
Select the Appearance tab.
Click on the “Effects...” button, which will open a new window.
Uncheck the “Use the following method to smooth edges of screen fonts” box (checking this box and selecting ClearType from the drop-down list will blur all the fonts in the system on an LCD screen using sub-pixel antialiasing, the Standard option was meant for CRT monitors, it uses greyscale antialiasing and seems to blur only bold and large fonts on LCDs).
Click the OK buttons.

Windows 7 – turning ClearType off:

Click Start button, then Control Panel, then Display and open Adjust ClearType Text (alternatively, type cleartype in the Start menu search box and then click Adjust ClearType text).
Uncheck “Turn On ClearType”.
Click “Next” for the remaining steps until you’re through the wizard.
Click Finish.

Opera – switching web-fonts off:

Type opera:config in the address bars, hit Enter.
Type Webfonts in the search field.
Uncheck “Enable Webfonts” box.
Click Save.

Internet Explorer – switching ClearType off:

Choose Internet Options from Tools menu.
Go to Advanced tab.
Scroll down to Multimedia and “uncheck Always Use ClearType for HTML”.
Click OK.
Restart Internet Explorer.

Mozilla Firefox – disabling fancy web fonts that are nearly always blurry:

Open by typing about:config in the address bar.
Set gfx.downloadable_fonts.enabled to false.

You can also replace all the fonts with the font of your choice by going to Tools – Options – Content.

Google Chrome – disabling fancy web fonts that are nearly always blurry:

Right click Chrome’s launcher icon, choose Properties.
At the end of the launcher string add --disable-remote-fonts

More recipes are welcome!

Related articles:

Matte vs glossy screens, laptops, monitors and other computer accessories

Terms & Conditions of Use | Privacy Policy | Site Map | About AnnyStudio.com | Contacts
© 2003–2017 Anny. The use of any published material from this website is allowed provided you read, accept and follow the conditions.