Fonts

Introduction

I spend the last couple of months researching and studying fonts technology. In this article I will present the things I learned about fonts, what fonts are best for our eyes and why.

Different font renderings packed with Iris. Click to enlarge.

Shortly

While reading on the computer try to avoid serif fonts. Times New Roman is common serif font. Curvy design with tiny tails on the ends of letters may slow word recognition and force you to stare harder and longer, contributing to eye fatigue. Sans-serif fonts like Arial and Verdana, which have more spacebetween letters, can make words appear crisper and easier to read from farther away, taxing your vision less.

Windows font rendering called ClearType is better for your eyes than OSX font rendering. However on OSX fonts are more smooth and beautiful. Also they match how the font looks on paper. Other difference is that ClearTyperendering of Asian characters sucks. This is why I integrated in Iris OSX fontsfor Windows.

I didn’t find medical researches on what leads the lowest amonth of eye fatigue. Try different things and see what works best on you. At the moment Iris can help you with easy tweeking of font rendering, but I don’t have enought sciencedata to make something crazy to be the default font rendering.

The difference between ‘Serif’ and ‘Sans-serif’ fonts

Serif fonts have little feet and embellishments on the tip and base of each letter, making them more distinct and recognizable. Popular serif fonts are Times New Roman, Palatino, Georgia, Courier, Bookman and Garamond.

Nearly all books, newspapers, and magazines use a serif font. It’s popularlyaccepted that – in print – serif fonts are easier to read. The idea being that the serifs actually make the letters flow together – and subsequently easier on the eyes.

As the name states, ‘sans-serif’ fonts are fonts without serifs. While some sources say sans-serif fonts have existed since the 5th century BC, it wasn’t until the 1920s that they became somewhat popular – mostly being used inadvertisements.

One of the reasons for their lack of popularity was that typographers stuck with serif fonts because they felt they were easier to read.

It’s been said that serif fonts are for “readability”, while sans-serif fonts are for”legibility.” Which is why, in print, sans-serif fonts are often used as the headlinefont and serif fonts are used for the body text.

Some popular Sans-serif fonts are Helvetica, Arial, Calibri, Century Gothic and Verdana.

Best fonts for print

In his book Cashvertising, Drew Eric Whitman cites a 1986 study of fonts(printed on paper) that found only 12 percent of participants effectively comprehended a paragraph set in sans-serif type versus 67 percent who were given a version set in serif typeface.

Those who read the sans-serif version said they had a tough time reading the text and “continually had to backtrack to regain comprehension.”

In a test of three different fonts, two serifs (Garamond and Times New Roman) and one sans-serif (Helvetica), he found 66 percent were able to comprehendGaramond, 31.5 percent Times New Roman, and 12.5 percent Helvetica (out of a total of 1,010,000 people surveyed).

The conclusion being that serif fonts are easier to read when it comes to fonts on paper. So, if you’re sending out a sales letter or brochure in the mail, you probably want to use serif font (but, as mentioned in the first point, you could use sans-serif font for your headlines).

Here are the print font preferences of three of the copywriting greats:

Advertising great John Caples liked using Cheltenham Bold for headlines.
Advertising legend David Ogilvy preferred the Century family, Caslon, Baskerville, and Jenson.
Direct marketing guru Gary Halbert used Courier in his sales letters.

Best fonts on–screen

Now, one might assume that what works on the printed page will be similar to what works on the computer screen. But that’s not the case.

In order to make the little serifs appear legible, a high degree of resolution isrequired. The more pixels, the more details of the font you can display.

Back 10 or so years ago, the best computer screen resolution was 800 x 600pixels – which wasn’t great for defining the intricacies of a serif font. Screen resolution has increased through the years (resolutions of 1024 x 768 pixels or greater have become the norm). This makes serif fonts more legible but still generally not as easy to read as sans-serif fonts.

Plus, now you have to consider how your site or email will look on handheld devices, such as the Android and iPhone.

So on-screen, the best font to go with is sans-serif.

A 2002 study by the Software Usability and Research Laboratory concludedthat:

” The most legible fonts were Arial, Courier, and Verdana. At 10-point size, participants preferred Verdana. Times New Roman was the least preferred. At12-point size, Arial was preferred and Times New Roman was the least preferred. The preferred font overall was Verdana, and Times New Roman was the least preferred. So here are your marching orders:

