Tim Cliffe - Blog

Instructional Design and On-screen Legibility - The Font of all Knowledge

01 Target Audience

(01.1) Anyone interested in the principles of Instructional Design and the legibility of on-screen text.

02 Executive Summary

(02.1) How best to display on-screen text has long been a topic of contention, and equally so within the field of Instructional Design. However, there are a number of factors that influence how best to display text on-screen, such as:

• Screen resolution;
• Screen pixel density;
• Typography;
• Font;
• Sight impairment of the reader.

 

(02.2) The focus of this article will be the use of fonts, in particular, the use of serif fonts versus sans-serif fonts.

03 Structure of This Article

• (04) A Brief History
• (05) Typography
• (06) Serif Fonts Versus Sans-Serif Fonts
• (07) Conclusion
• (08) References

04 A Brief History

(04.1) User guidelines, for on-screen typography, remained relatively unchanged for decades. The guidelines had been "use sans-serif fonts". This was stipulated due to the fact old computer screens had Cathode Ray Tubes or insufficient resolution and pixel density to display serif fonts clearly.

 

'Sans' is a French word meaning 'without'. 'Sans-serif font' literally means 'without-serif font'.

This is a sans-serif font (your device's default).
This is a serif font (your device's default).

 

(04.2) In the late 1990s, computer screens typically:

• Had resolutions of 640 x 480;
• Supported only 256 colours;
• Had a very poor 72 Pixels Per Inch (PPI).

(04.3) Computer screens were typically 14-inch Cathode Ray Tubes (CRTs). The problem with CRTs was they could not use sub-pixel antialiasing (used by modern ClearType fonts on modern screens) to clearly display serifs.

 

(04.4) As if all this is not problem enough, earlier web browsers also had an issue with fonts.

 

There were only a small number of fonts, a website developer could specify, that would reliably display on any browser. I can remember specifying specific fonts (for websites), to ensure text would be rendered on Linux, MacOS, and Windows operating systems.

 

(04.5) It is no surprise the sensible thing to do, when displaying on-screen text, was to use sans-serif fonts.

 

(04.6) Today, modern screens are LCD (Liquid Crystal Display) or AMOLED (Active-Matrix Organic Light-Emitting Diode):

• With resolutions of 1920 x 1200, or better;
• Supporting millions of colours;
• With a much improved 218 PPI.

Thankfully, modern browsers support a vast array of fonts, be they serif or sans-serif, especially as the web is now used to distribute information on a scale few would have predicted, in the early years of screen displays.

05 Typography

(05.1) Any article about fonts cannot completely ignore Typography.

 

(05.2) Typography deals with how text looks. There are many elements of Typography that affect the appearance of any text, be it printed or on-screen. Such elements include:

• Serif or sans-serif font;
• Point Size (size of the character and the space around it);
• x-height (the size of the lower-case letter 'x', which is a good indicator of type size);
• Counters (the space inside a character, such as 'b', 'd', 'g', 'a'), another good indicator of type size;
• Ascenders and Descenders (such as, the upward lines in the characters 'b', 'd', 'h', and the downward lines in 'p', 'y', 'q');
• Line Height;
• Punctuation;
• Headings, Paragraphs, Lists, etc.;
• The colours used for the text and the background.

(05.3) This article will focus on the use of serif and sans-serif fonts, however, you can access more information about Typography is how text looks.
Tim Brown [Accessed 2020-01-14]
(External link, opens in a new tab/window). Typography.

06 Serif Fonts Versus Sans-Serif Fonts

(06.1) When considering the pros and cons of serif versus sans-serif fonts, it is important to remember the functional cognitive order of reading text, which is:

1. Identify the space in the text (space separates words);
2. Identify the first letter after a space and the last letter before the next space (first and last letters of a word);
3. Recognise/interpret the word.

Here is the proof...

 

It doesn’t mttaer in waht oredr the ltteers in a wrod aepapr, the olny iprmoatnt tihng is the frist and lsat ltteer are in the rghit pcale. The rset can be a toatl mses and you can sitll raed it wouthit a pobelrm. S1M1L4RLY, Y0UR M1ND 15 R34D1NG 7H15 4U70M471C4LLY W17H0U7 3V3N 7H1NK1NG 4B0U7 17.

 

The same text in a serif font...

 

It doesn’t mttaer in waht oredr the ltteers in a wrod aepapr, the olny iprmoatnt tihng is the frist and lsat ltteer are in the rghit pcale. The rset can be a toatl mses and you can sitll raed it wouthit a pobelrm. S1M1L4RLY, Y0UR M1ND 15 R34D1NG 7H15 4U70M471C4LLY W17H0U7 3V3N 7H1NK1NG 4B0U7 17.

 

(06.2) Further, research evidence supports the position, with current on-screen display technology, the choice between serif and sans-serif fonts is not significant to legibility:

1. In the majority of legibility studies, reader preference, or perceived legibility, tends to be inconsistent with user performance ⁴. In other words, perceived legibility was due, to a great extent, to familiarity with the typeface (font) ⁷;
2. Reader fatigue, attributed to reading sans-serif fonts, is not supported by research evidence, as “...no satisfactory objective method of measurement [reader fatigue] has been devised." ⁶;
3. Much of the accepted thinking, regarding the use of serif and sans-serif fonts, is based on research conducted when computer screens were not able to clearly display serif fonts (see '04 A Brief History' above). However, this is no longer the case. More recent evidence ², shows no difference in legibility between serif and sans-serif fonts, on the web.

(06.3) Remember, modern screens are now able to clearly reproduce serif fonts, to at least the same standard as the printed page.

 

 

(06.4) It is interesting to note, studies with child readers have found no difference in their ability to read serif or sans-serif fonts ^{3, 9, 8}. This is in stark contrast to accepted thinking that, the simplicity of sans-serif fonts makes it easier for children to learn to read ³.

07 Conclusion

(07.1) The long-standing contention between the use of serif and sans-serif fonts, relating to text displayed on-screen, is founded in the historical capabilities of display-screen technology, and not the inherent clarity of serif versus sans-serif fonts. It was true that old display-screens did not display serif fonts well, however, this is no longer the case.

 

(07.2) When the available evidence is examined, critically, it is clear there is little evidence of any significant difference in the ability of readers to read on-screen text in serif versus sans-serif fonts.

 

(07.3) This is probably not that surprising when considering the cognitive process involved in decoding the written word (see 06.1 above).

 

What is clear, is the importance of a well-considered typography. The avoidance of cognitive overload, for the reader, is also important, for example, through the avoidance of numerous (different) fonts in the same body of text (known as the Ransom Note Effect). Also important is the avoidance of overly decorative fonts.

 

 

(07.4) It is possible serif fonts or sans-serif fonts affect legibility, however, the effect is not even worth measuring ⁴.

 

There are far more significant factors (x-height, counter size, and letter spacing) for legibility than the presence or absence of serifs ^{5, 6}.

 

(07.5) Most reasonably designed fonts will be equally legible. It makes much more sense to argue in favour of serif or sans-serif fonts on the grounds of aesthetics, than on the grounds of legibility ^{2, 7}.

 

(7.6) Even in the case of people with some vision defects, there is no statistically significant evidence to favour either serif or sans-serif fonts ¹.

08 References

1. Arditi, A., and Cho, J. (2005). Arditi, A. and Cho, J. (2005)
   (External link, opens in a new tab/window). Serifs and font legibility. US National Library of Medicine. Accessed 2020-01-15.
2. Bernard, M., Mills, M., Peterson, M., Storrer, K. (2001). A Comparison of Popular Online Fonts: Which is Best and When? Usability News 3.2.
3. Coghill, V. (1980). Can children read familiar words in unfamiliar type? Information Design Journal 1(4), 254-260.
4. Lund, O. (1999). Knowledge Construction in Typography: The case of legibility research and the legibility of sans serif typefaces. Thesis submitted for the degree of Doctor of Philosophy. Reading: The University of Reading, Department of Typography and Graphic Communication.
5. Poulton, E.C. (1972). Size, style, and vertical spacing in the legibility of small typefaces. Journal of Applied Psychology, 56(2), 156-161.
6. Reynolds, L. (1979). Legibility studies: Their relevance to present-day documentation methods. Journal of Documentation, 35(4), 307-340.
7. Tinker, M.A. (1963). Legibility of Print, 3rd edition. Iowa: Iowa State University Press.
8. Walker, S. (2001). Typography for children: serif or sans? Department of Typography and Graphic Communication, The University of Reading.
9. Zachrisson, B. (1965). Studies in the Legibility of Printed Text. Stockholm: Almqvist and Wiksell.

Use of this Article

Any part, or all, of this article may be linked-to or copied for non-commercial purposes. Any linked or copied content to include the following...

 

Instructional Design and On-screen Legibility - The Font of all Knowledge by Tim Cliffe © 1997-2024.

 

Where use will be for commercial purposes, seek authorisation, including details of proposed use, via the Contact page.

 

Return to the Blog page.