Before user interfaces became graphical, text was the primary input/output defining the human-computer interaction. Even today, much of the information presented on UIs is text-based. The right text treatment can measurably improve productivity and increase user satisfaction. Because of this, text treatment should not be underestimated. With new technologies becoming available (e.g. larger monitors, higher resolutions, etc.) a good base knowledge of text treatment helps to create usable UIs quicker.
User Experience (UX) is a concept pertaining to the overall – or holistic – encounter between users and interactive technical systems. More concretely, it’s the degree of usability and appeal that a website or application provides to its users. Great usability implies that an interactive product allows its users to efficiently accomplish their goals. Well-known guidelines are provided by ISO 9241-110 [1] and Nielsen’s Heuristics [2].
Appeal refers to the emotional tie between users and a system they are interacting with. Do users love it? Hate it? Do they think it’s attractive or modern or engaging? Do they feel pride when they interact with it? Although appeal cannot be defined as concisely as usability, it is of equal importance for the success of a product because appealing systems are more enjoyable and desirable which increases their value.
Figure 1: User Experience
Font size is a crucial parameter determining character legibility. Practitioners in software development often use common font sizes (e.g. Verdana 10 points or Arial 10 pixels) that are recommended throughout countless internet sites. While it makes sense to recommend standard font sizes for developing a product, keep in mind that font size is not the only determinant of the physical character size on a computer screen. It is more appropriate to recommend parameters for character size that are based on physiological measures. In other words, what’s crucial is what the end-user actually sees on the screen, not what has been programmed.
Different guidelines and standards recommend slightly different character sizes. ISO standard 9241-3 [3] states:
"Character heights from 20 to 22 minutes of arc are preferred for the most tasks. The minimum character height shall be 16 minutes of arc."
1 minute of arc is equal to 1/60 (0.0167) degree, therefore the respective line-of-sight angles in Figure 2 are:
Figure 2: Relationship between line-of-sight angle, viewing distance and character height.
Recommendations for the minimum viewing distance d between user and monitor screen range from 400 to 600 mm. ISO 9241-3 states 400 mm for normal office work. Given the fact that the near point of accommodation at the age of 50 is already 500 mm [4], a value of 500 mm for the viewing distance is more appropriate and is often recommended in ergonomic literature [5].
Assuming that a character is viewed orthogonally so that in Figure 2 the viewing distance d is at a right angle to the screen, the results from the trigonometric formula in Figure 2 are the following character heights for d = 500 mm:
Usually the character height relates to upper case letters, so for the above parameters an “E” has to be at least 2.3 mm of height, preferably even larger then 2.9mm.
The challenge is to understand the parameters that determine the physical character height, i.e. the absolute height that one could measure by using a ruler on the screen. In other words, now that we know the target character height, how do we ensure that the characters on the monitor screen really are this height? Apart from the font size, the physical character height is determined by:
While the effects of font and text size settings can be controlled, there is not a definite pixel density, because the end users’ monitor sizes and resolutions settings vary. To give an example, consider two persons A and B who use the same software. They both conform to the recommended 500 mm viewing distance and are using the same system settings - only person A uses a 14-inch notebook (visible width = 10.67 inches) while person B uses a 17-inch monitor (visible width = 14.22 inches). Since the definition of pixel density is:
pixel density [ppi] = pixels / inch
we obtain the following pixel densities for an assumed screen resolution of 1024x768 pixels:
Person A
Person B
Table 1: Calculating pixel density.
Solving the above pixel density equation towards inches, we receive
inches = pixels / pixel density
The physical height of an upper-case character of 10 pixels height would consequently be:
Table 2: Calculating actual character height.
So for Person A the physical character height conforms only to the required minimum character height stated in ISO 9241-3 for a viewing distance of 500 mm, whereas for Person B the size even exceeds the preferred value range.
Developers have hundreds of font types at their disposal. One way to group them is into serif and sans-serif types. Serifs are small lines at the ends of the main strokes. Serif fonts improve readability in continuous text, because the serifs help to structure and discriminate characters [6]. Times New Roman, for example, is a serif font type. Typically, these kinds of fonts are used in newspapers and books.
Figure 3: Examples of Serif and Sans Serif Font Types.
Sans-serif font types like Arial are those that do not feature these little “feet”. They are preferred on screens, as relatively low screen resolutions (typically around 100 pixels per inch, compared to 800 dots per inch) make serif fonts look fuzzier, especially in small sizes.
The new generation of e-books such as the Kindle from Amazon have much higher pixel densities than current PC monitors: around 170 ppi. This makes it possible to use serif font types similar to a real paper book – boosting the overall user experience. So the choice between serif and sans-serif font type depends on the capabilities of the target output technology.
In the past during the mechanical printing process, individual letters were manually assembled into words and sentences. Miniscule letters (a, b, c, etc.) were in cases positioned below those for majuscule letters (A, B, C, etc.). Hence, we call them “lowercase” and “uppercase” letters.
There are three major ways to use letter cases in text (see Figure 4): lowercase, mixed-case and uppercase. We see all three in our daily lives. Ergonomists have consistently recommended using mixed-case letters and shy away from using uppercase letters, especially for continuous text.
Figure 4: Example of different Letter Cases.
The reason is that the ascenders (extensions towards the top like in b, d, f, h, k, l, t) and descenders (extensions towards the bottom like in g, j, p, q, y) create the shape typical for a specific word [7]. It is therefore easier to recognize words while reading. Mixed-case also allows better comprehension of the sentence structure, since uppercase is used as the first letter in names or at the beginning of a sentence.
INTERESTINGLY, RECENT RESEARCH YIELDS OPPOSING FINDINGS. EXPERIMENTS SHOW THAT DUE TO THE SHEER SIZE, UPPERCASE IS MORE LEGIBLE IN TERMS OF READING SPEED THAN THE OTHER LETTER CASES, ESPECIALLY FOR VISUAL IMPAIRED PERSONS [8].
Looking at the difference between the last paragraph and the rest of this article, you can build your own opinion about what letter case style is easier and faster to read. I personally believe that mixed-case is superior at least for users without vision impairments.
When continuous text has to be displayed on informational websites or in online help/documentation, there are two patterns that are commonly used to align the text (see Figure 5): “justified” so that the text body has clean edges to both the right/left and “ragged right” where the text body is left-aligned.
Although justifying continuous text provides a nice form factor, the extra spaces that have to be placed between the individual words create continuous vertical spaces that appear meaningful (like vertical rivers). This can be distracting to the reader [9]. It is therefore recommended to use “ragged-right” text alignment.
Figure 5: Example of justified versus ragged-right text alignment.
Different layout conditions may require different text orientations. Figure 6 shows the standard horizontal text, marquee style text (where each individual letter is horizontal yet the letters are vertically aligned), and text that is rotated by 90° either to the right or left.
Figure 6: Different Text Orientations.
Obviously, the best one can do is use horizontal text. After all, our books are not written in marquee or rotated text either. This may not be true for other cultures, but in the western world, this is what we know and are familiar.
Research confirms that horizontal text orientation is read the fastest [10]. It has also shown that it does not matter if text is rotated to the right or left (e.g. on vertical tabs). Reading speed is a function of where the items are placed on the screen (for aesthetical reasons the font should be directed inward). Of all text orientation styles, marquee yields the poorest user performance and is the hardest to read.
[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.
[2] Nielsen, J. ().Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.
[3] ISO 9241-3 (1992). Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements.
[4] Grandjean, E. (1986). Ergonomics in Computerized Offices. New York: Taylor & Francis.
[5] Kroemer, K, Kroemer, A. (2001). Office Ergonomics. New York: Taylor & Francis.
[6] Wheeler, S. G. (1996). TypeSense: Making Sense of Type on the Computer. Boston: International Thompson Computer Press.
[7] Dul, J., Weerdmeester, B.A. (1993). Ergonomics for Beginners. Oxford: Taylor & Francis.
[8] Arditi, A., Cho, J. (2007). Letter case and text legibility in normal and low vision. Vision Research, 47(19), pp. 2499-2505.
[9] Watzmann, S., Re, M. (2008). Visual Design Principles for Usable Interfaces. In: A. Sears, J.A. Jacko (Eds.), The Human-Computer Interaction Handbook. Lawrence Erlbaum Associates, New York, pp. 329-353.
[10] Byrne, M. D. (2002). Reading vertical text: Rotated vs. marquee. Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting. Santa Monica, CA: Human Factors and Ergonomics Society.