How to make blurry text sharp and decrease eye strain

In the beginning was the word...

Before it can be displayed on the screen of your computer, tablet or phone, the text font is converted from vector outlines that mathematically describe the shape of its characters into pixels that show them to you on the screen. There are three main methods of this conversion:

Text rendering methods: aliased, anti-aliased and subpixel.
Left to right: aliased text, grayscale anti-aliasing, and subpixel text rendering

Below is a magnified example of aliased font versus the same word rendered with subpixel anti-aliasing. You can download this tiny tool, Just Color Picker, and use its magnifier to have a good look at the fonts you have on your screen and see how they are rendered.

Colourful fringes around anti-aliased text created by subpixel rendering.
A word displayed in aliased and anti-aliased fonts, and the same word enlarged 12 times.

Some years back, when the last dinosaurs still roamed the Earth and the first web-designers, including yours truly, were creating some of the earliest websites, we had to use web-safe fonts, i.e. 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 aliased.

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 webmasters could use them knowing that the users would definitely have those installed and the page will be displayed as intended. These fonts can be easily rendered in bi-level, with every character drawn on the pixel grid using only 2 colours, the text colour and the background colour. And while the pixels are clearly visible on the curved edges of the characters, the web-safe fonts were designed to be easy to read on any device with any font rendering settings.

Web-safe fonts could also be rendered with anti-aliased and with subpixel methods, for those who prefer “smooth” text. The users had a choice. Anti-aliasing technologies like ClearType have been around for many years and were a part of many operating systems like Windows XP, but were easy for the user to switch off. And because all websites used web-safe fonts, the users who disabled font smoothing could enjoy sharp, nicely rendered text when reading online.

However, web-safe fonts were offering little variety — there were only about 20 of them — because there is only so much flexibility in what can be drawn using 2 colours of bi-level rendering in a square of pixels a character of a certain font size was given. No myriads of elaborately decorated or quirky fonts, just classics. Plain and limited, but good quality. But some web-designers wanted as much freedom on the screen as graphic designers and typographers had on paper, and this lead to the arrival of webfonts (not the same as web-safe fonts, despite the similar name).

The price of pretty looks: smooth fonts can cause eye strain

Thanks to the web font revolution, web-designers got the freedom to use any fonts they like on their websites. No one is constrained by the tiny set of web-safe fonts anymore. Anyone can place any font on a website. It no longer matters if the user doesn't have a particular font already installed. Any fancy font is automatically downloaded to the user's computer when they open a webpage, and is displayed in the only way it can be displayed — via blurry anti-aliasing and subpixel rendering.

The massive libraries of new downloadable fonts brought variety and prettiness to the web, but also the ubiquitous blur, headaches and sore eyes; because by reading smoothed text we are forcing the eyes to constantly focus on something blurry. Those who do photography are familiar with the frenzy of the focussing mechanism shifts when the lens can't find an object to focus on. Something similar is happening with the eye lens and its muscles when it is trying to focus on each of the blurred words it is reading. No half-decent photographer would leave their beloved photo lens in that frantic state for hours, so perhaps we should treat our eyes with at least as much care.

The not-so-pretty looks

With the ability to incorporate any font into any webpage and render it using anti-aliasing, more and more websites are moving away from web-safe fonts. If a user disables font smoothing in their operating system, many modern fonts appear “broken” without the anti-aliasing, sometimes barely readable. They look jagged, fuzzy, pixelated, lopsided, with uneven thickness, because the only fonts that can look good without smoothing are the limited set of the ol' boring web-safe fonts.

Example of jagged and uneven web-page text when font smoothing is switched off.
Jagged, uneven text displayed for “web-unsafe” fonts when smoothing is switched off.

Turning font smoothing off in the operating system makes the text look sharp in software interfaces, documents, menus and other parts of the system, but it doesn't help with websites if the designer choose a font that requires anti-aliasing to render correctly. The only way to get rid of the blur and the jagged text on websites without upgrading hardware is to force the browser to replace the fancy fonts with web-safe fonts.