For easiest online reading, use Arial 12-point size and larger.
If you’re going smaller than 12 points, Verdana at 10 points is your bestchoice.
If you’re after a formal look, use the font Georgia.
And for older readers, use at least a 14-point font.

Dr. Ralph F. Wilson, an e-commerce consultant, did a series of tests in 2001. He also came to the conclusion that the sans-serif fonts are more suited to thecomputer screen.

Some of the highlights of the test results were that at 12 points, respondents showed a preference for Arial over Verdana – 53% to 43% (with 4% not being able to distinguish between the two).

Two-thirds of respondents found that Verdana at 12 points was too large for body text, but Verdana at 10 points was voted more readable than Arial at 10 points by a 2 to 1 margin.

In conclusion, for the best font readability, use Arial 12 point or Verdana at 10 points and 9 points for body text. For headlines, he suggests using larger bold Verdana.

Simple font rendering

Well Simple fonts are simple. You can thing of them as pixel fonts. They aresharp and crispy with no blurring. Based on my current research this fonts should be best for our eyes, but it’s not so simple. Simple fonts are difficult to read, but really clear. The clear thing is good, but the difficulty to read them may make them a little eye straining.

Aliased rendering is the most basic and the oldest method where the letters aredrawn by pixels, usually black and white. This method is also called bi-levelrendering, 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, includingmonochrome displays. All system fonts and web-safe fonts are designed to look good in aliased rendering.

Anti-aliasing

Anti-alising is technique for font smoothing. It makes fonts more easily readable, but a little blurish. This technique is used a lot in computer graphics and well in many places. I think it’s not best for our eyes, because it tricks our brain that the image is more high resolution.

Anti-alising or greyscale antialiasing is 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 quiteblurry and difficult to read.

Sub-pixel rendering

The third method for font rendering is called sub-pixel anti-aliasing. Tosmoothen the curves and reduce the steps, it uses red, green and bluecomponents of each pixel instead of painting the whole pixels. This is supposedachieve 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-pixelis illuminated — this is why the letters get coloured fringes around them.Microsoft named its sub-pixel rendering technology ClearType.

Today this is the used method for font rendering of all modern OS. You can seecomparision of the 3 different methods in the picture above.

Apple versus Microsoft font rendering

Apple and Microsoft have always disagreed in how to display fonts on computer displays. Today, both companies are using sub-pixel rendering to coax sharper-looking fonts out of typical low resolution screens. Where they differ is inphilosophy.

Apple generally believes that the goal of the algorithm should be to preserve thedesign of the typeface as much as possible, even at the cost of a little bit ofblurriness.

Microsoft generally believes that the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the costof not being true to the typeface.

Note: To see the following illustration correctly, you need to have an LCD monitor with pixels arranged in R,G,B order, like mine. Otherwise it’s going to look different and wrong.

The difference originates from Apple’s legacy in desktop publishing and graphic design. The nice thing about the Apple algorithm is that you can lay out a page of text for print, and on screen, you get a nice approximation of the finished product. This is especially significant when you consider how dark a block oftext looks.

Microsoft’s mechanism of hammering fonts into pixels means that they don’t really mind using thinner lines to eliminate blurry edges, even though this makes the entire paragraph lighter than it would be in print.

The advantage of Microsoft’s method is that it works better for on-screen reading. Microsoft pragmatically decided that the design of the typeface is not so holy, and that sharp on-screen text that’s comfortable to read is moreimportant than the typeface designer’s idea of how light or dark an entire block of text should feel. Indeed Microsoft actually designed font faces for on-screenreading, like Georgia and Verdana, around the pixel boundaries. These arebeautiful on screen but don’t have much character in print.

Typically, Apple chose the stylish route, putting art above practicality, because Steve Jobs has taste, while Microsoft chose the comfortable route, the measurably pragmatic way of doing things that completely lacks in panache. To put it another way, if Apple was Target, Microsoft would be Wal-Mart.

Web-safe fonts

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 developedfor 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 alreadyinstalled and the page will be displayed as intended. These fonts could be easilyrendered 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 veryclear 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 muchfreedom 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 fromweb-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 lookbarely 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 itdoesn’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 toforce the browser to replace the fancy fonts with web-safe fonts.

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 fromreading 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 theminority, but who has extra time to waste on slower-reading fonts, or an extrapair 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:

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

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 pixelssticking out on the curves.

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 the vision.

Eye soreness experiments

Here is really good experiment from AnnyStudio:

“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 in42 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 nearly70% slower!

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