Before discussing x-height ratio, it’s important to first understand the concepts of visual arc.

Visual arc refers to the angular size of an object based on its distance and size. In typography, this concept helps determine how easily text can be read at different sizes and distances — the smaller the visual arc, the harder it is to perceive fine details.

X-height is the height of the lowercase letters in a typeface, measured from the baseline to the top of characters like “x,” excluding ascenders and descenders. Typefaces with a relatively high x-height tend to appear larger at the same point size, which significantly enhances legibility, particularly on screens and digital interfaces. This is why many modern, screen-optimized fonts feature a higher x-height.

To evaluate a font’s minimum readable size, we need to consider both the viewing distance and the size of the font’s characters. Research from imarc suggests that an optimal x-height falls around 0.3° of visual arc. Beyond this point, reading speed tends to decline. The lower threshold for readability is approximately 0.2°.

A useful tool for assessing this is the x-height Readability Calculator, where you can input values such as font size, x-height, screen resolution, and viewing distance to calculate the visual arc and evaluate readability.

The product I worked on is primarily designed for mobile devices, so I used 167 ppi, as it’s the reference scale many mobile browsers use to map CSS pixels to physical pixels. Viewing distance can vary — for example, when sitting and browsing, it’s typically around 12–14 inches, whereas lying down (such as in bed) often brings the device closer, around 25–30 cm (10–12 inches). Therefore, I tested both 14 inches (as a general distance) and 10 inches (for closer viewing). I tested font sizes at 16px(=12pt) and 12px(=9pt), as these represent the common maximum and minimum body text sizes in UI design. Below are the minimum x-height ratios I tested:

• 14 inches/12pt: Minimum x-height ratio = 52%
• 14 inches/9pt: Minimum x-height ratio = 69%
• 10 inches/12pt: Minimum x-height ratio = 37%
• 10 inches/9pt: Minimum x-height ratio = 49%

Below are several common fonts I evaluated by calculating their x-height values using the x-height calculator.

While a higher x-height improves readability on smaller screens, it doesn’t mean that bigger is always better. Once the x-height exceeds a certain threshold, the text can actually become harder to read, and the typeface’s overall character or personality may also be affected.

Although the minimum x-height ratio for legibility on mobile screens at typical viewing distances is above 69%, this benchmark is somewhat unrealistic. Most fonts do not have such a high x-height, and pushing for this ratio can actually reduce readability by making the text feel cramped or unnatural.

Based on this, I’ve established a standard that a minimum x-height ratio above 49% helps maintain legibility at closer viewing distances. Ideally, aiming for above 52% provides a better balance — making larger body text more comfortable to read at typical distances on mobile screens.