Font readability: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 70: Line 70:


* [http://webfontspecimen.com/ 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]].
* [http://webfontspecimen.com/ 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]].
* [http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ How to use CSS @font-face] from [http://nicewebtype.com/ Nice Web Type]


== Links ==
== Links ==

Revision as of 12:10, 7 December 2009

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).

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

Test files

  • 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.

Links

General
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


Wikipedia
Fonts

Bibliography

  • Bell R.C., Sullivan J.L.F. (1981). Student preferences in typography. Programmed Learning and Educational Technology18(2), 57-61.
  • 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.