How to be strategic when picking a typeface

Date: April 24, 2025

Ratio, efficiency, shape & language support.

Strategic UI font choices start with the right ratios, efficient spacing, and shapes that support clarity across languages. — Image: author

I 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 ratio

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.

Same visual arc across devices. Greater viewing distance requires a larger display. — Image: author

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.

X-height is the height of lowercase letters, typically measured by the letter ‘x’, and affects readability and visual balance. — Image: Wikipedia

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°.

Reading speed begins to decline when the visual arc drops below approximately 0.3°. — Image: JOV

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:

At 14 inches, a minimum x-height ratio of 52% is needed for 12pt text and 69% for 9pt; at 10 inches, the minimum x-height ratio is 37% for 12pt and 49% for 9pt. — Image: author

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.

The x-height ratios of popular typefaces are as follows: Roboto (52.8%), SF Pro (50.8%), HarmonyOS Sans (51.9%), Inter (51.6%), IBM Plex Sans (51.6%), Open Sans (53.5%), Manrope (54%), DIN (50.7%), Work Sans (50%), Switzer (53.1%), Nunito Sans (48.6%), and Lato (50.6%). — Image: author

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.

On the left is HarmonyOS Sans (51.9% x-height ratio), and on the right is Antique Olive Std (62.3%). — Image: author

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.

Top-to-bottom leading ratio

The 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.

Top leading measures the space from the top of the ascender (e.g., h) to the top edge, while bottom leading spans from the bottom of the descender (e.g., p) to the bottom edge. — Image: author

I tested Open Sans and SF Pro at 16px, center-aligned within a 24px-high container, and measured their top-to-bottom leading ratios:

Open Sans has a top-to-bottom leading ratio of 2.7:1, while SF Pro’s ratio is more balanced at 1.54:1. — Image: author

Open Sans: 2.7:1
SF Pro: 1.54:1

These 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 Efficiency

When 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.

Roboto uses the least horizontal space, followed by HarmonyOS Sans, with Work Sans taking up the most. — Image: author

With 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.

Shape

Character Differentiation

Distinct 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.

In SF Pro, uppercase “I” and lowercase “l” look very similar, while Work Sans and IBM Plex Sans distinguish clearly between characters like “0” and “O” or “I”, “l”, and “1” — with IBM Plex Sans offering the strongest differentiation. — Image: author

Open Letter Shapes

For 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.

Switzer features tighter “c” terminals and more rounded, heavier-looking “6” and “9”; Open Sans has more open “c” ends and slightly rounded, lighter numerals; while DIN presents the most angular “6” and “9”, giving it a simpler, lighter appearance. — Image: author

Currency Symbols

The 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.

Number

Numbers 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 numbers

Monospaced 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.

In SF Pro, numbers are not aligned in the column with the same weight, while in Open Sans, they are consistently aligned in the same weight. — Image: author

Consistent width across weights

Some 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.

In Roboto, numbers are not aligned in the column with the different weight, while in Lato, they are consistently aligned in the different weight. — Image: author

Number length

Shorter 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.

Inter requires more horizontal space to display the same numbers compared to Roboto. — Image: author

Multilingual support

Different 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.

Test of Open Sans font for Latin, Cyrillic, and Arabic scripts, showing supported punctuation in green, auxiliary characters in yellow, and missing characters in red. Open Sans supports Latin and Cyrillic well but lacks coverage for Arabic. — Image: author

In 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.

References

How 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.

Need help?

Don't hesitate to reach out to us regarding a project, custom development, or any general inquiries.
We're here to assist you.

Get in touch