Understanding minimum font sizes and how to implement them correctly is critical when designing apps for elderly people!

Printed Font Size

Designing apps for elderly people can be aided by understanding some old-school printing concepts.  Letter and number fonts have three size elements:  x-heights, ascenders and descenders. Specifying a font size includes all three of these.

x-height

x-height = height of the lowercase x character
Ascenders = lines that extend above the x character
Descenders = lines that extend below the x character
Point Size = includes all three of these elements

Minimum font sizes are almost always specified in “points”.  In the print world 1 point = 1/72 inch.  When you print a page from your computer using postscript, your printer will scale the fonts in your document using the 1 point = 1/72 inch rule.  If in doubt, convert your document to Adobe PDF, then print the PDF to ensure the 1 point = 1/72 inch rule.

Screen Font Size

Simple, right? Not so when we start looking at how the same font size (in points) is displayed on different screen sizes (inches diagonally) and/or different screen resolutions (number of pixels).  Consider the simple example below which compares the same font size (points) as displayed on 15 inch and 27 inch display screens (same screen resolution on both displays).

 

So which of the screens above has the correct font size as measured using the 1 point = 1/72 inch rule?  Neither do.  If you were to place a printed sheet of paper with the correctly measured font size in front of the screens above, you would see the text on the large screen is too large, and the text on the smaller screen is too small.

The lesson here is that you cannot trust that a font specified in points will appear as the same size in inches on different devices.  The physical size of a point on different display devices will differ with pixel density.  When designing apps for elderly people, it is much better to specify fonts in terms of their absolute height in inches or centimeters.

One other factor that needs to be considered is the viewing distance between the viewer’s eye and the screen.  For a desktop personal computer this distance is likely to be an arm’s length.  For a laptop it will be slightly less.  For a tablet it will be still less.  For a smartphone it will be even less.  You also need to consider if the device will be sitting in a stand, lying on a surface, or held in a hand.

An article by Steven Hoober in UX Matters provides a good analysis of the effects of viewing angle and distance on perceived font size on common devices.  Summarizing his conclusions:

• If your target font size is 14 points for a desktop application, then using 11.2 points on a tablet, 8.5 points on a large phone, and 5.5 points on a small phone can provide similar levels of reading comfort.
• If your target font size is 18 points for a desktop application, then using 14.4 points on a tablet, 10.8 points on a large phone, and 7.2 points on a small phone can provide similar levels of reading comfort.

Note that while his article takes into account screen size variations, it is not clear what was done to control the effects of screen resolution across the various devices.

Recommended Strategy

There are conflicting recommendations for minimum font size when designing apps for elderly people.  For websites, most sources agree on minimum font sizes of 12 to 16 points for body text and 18 to 24 points for headings.  However, none of these sources specify the reference pixel density, or viewing distance and device position.  So one assumes that these are as sized on a printed page (which is close to a SVGA display which was common when most of these recommendations were developed).

This, however, conflicts with what is widely considered standard for “large print” in books.  According to the American National Association for Visually Handicapped, “large print” is defined as a minimum of 16 points for people who have some useful sight, but who struggle to read regular print.  They recommend using even a larger font size for body text where possible.  These of course assume a viewing distance equivalent to that of reading a book.

Reading from a printed page is clearly not the same as reading from a lighted digital or analog screen.

Based on all these considerations we recommend the following when designing apps for elderly people:

• Minimum body text size of 14 points (14/72= 0.19 inches)
• Minimum of 18 points (18/72= 0.25 inches) for heading text.

To eliminate the variations caused by pixel density, the specified minimums are as measured on a printed page where 1 point = 1/72 inch.  They also assume a viewing distance equivalent to that of reading a book (which is roughly the same as using a tablet).  Remember that these are minimums, and bigger is almost always better when designing apps for elderly people.  Also remember that on devices like smartphones and watches, which are likely to be held closer to the eye than a book or tablet, you may be able to go 2 points (2/72= 0.03 inches) smaller if needed.

But how do you go about achieving the recommended size minimums across all of your target display devices?  Most experts recommend using abstracted pixel density independent units of measure, for example, “device independent pixels” in Android.  This may be a good way to approach coding, but it does not have guaranteed results, especially when writing common code across operating systems.  We recommend this simplified approach:

1. Print out samples of your intended font sizes and styles on a piece of paper.
2. Visually compare the text on the printout and the screen, side by side.
3. Compare them on all your target display devices.
4. Compare them from various expected eye-to-screen viewing distances.
5. The comparisons should be close in terms of perceived size and readability. If they are not, then go back and rework the design and code for the particular device.  This may seem like a lot of work, but getting minimum font sizes right is probably the single most important thing you can do when designing apps for elderly people.

Where possible let people easily adjust text size themselves. Our website www.eldertech.org provides an example of how a Word Press add-on can be used to easily do this in websites.  This add-on also provides elderly users with a one-click way enhancing contrast.  Similar strategies can be employed in apps and other types of user interfaces.

Related Articles: User Interface Best Practices Guidelines for Seniors | Understanding Recommended Target Sizes | Understanding Recommended Color Contrast | Using Color When Designing Technology for Seniors