Using cap height and distance to calculate font size

A cap height view angle calulator accompanies this article, allowing exploration with specific fonts and parameters.

During the course of writing an explainer of the EN 301 549 standard, I came across a requirement that I felt it needed a more detailed explanation than I could fit in the explainer. EN 301 549 defines how to make information and communication technologies accessible to people with disabilities, and one requirement is that users can increase the size of text. For web content, documents, and software, the requirement is that text size can be increased by at least 200%, where this is expected to be supported by the browser or operating system. EN 301 549 also addresses “closed functionality”, where platform resize services are not available or are turned off. The text resize requirement here is expressed quite differently.

The wording of the requirement in Section 5.1.4 is:

Where any functionality of ICT is closed to the text enlargement features of platform or assistive technology, the ICT shall provide a mode of operation where the text and images of text necessary for all functionality is displayed in such a way that a non-accented capital "H" subtends an angle of at least 0.7 degrees at a viewing distance specified by the supplier.

The subtended angle, in degrees, may be calculated from:
$Ψ = \frac{180 \times H}{π \times D}$
Where:

ψ is the subtended angle in degrees

H is the height of the text

D is the viewing distance

D and H are expressed in the same units

Here is an in-depth explanation of how to work with this.

View angle

The diagram below shows how text size needs to become larger as viewing distance increases, in order to occupy the same proportion of the field of view and have equivalent readability. Two lines diverging from the point of view show a constant field of view, with capital letter H becoming larger at greater distances from the viewpoint. The scale of the diagram is exaggerated, but shows how much larger text needs to be on a desktop monitor as opposed to a watch viewed more closely.

Font cap height

Using the capital letter H relates to a characteristic of a font called “cap height”. Western fonts position the image of each character inside a rectangle that is the same height for all characters in the font. The “baseline” is where the bottom of most characters starts, but “descenders” like in lowercase letter “g” can take space below it. The distance from the baseline to the line at the top of lowercase letters without ascenders, like “x”, defines the “x-height”. The distance from the baseline to the line at the top of uppercase letters without ascenders, like “H”, defines the “cap height”. There is room above this for ascenders and accents, as in the accented capital É. Both x-height and cap height are defined as proportions of the entire vertical size available to the font.

Most fonts designed for readability have a cap height close to 0.7, or 70% of the available vertical space. It's worth noting that this means, when scaling text to a size that the vertical height of the capital letter H occupies 0.7 degrees, the height of the entire font glyph occupies 1 degree of the visual field.

Reworking the formula

The value of 0.7 degrees is the highest size required by the standard, but it is useful to know how to work with this for any viewing angle. To begin reworking the formula, I will label items as following:

hSize is the calculated size of the letter H, in millimetres;
viewAngle is the intended viewing angle in degrees (ψ in the original formula);
viewingDistance is the distance between the device and viewer in millimetres (mm) (D in the original formula);
capHeightRatio is the proportion of the cap height to the entire font glyph size, with a range of 0 to 1 (H in the original formula).
fontSizeMm and fontSizePt are the size of the entire font height that will yields the hSize, first in millimetres and then in points;

The original formula with these clarifications:

viewAngle (degrees) = \frac{180 \times hSize}{pi \times viewingDistance (mm)}

Then I solve for the size of the capital letter H:

hSize (mm) = \frac{viewAngle (degrees) \times pi \times viewingDistance (mm)}{180 (degrees)}

Now I want to know the size of the entire font glyph, by taking into account the cap height:

fontSizeMm (mm) = \frac{hSize (mm)}{capHeightRatio}

These formulas give the font size in the same units as the viewing distance, in this case millimetres, but designers usually use points (pt) to specify font size. Using a conversion derived from the specifications in CSS Values and Units for millimetre, pixel, and point, I convert from mm to pt:

fontSizePt (pt) = fontSizeMm \div \frac{25.4 (mm / in)}{72 (pt / in)}

Combining these formulas, we get:

fontSize (pt) = \frac{\frac{viewAngle (degrees) \times pi \times viewingDistance (mm)}{180 (degrees)}}{capHeightRatio \times \frac{25.4 (mm / in)}{72 (pt / in)}}

Which can be simplified to:

fontSize (pt) = .0495 \times \frac{viewAngle (degrees) \times viewingDistance (mm)}{capHeightRatio}

The conversion from millimetres to points depends on a pixel density of 96 pixels per inch. Many displays render text at that density regardless of their actual resolution. If the display does not, the result needs to be corrected:

fontSizeCorrected (pt) = fontSize (pt) \times \frac{displayResolution (ppi)}{96 (ppi)}

Discussion

The cap height view angle calculator can help with implementation of this formula. You can enter the values for the variables in a form and it will calculate the result. For online fonts that the tool can retrieve, it can also automatically determine the cap height for you and input that into the calculation.

Using that calculator, I calculated font sizes for various view angles. I observed that for a font with a cap height of 0.7 rendered on a desktop monitor at a distance of 700 mm:

A vertical view angle 0.2° corresponds to text rendered at 10 pt;
A view angle of 0.7° corresponds to text rendered at 35 pt.

I think these values set useful semi-round boundaries in terms of the formula. I personally struggle to read text below 10 pt on a desktop display, so I think a view angle of 0.2° or slightly above is a good target for the base font size. The EN 301 549 standard requires that it be possible to scale text to achieve the view angle of 0.7°. The above example yields 35 pt, which is 350% of the 10 pt base size.

Effectively, this means that the requirement in the standard is that it be possible to enlarge text up to 350% of the base size, so I suggest that approach as a rule of thumb. Using the view angle also makes it possible to define a meaningful base font size for different devices. I don't know of any accessibility guidelines that require a specific minimum font size, but I think this approach could work in future guidelines, using the same formula with a minimum view angle requirement of around 0.2°.