Using cap height and distance to calculate font size

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

I think many people might struggle to understand how to apply this. Even accepting the math involved, the formula has a couple challenges in practice:

It describes a condition that must be met, but in this form does not tell developers what font size they need to use;
The equation can be restructured to provide a font size, but it will be in the units viewing distance was measured, which are not normally used for fonts;
Applying the equation to a specific font requires knowledge of its metrics.

Background

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.

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

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.

Discussion

To understand the formula better, we can apply it to text displayed on a 96 ppi monitor at a viewing distance of 700 mm, using a “standard font” with a cap height ratio of 0.7. With these values:

Text rendered at 10 pt has a H size occupying a vertical view angle 0.2°.
Text enlarged to a H size view angle of 0.7° should be set to 35 pt.

From this observation, we recommend that the minimum font size for any display, whether closed functionality or not, be set to a H size with a view angle of 0.2°. The proportion between the 0.7° required by the standard and this angle is 350%, meaning for content following this recommendation, it must be able to be resized up to 350% of its base size. Following this approach for all digital content, including open functionality, will exceed the WCAG requirement and increase the number of users who benefit from it.