As the pixel density increases in modern screens, and thus the need for smoothing decreases, this problem is gradually diminishing, and should eventually resolve itself. But for those with sensitive eyes, or those still using monitors with low PPI and doing a lot of reading or writing, it is worth switching back to web-safe fonts, at least for work.

The not-so-scientific experiment

There are many people who like those smooth and blurred texts. It can look great on sites that have little textual content and are mainly dedicated to images or videos. Those who don't do much reading and/or have a screen with very high pixel density can stop here.

But, there are also those who do a lot of reading, writing, or coding. There are those who get visual fatigue, headache and sore eyes from staring at the blurred text. There are those who want to keep their eyesight in good shape for as long as possible. There are those who simply dislike, or even hate, smooth font rendering. Perhaps, it's all down to personal perception. As some readers pointed out to me in their messages that there are no scientific studies proving that smooth fonts can damage eyesight. Maybe. It is possible that there are no studies that prove it either way, but who has a spare pair of eyes to experiment until the science says something on the subject?

Before writing this article in 2010, I have compared what felt good and bad for my eyes. Reading black aliased text rendered in a web-safe font on a white background made my eyes tired, but not sore, after 4 hours. Reading black anti-aliased text (non-web-safe font) of the same size on the same background and on the same screen, same topic, same line lengths and same 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 my speed of reading was about 20% slower. Reading the same non-web-safe font in jagged appearance (with anti-aliasing switched off) made my eyes tired in 2 hours, but my speed of reading was down nearly 70%! These reading sessions were done on different days, to avoid affecting subsequent experiments by fatigue accumulation. Not science, of course, but the best specialist in what feels better for you is you, not a doctor, or a scientist.

The solution: how to switch anti-aliasing off

If you have smooth fonts enabled in your system, you end up with blurry text, everywhere. If you switch it off, the system text becomes sharp, but if you open a website that insists on using fancy fonts, you will end up with jagged text.

The only way to fix both is to switch font smoothing in the operating system and set your browser to use web-safe fonts only. This will give you sharp text everywhere. The downside is that some design-heavy website that totally rely on some overly artistic font may not look right. The saving grace is that such sites are rarely dedicated to textual content, while the websites that offer a lot of reading also normally render acceptably well even when the browser substitutes their fonts with web-safe fonts. For example, this site uses a non-web-safe font, but will work with any web-safe font.

If you want to have both options, sharp and smooth, e.g. one for work and one for leisure, you can use two different browsers, one set to display web-safe fonts only, and the other to display everything normally, and then toggle the system settings for your current activity.

Example: how to make all fonts sharp on Windows + Firefox combination:

If any information on this page is out of date or can be expanded, please do let me know.

Write a Comment

I too believe that dithering and anti-aliasing are the root of the eye strain problem.

Hamish M., 3 November 2010

Nice theory. I cannot bear smooth fonts. About 80-90% of my eye fatigue and pain alleviated once I switched it off everywhere.

Anonymous, 21 August 2011

Too true. It's impossible to focus on blurry text or any other blurry objects for too long. So difficult and painful, feels like the eyeballs are about to deform.

Anonymous, 17 May 2015

This font-blurring technology definitely causes more eye strain, especially on screens with low DPI.

Fiona, 24 January 2016

Excellent article. I think the main issue is that font smoothing is an optical illusion. The disparity between what the eye sees and what the brain wants to think causes eye strain and mental fatigue. By the way, I can augment your personal experiment with my own findings. As an optometrist I hear complaints about screen-induced eye stain on a daily basis, and have several patients who reported significant improvement 1-2 weeks after they disabled font smoothing on their computers.

G.B., 9 February 2017

MacOS Mojave causes me a lot of eye strain and migraines. The text is just too faint and too smudged. Unless you have a retina display, it is really bad.

Paolo D., 11 October 2018

comments
Source:  annystudio.com