Choose the right font size for your online text

With the advent of new digital devices, we are faced with a multitude of screen resolutions and pixel densities. In this article, we will explore the different solutions that will help you choose the ideal font size based on pixel density (DPI).

Factors affecting font readability

Unlike paper, fonts displayed on a screen can appear differently from one device to another, or even from one screen to another. Several factors influence how fonts are displayed:

1. Pixel Density (PPI/DPI)

Pixel density (Pixels Per Inch) defines the sharpness of the rendering.

• The aliasing challenge: On a low-density screen, the curves of letters can appear “jagged” (staircase effect). High-density screens (Retina, Quad HD) allow for thinner or lighter fonts without them disappearing or becoming blurry.
• The relative unit: Because of this variation, logical pixels (or dp on Android, pt on iOS) are used rather than physical pixels to ensure that text maintains the same visual size everywhere.

2. Screen Resolution

More than just a simple multiplication, resolution influences the available workspace.

• Size ratio: On a low resolution, a 16px font will take up a huge amount of screen space, limiting the number of words per line. On a 4K screen, this same font can become unreadable because it is tiny if not scaled properly.
• Rendering context: Resolution often determines whether the user will see your text in a single or multi-column layout.

3. Reading Distance

This is the factor that dictates the minimum usable size.

• Viewing angle: The further the eye is, the larger the letter must be to occupy the same visual angle.
• Mobile vs. Desktop hierarchy: On mobile (30 cm), slightly smaller fonts (e.g., 14px) are acceptable because the screen is close. On a television (“10-foot UI” usage), the text must be massive to remain legible.

4. Font Composition (Anatomy)

The anatomy of a letter directly impacts the speed of recognition by the brain.

• The importance of X-height: At the same size, a font with a large X-height (like Helvetica or Verdana) will appear larger and be more readable on screen than a font with a small X-height (like Garamond).
• Apertures: The white spaces inside letters (like the hole in an ‘e’ or a ‘c’) are vital. If they are too small, the letter turns into a dark “blob” on low-quality screens.

5. Font Size and Line Spacing

Size isn’t everything; it’s its relationship with the surrounding space that creates comfort.

• Line spacing (Line-height): For the web, a line spacing of 1.5 times the font size is often recommended. Text that is too tight tires the eye because it’s difficult to find the start of the next line.
• Contrast: On screen, size must be compensated for by contrast. A thin font (Light) requires a larger size or higher color contrast (black on white) to remain accessible.

Comparative table between different resolutions, pixel densities, and recommended font sizes based on “normal” reading distance.

Recommendations for choosing the right font size

Here are some recommendations for choosing the ideal font size based on the factors mentioned above:

1. Prioritize a generous X-height

X-height (the size of lowercase letters like “x”, “a”, “e”) is the #1 factor for readability on screen. The larger it is, the more open and easy to decipher the letter appears, even at a small size.

Why? On a screen, fine details of ascenders (the top of a “b”) and descenders (the bottom of a “g”) can get lost. A large X-height stabilizes the eye on the line.

Examples of fonts with large X-height:

• Verdana: Specifically designed for the screen, it has a massive X-height.
• Roboto (Google): Very balanced, it remains readable on various mobile resolutions.
• Helvetica Now: A modern version optimized for digital.

To avoid for body text: “Old-style” fonts like Garamond, which have a small X-height, making them tiny and tiring to read on a standard screen.

2. Long texts: Round and airy fonts

For a blog article or a report, the goal is to reduce eye strain. We look for fonts that “breathe.”

The principle: Fonts with wide apertures (the open space in a “c”, “e”, or “s”) prevent letters from turning into black blobs when the user squints.

Recommended examples:

• Open Sans: Very round, extremely readable thanks to its open forms.
• Montserrat: Very geometric and wide, it gives a modern and airy look.
• Georgia: If you prefer a Serif font, this is the queen of on-screen readability for long narratives.

3. Short texts: Narrow and dense fonts

For interface elements (buttons, navigation bars, notifications), space is often limited. In these cases, more condensed fonts can be used.

The principle: We prioritize recognition of the overall word shape rather than fluid reading.

Recommended examples:

• Oswald: A condensed font perfect for impactful titles or buttons.
• Archivo Narrow: Ideal when you have a lot of information to fit into a small screen width (dashboards).
• Inter: Although versatile, it is very effective in small UI spaces.

Summary table of uses

Font Measurement Systems

Font size can be measured using different scales. Here is an overview of two fixed scales (pixels and points) and two variable scales (em and percentage), along with their pros and cons:

1. Pixels

This scale measures font size in pixels on the screen. This means the font size is fixed, but the actual size displayed depends on the screen’s pixel density. It is a measurement understood by all browsers, but it does not adapt to different pixel densities and cannot be resized by older browsers.

2. Points

The point unit is a legacy of printing, where one point equals 1/72 of an inch (about 0.03 cm). Points offer relative control over the final result, but they do not display the same way on all devices. Consequently, points are not ideal for flexible layouts.

3. Em

The “em” unit is relative to the default font size. For example, 1 em is equal to your browser’s standard font size. “ems” are adaptive and allow for the creation of flexible layouts. They are well-supported by most browsers, including older versions.

4. Percentage

Measuring font size in percentage allows for the creation of fluid and adaptable layouts. However, this can be more complex to manage than other units, as the font size is determined as a percentage of the default font size.

Web Typography: Complete guide to choosing the perfect font – 2020 Happy.webacademy

Media Queries for font size

Media Queries are powerful tools for responsive web design. You can use them to adjust font size based on screen resolution. Media Queries allow you to offer an optimal user experience by adapting font size to different devices.

ISO 9241-300 Standard

The AFNOR 9241-300 standard specifies the rules to follow when designing interfaces for mobile, desktop, or TV screens.

The ISO standard recommends a font height of 2.8 mm for a reading distance of 50 cm. In other words, the total size of the font (from its ascender to its descender) should be 2.8 mm if the user reads at a distance of about 50 cm.

This results in the following equivalencies:

• 2.8 mm for d=50 cm
• 3.5 mm for d=60 cm
• 4 mm for d=70 cm

Font size, the guarantor of readability

Choosing the right font size for your online text is essential to ensuring a pleasant reading experience for your users. By taking into account pixel density, screen resolution, reading distance, and font composition, you can create readable and adaptive layouts. Using units like “em” and Media Queries can greatly improve the flexibility of your web designs.

Remember that readability is essential, and font size is a key element of it. Take the time to test different sizes and units to ensure your text is easy to read across a variety of devices.

Featured image: illustration by Tamanna Mundhra – Dribbble