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:

• Aliased rendering, the oldest the most basic method of text rendering where the text characters are drawn strictly by pixels, usually black and white. This method is also called bi-level rendering, because each pixel is in one of two states: either painted or not, belonging either to the text or to its background. Because this method operates with full pixels, it draws rounded shapes via steps, and if the screen has relatively large pixels, these steps can be quite noticeable. Aliased rendering can be used on any screen, including ancient monochrome displays. All old system fonts and traditional web-safe fonts were designed to look good in aliased rendering.
• Grayscale antialiasing, uses shades of grey in addition to black and white (or whatever colours are used for the text and the background). This method can work on any screen capable of displaying gradations of colours, for example, CRT monitors. This method makes the curves look smoother, but it also makes the text look blurry. Larger fonts, like headers, usually look better, while the smaller text looks quite blurry and may be difficult to read.
• Subpixel anti-aliasing, uses red, green and blue components of each pixel to smoothen the curves and reduce pixel steps. This is supposed to achieve the outcome as if there were three times as many pixels. This method works with RGB subpixel geometry present in most LCD displays. As each pixel is vertically divided into red, green and blue subpixels, when only a part of a pixel needs to be painted to create a smoother curve, the corresponding subpixel(s) is illuminated. This is why the letters get coloured fringes around them. ClearType is Microsoft's name for their subpixel rendering technology.

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.

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.

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:

• To disable smooth fonts in Windows, open Performance Options – Visual Effects tab, and uncheck “Smooth edges of screen fonts”.
• To make Firefox use a web-safe font only, open Options – Language and Appearance – Fonts and Colors – Advanced. Then choose the writing system your language uses (for the English-speaking folk that would be Latin) and select the old trusty web-safe fonts that you prefer for each font type. Then select Other Writing Systems (this will take care of Unicode) and do the same there. Uncheck the “Allow pages to choose their own fonts, instead of your selections above”. Press Ok. And you are done

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

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <!-- ~/.config/fontconfig/fonts.conf -->
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintfull</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>false</bool>
  </edit>
 </match>
 <alias>
  <family>sans-serif</family>
  <prefer>
   <family>Arial</family>
   <family>Verdana</family>
   <family>Tahoma</family>
   <family>Trebuchet MS</family>
  </prefer>
  <default><family>Bitstream Vera Sans</family></default>
 </alias>
 <alias>
  <family>serif</family>
  <prefer>
   <family>Times New Roman</family>
   <family>Georgia</family>
  </prefer>
  <default><family>Bitstream Vera Serif</family></default>
 </alias>
 <alias>
  <family>monospace</family>
  <prefer>
   <family>Courier New</family>
  </prefer>
  <default><family>Bitstream Vera Sans Mono</family></default>
 </alias>
</fontconfig>