Font readability

Draft

Definitions

Font readability is related to measurable performance in a good reading environment. However, since the medium can be very different, e.g. book print, printer print, computer screen, hand helds, etc. this issue becomes a list of subproblems.

Legibility refers to being able to read a text in bad conditions. “Legibility is concerned with the very fine details of typeface design, and in an operational context this usually means the ability to recognise individual letters or words. Readability however concerns the optimum arrangement and layout of whole bodies of text” (Alex Pool)

Fonts usually come in families, so-called Typefaces (roman, bold, italic).

Personality of typefaces also may enter the user interaction design, i.e. it's an aspect of what is sometimes called user experience

Research on readability

The only sure conclusions seem to be that there are differences between fonts. Studies that constrast serif vs. non-serif fonts seem to be controversial.

I don't have time to do a real literature review, but from the little I have seen, there must be interaction effects of several conditions, e.g. line length, line spacing, size of fonts, width of font, familiarity with the font, paragraph size, etc. - 19:19, DKS 15 April 2009.

There are some ground rules one can find, like:

• Don't make long lines nor too long paragraphs
• Use wide fonts such as Palatino or Verdana for small fonts
• Use spaces between lines, e.g. about 1.2 at least. E.g. in Word 2007, 1.15 is the default I believe.

Good fonts

• Some popular fonts don't exist on all systems (e.g. On Ubuntu most Windows fonts are missing)
• Some fancy fonts are very expensive
• Even on the same system (e.g. Vista), fonts don't mean the same thing in two different applications, e.g. Arial is different in Word 2007 and Framemaker 8 (couldn't believe it).

Good fonts for print books

It is generally agreed that serif fonts are better for reading since serifs sort of form an invisible line that the eye can follow. But as we said before, there a lots of other parameters. In addition, some fonts "cheat", e.g. Calibri (Win) has more space between lines. Also, you can manipulate fonts in various ways. Unlike sans serif fonts, some very old fonts like Garamond are still very high on the list of top fonts.

Serif

• Garamond (best "old" font, there exist variants of it)
• Century Schoolbook (and other Century fonts), popular with magazines
• Times and Times New Roman (if saving space is an issue)
• Palatino (the opposite, if using up a lot of space is no issue)

Sans serif

