Ratio, efficiency, shape & language support.Image: authorI conducted research to introduce and compare several commonly used UI font metrics, highlighting their pros and cons. This analysis may help you define the most suitable font to meet the product’s needs.The key metrics I examined include x-height ratio, top-to-bottom leading ratio, spatial efficiency, shape, number and multi-language support.x-height ratioBefore 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.Image: authorX-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.Image: WikipediaTo 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°.Image: JOVA 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:Image: author14 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.Image: authorWhile 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.Image: authorAlthough 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.Top-to-bottom leading ratioThe leading here refers to the vertical space between the font size and the line height — specifically, from the top of the line height to the ascent, and from the bottom of the line height to the descent. Refer to top leading and bottom leading in the image below.Image: authorI tested Open Sans and SF Pro at 16px, center-aligned within a 24px-high container, and measured their top-to-bottom leading ratios:Image: authorOpen Sans: 2.7:1SF Pro: 1.54:1These ratios impact how text sits within a container — like in tags or badges. Typically, the top leading is larger than the bottom. However, a smaller ratio tends to create more balanced vertical spacing, making the text feel more visually centered and stable.Spatial EfficiencyWhen displaying content in a UI using the same font size and line height, different fonts occupy different amounts of horizontal space. In the image below, the same content is shown using three fonts: Roboto, HarmonyOS Sans, and Work Sans. Roboto takes up the least horizontal space, followed by HarmonyOS Sans, while Work Sans occupies the most.Image: authorWith the same line height and content, a font that uses less horizontal space is more efficient — it enables more information to fit within the same layout. However, spatial efficiency can also be affected by adjustments to letter spacing.ShapeCharacter DifferentiationDistinct letterforms improve legibility by making it easier to differentiate between similar characters, such as “0” (zero) and “O” (uppercase o), or “I” (uppercase i), “l” (lowercase L), and “1” (one). Clear distinctions between letterforms reduce confusion.Image: authorOpen Letter ShapesFor example, when the ends of the letter “c” are more open and separated, the shape appears lighter and more minimal. Open letterforms generally create a cleaner, more approachable visual impression.Image: authorCurrency SymbolsThe design of currency symbols, like the dollar sign ($), can vary. Some fonts include a vertical line through the “S”, while others do not. While stylistic preferences play a role, using standardized and easily recognizable symbols contributes to a more user-friendly and intuitive reading experience.Image: authorNumberNumbers play a crucial role in interfaces — especially in financial, technical, and data-driven products. Typography choices directly impact how clearly and consistently numerical data is displayed.Monospaced numbersMonospaced numbers have a uniform width, allowing them to align vertically in tables, forms, and dashboards. This improves readability and supports clear data comparison. Some typefaces offer monospaced numbers by default, while others provide a dedicated font or style variant specifically for monospaced numerals. In some cases, designers choose a separate typeface for numbers to ensure alignment.Image: authorConsistent width across weightsSome fonts maintain monospaced numeral width across different font weights — light, regular, bold, etc. — ensuring visual alignment even when emphasizing certain values. This is especially helpful in tables or financial summaries where totals are bolded but must remain in line with other figures.Image: authorNumber lengthShorter numeral lengths make more efficient use of space, allowing more digits to be displayed within the same horizontal area. This is especially valuable in data-dense layouts, such as tables, dashboards, or mobile screens, where space is limited and clarity is essential.Image: authorMultilingual supportDifferent fonts support different scripts and character sets, so it’s essential to identify the language systems your product requires before selecting a typeface. Tools like a charset checker can help you verify which characters are supported.For example, I tested the Open Sans font for Latin, Cyrillic, and Arabic scripts. As shown in the image below, green indicates supported punctuation, yellow represents auxiliary characters, and red highlights required characters that are not supported. Based on this analysis, Open Sans provides strong support for Latin and Cyrillic, but lacks coverage for Arabic.Image: authorIn my experience, it’s rare to find a single font that supports all writing systems. This is often due to the size limitations of font files — especially for scripts like Chinese, which require thousands of characters. As a result, products that support multiple languages typically use different fonts tailored to specific scripts, such as separate fonts for Arabic and Chinese.The metrics discussed above focus primarily on objective, rational criteria. However, it’s also important to consider more subjective aspects, such as brand identity and user preferences. I hope this article provides useful insights to help you make more informed decisions when selecting a font.Referenceshttps://www.imarc.com/blog/best-font-size-for-any-devicehttps://en.wikipedia.org/wiki/X-heighthttps://en.wikipedia.org/wiki/X-heighthttps://www.gate39media.com/design-spotlight-fonts-in-financial-services/https://www.myfonts.com/pages/fontscom-learning-fontology-level-1-type-anatomy-x-heightHow to be strategic when picking a typeface was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.