• Expensive fonts like Univers or Frutiger (don't know how they look on screen).

Good fonts for online reading

Sans serif

• Verdana (a so-called humanist font, i.e. they have some variations which make them prettier and probably easier to read)
• Arial (quite simple, eats less space, ok for small paragraphs)

Serif

• Georgia (also looks ok in print, a bit fat maybe)

Sans-serif fonts are better for today's low-resoluation screens. Even my relatively recent 24 inch desktop and 17 inch laptop screens can only do 1900x1200 pixels which is very low compared to good print. - DKS, 15 April 2009 (UTC).

Warning:

• Don't use expensive fonts in documents that you must share. Your friends won't be able to read these...
• Web-safe fonts do not exist, in your CSS you always should have several alternatives. E.g. Calibri exists only in Win Vista. Arial is ugly under Unix.

Good fonts for both online and print reading

Serif

• ClearType fonts (MS) like Cambria or Constantia. The latter is probably the best multi-purpose font (I hate to say this, since it is a Vista/MS only font).
• Palatino Linotype (since it is large, but probably too fragile)

Sans Serif

• ClearType (MS) fonts like Calibri

Personality of Typefaces

Dawn Shaikh (2009) conducted a survey using semantic differentials about 40 onscreen typefaces (10 from serif, sans serif, display, and handwriting classes). The 15 used semantic differentials such as passive -- active, warm -- cool, loud -- quiet can be summarized with three correlated factors. Potency reflects typefaces that are seen as having strength, power, or force. Evaluative reflects typefaces that are viewed as having value, worth, and importance. Activity reflects typefaces that are considered to be full of energy, movement, and action.

In another study (2007) she investigated the the Effect of Website Typeface Appropriateness on the Perception of a Company's Ethos. The study is based on the following theoretical assumptions: “Type has many important functions in the decoding process. Type should set the mood of a document, reveal the document's structure, guide readers in navigation, hint at the document's genre, indicate information about the author's ethos, and reveal areas of importance (Mackiewicz, 2004; Mackiewicz & Moeller, 2004; Schriver, 1997). Taking into account the diverse roles of typography, Bartram (1982) and Zachrisson (1965) specify two roles for type: a functional role (relating to legibility) and an aesthetic/semantic role, which impacts the "apparent 'fitness' or 'suitability' for different functions, and which imbue it with the power to evoke in the perceiver certain emotional and cognitive response" (p. 38)”. Eleven typefaces were evaluated on an appropriatess scale in a first round of study. Three typefaces, i.e. Calibri (high), Courier New (neutral), and Curlz (low) were used to construct actual web pages that users had to evaluate in terms of professionalism, believabilty and trustworthiness of a company. Web pages presented in either a neutral (Courier) or inappropriate typeface (Curlz) resulted in a decreased perception of the company being represented. Calibri came out on top.

Test files

• Directory with some word, framemaker and PDF files made by the author to show some fonts ....

• Web Font Specimen - site web avec un lien vers un fichier zip à télécharger et toutes les instruction pour essayer vos polices (modification des styles CSS dans le document HTML inclus) utilisant la nouvelle propriété @font-face du CSS3.

• How to use CSS @font-face from Nice Web Type

Links

General

• Literature Review, Which Are More Legible: Serif or Sans Serif Typefaces? by Alex Pool (2005), retrieved 19:19, 15 April 2009 (UTC). Good starting point for additional reading.

• The Academic Evidence Base for Typeface Readability and Tyeface Readability by Wharton Assitt, retrieved 19:19, 15 April 2009 (UTC).

• Bibliography on font readability (searchable).

• Using Typography. Online tutorial, by Technical Expressions Inc.

Indexes

• Readability & Legibility. A Page by Luc Devroye, McGill University, retrieved 17:03, 26 January 2011 (CET).

• Typography Tutorials, Articles, and Books at WebisteTips.com, retrieved 17:03, 26 January 2011 (CET)

• Typography, Web Design Reference, Univ. of Minnesota, retrieved 17:03, 26 January 2011 (CET)

Designers' perspectives

• Typography Matters by Erin Kissane at A List Apart, a blog on webdesign with a focus on writing, layout, typography - accessed December 7, 2009 - A good history and overview of type and writing online

• On Web Typography by Jason Santa Maria at A List Apart accessed December 7, 2009 - on considerations when choosing a font for the web

• http://www.kathymarks.com/archives/2006/11/best_fonts_for_the_web_1.html by Kathy Marks, November 16, 2006

Wikipedia

• Font
• Computer Font
• Typeface
• Serif
• Sans serif
• Glyph Bitmap Distribution Format
• (more ...)

List of fonts

• Fonts on the web and a list of web safe fonts
• Web-safe fonts (Wikipedia)
• List of typefaces (Wikipedia)

• 60 Brilliant Typefaces For Corporate Design (Smash Magazine)
• 80 Beautiful Typefaces For Professional Design (also look at other articles in this online mag ...)

• Some common fonts, Apprendix B of the online Technical Layout & Design course.

• Common fonts to all versions of Windows & Mac equivalents

• fonts.com (sells fonts)

• linotype.com. Sells really good fonts and does include useful information about fonts, e.g. an article about Frutiger, one of the best designers ever.

Font editors

• Fontforge (free)
• See also: Font editor (Wikipedia)

Bibliography

• Bartram, D. (1982). The perception of semantic quality in type: Differences between designers and non-designers. Information Design Journal, 3, 38-50.

• Bell R.C., Sullivan J.L.F. (1981). Student preferences in typography. Programmed Learning and Educational Technology18(2), 57-61.

• Bernard Michael, Melissa Mills, Michelle Peterson, & Kelsey Storrer (2001), A Comparison of Popular Online Fonts: Which is Best and When?

• Bix, L. (2002). The Elements of Text and Message Design and Their Impact on Message Legibility: A Literature Review. Journal of Design Communication, No. 4. HTML

• Boyarski, D., Neuwirth, C., Forlizzi, J., Regli, S.H. (1998). A Study of Fonts Designed for Screen Display. Proceedings of ACM CHI 98 Conference on Human Factors in Computing Systems.1, 87-94.

• Dillon, A. (1992). Reading from paper versus screens: a critical review of the empirical literature. Ergonomics, 35(10), 1297-1326.

• De Lange, R. W., Esterhuizen, H. L., Beatty, D. (1993). Performance differences between Times and Helvetica in a reading task.Electronic Publishing, 6(3), 241-248.

• Mackiewicz, J. (2004). What technical writing students should know about typeface personality. Journal of Technical Writing and Communication, 34, 113-131.

• Mackiewicz, J., & Moeller, R. (2004). Why people perceive typefaces to have different personalities. Paper presented at the International Professional Communication Conference, Minneapolis, MN.

• Shaikh, A. Dawn (2009), Know Your Typefaces! Semantic Differential Presentation of 40 Onscreen Typefaces, Usability News, October 2009, Vol. 11 Issue 2, HTML/PDF

• Shaikh, A. Dawn (2007), The Effect of Website Typeface Appropriateness on the Perception of a Company's Ethos, Usability News, June 2007, Volume 9 Issue 2, HTML

• Shaikh, A. D., Fox, D., & Chaparro, B. S. (2007). The effect of typeface on the perception of email. Retrieved February 15, 2007, HTML/PDF

• Schriver, K. A. (1997). Dynamics in document design. New York: John Wiley & Sons, Inc.