Font readability on small screens: testing brand typefaces
How to organize a full brand typography test on mobile
The first mistake of most teams is to test the font only in DevTools. The simulator stretches desktop system rendering onto a small window, while mobile OS hint and smooth fonts in their own way. The check must be done on a published address, via real mobile internet, on devices used by the brand's target audience, not on flagship devices from the designer's office.
- Gather 4-5 devices with different pixel densities: a budget Android with a 360-393 px screen, iPhone SE (375 px), current generation iPhone (390-414 px), tablet.
- Test not just one size, but a grid: 12, 14, 16, 18, 20 px — exactly at these sizes custom fonts often 'break' thin strokes.
- Check scaling up to 200% (WCAG 1.4.4 requirement) — when increasing, many custom fonts lose proportions.
- Enable dark mode — light text on a dark background visually 'inflates' thin strokes more than dark on light.
- Measure the actual length of the line: at 360 px and 16 px font, the line usually gives 35-45 characters — this is below the comfortable threshold of 45-75 characters, and the developer needs to solve this by increasing the block size, not decreasing the font size.
| Screen width | What to check primarily | Typical problem |
|---|---|---|
| 360-375 px | 16px body, short line | letter merging in narrow columns |
| 390-414 px | interline spacing 1.5-1.6 | visual 'jump' of lines at line breaks |
| Tablet 768+ px | max-width of the block 680-720 px or 18px | the line stretches to 80-90 characters |
How does checking a custom font differ from checking a ready-made typeface
Roboto and San Francisco have undergone thousands of hours of engineering refinement — their hinting and optical sizes are already tuned by the manufacturer for small point sizes. Brand fonts almost never go through such a path: they are drawn for banners and headlines, and then sent unchanged into the mobile interface. This is a systemic error. A ready-made font is sufficient to check for contrast and line-height, while a custom one must be tested as a separate product: with its own problematic letters, its own kerning, and its own response to Windows, Android, and macOS anti-aliasing separately, because macOS hinting is ignored, while Windows and Android require it explicitly.
What characteristics of the font actually break at small point sizes
- X-height. At low x-height, letters visually 'sink' in the line spacing already at 14px — the text is read slower, even if the point size is formally acceptable.
- Kerning. Letter pairs perfectly adjusted at 60px in the logo may stick together or, conversely, spread apart at 14-16px — automatic browser kerning does not save custom fonts.
- Openness of letters. Closed 'a', 'e', 'c' with narrow gaps become dark spots at small point sizes — this is the first thing that 'floats' when scaling to 200%.
- Stroke contrast. Fonts with strong contrast between thin and thick lines (modern, didone) lose thin strokes completely on small screens — this is not a matter of taste, but a physical limitation of the pixel.
At 14px text already requires noticeable eye strain, and at 12px without scaling becomes nearly illegible — this applies equally to system and custom fonts, the difference only being in how quickly this effect occurs.
Hinting and adaptation: does a brand need a special font variant
Yes, and this is exactly the point that is usually skipped when developing a corporate font. VK, when creating VK Sans Text, separately worked on hinting specifically for small sizes — 12, 14, 20px — and did this differently for Windows, Android and macOS, because the first two platforms render the font coarsely without hinting, while macOS smooths it out on its own. For a mid-sized brand, full hinting for each platform is an expensive solution, but the minimum that should be done: order a separate optical size (Text/Display variant of the font family) with an increased x-height and open letters specifically for interfaces, rather than using the same rendering for both billboards and mobile menus.
Checking weights: why Light and Regular merge on screen at 360-390px
This is something that almost nobody tests separately. On a large screen, the difference between Light, Regular and Bold is obvious, but at 360-390 px thin variants often lose legibility: Light visually merges with Regular, and Medium — with Bold, especially on cheap screens with poor smoothing. All weights should be checked together, on the same screen, at the same font size — if the difference between Light and Regular is not distinguishable by eye at arm's length, then using Light in an interface should be avoided altogether, only using it in large headings.
What actually concerns people when they check the corporate font
The issue of brand-garniture readability on mobile devices does not arise abstractly, but almost always follows a specific incident: a user complaint, a note from a lawyer about small text in the agreement, or a designer noticing letter merging in a demo on their own phone. People rarely care about the contrast 4.5:1 itself — what concerns them is that the text looks 'cheap' or 'unreadable' specifically on their device. Hence the practical conclusion: brand-garniture testing should not be a one-time check before launch, but a regular procedure with each font update or addition of a new typeface — otherwise the problem surfaces with users, not designers.
How to organize a full brand typography test on mobile
The first mistake of most teams is to test the font only in DevTools. The simulator stretches desktop system rendering onto a small window, while mobile OS hint and smooth fonts in their own way. The check must be done on a published address, via real mobile internet, on devices used by the brand's target audience, not on flagship devices from the designer's office.
- Gather 4-5 devices with different pixel densities: a budget Android with a 360-393 px screen, iPhone SE (375 px), current generation iPhone (390-414 px), tablet.
- Test not just one size, but a grid: 12, 14, 16, 18, 20 px — exactly at these sizes custom fonts often 'break' thin strokes.
- Check scaling up to 200% (WCAG 1.4.4 requirement) — when increasing, many custom fonts lose proportions.
- Enable dark mode — light text on a dark background visually 'inflates' thin strokes more than dark on light.
- Measure the actual length of the line: at 360 px and 16 px font, the line usually gives 35-45 characters — this is below the comfortable threshold of 45-75 characters, and the developer needs to solve this by increasing the block size, not decreasing the font size.
| Screen width | What to check primarily | Typical problem |
|---|---|---|
| 360-375 px | 16px body, short line | letter merging in narrow columns |
| 390-414 px | interline spacing 1.5-1.6 | visual 'jump' of lines at line breaks |
| Tablet 768+ px | max-width of the block 680-720 px or 18px | the line stretches to 80-90 characters |
How does checking a custom font differ from checking a ready-made typeface
Roboto and San Francisco have undergone thousands of hours of engineering refinement — their hinting and optical sizes are already tuned by the manufacturer for small point sizes. Brand fonts almost never go through such a path: they are drawn for banners and headlines, and then sent unchanged into the mobile interface. This is a systemic error. A ready-made font is sufficient to check for contrast and line-height, while a custom one must be tested as a separate product: with its own problematic letters, its own kerning, and its own response to Windows, Android, and macOS anti-aliasing separately, because macOS hinting is ignored, while Windows and Android require it explicitly.
What characteristics of the font actually break at small point sizes
- X-height. At low x-height, letters visually 'sink' in the line spacing already at 14px — the text is read slower, even if the point size is formally acceptable.
- Kerning. Letter pairs perfectly adjusted at 60px in the logo may stick together or, conversely, spread apart at 14-16px — automatic browser kerning does not save custom fonts.
- Openness of letters. Closed 'a', 'e', 'c' with narrow gaps become dark spots at small point sizes — this is the first thing that 'floats' when scaling to 200%.
- Stroke contrast. Fonts with strong contrast between thin and thick lines (modern, didone) lose thin strokes completely on small screens — this is not a matter of taste, but a physical limitation of the pixel.
At 14px text already requires noticeable eye strain, and at 12px without scaling becomes nearly illegible — this applies equally to system and custom fonts, the difference only being in how quickly this effect occurs.
Hinting and adaptation: does a brand need a special font variant
Yes, and this is exactly the point that is usually skipped when developing a corporate font. VK, when creating VK Sans Text, separately worked on hinting specifically for small sizes — 12, 14, 20px — and did this differently for Windows, Android and macOS, because the first two platforms render the font coarsely without hinting, while macOS smooths it out on its own. For a mid-sized brand, full hinting for each platform is an expensive solution, but the minimum that should be done: order a separate optical size (Text/Display variant of the font family) with an increased x-height and open letters specifically for interfaces, rather than using the same rendering for both billboards and mobile menus.
Checking weights: why Light and Regular merge on screen at 360-390px
This is something that almost nobody tests separately. On a large screen, the difference between Light, Regular and Bold is obvious, but at 360-390 px thin variants often lose legibility: Light visually merges with Regular, and Medium — with Bold, especially on cheap screens with poor smoothing. All weights should be checked together, on the same screen, at the same font size — if the difference between Light and Regular is not distinguishable by eye at arm's length, then using Light in an interface should be avoided altogether, only using it in large headings.
What actually concerns people when they check the corporate font
The issue of brand-garniture readability on mobile devices does not arise abstractly, but almost always follows a specific incident: a user complaint, a note from a lawyer about small text in the agreement, or a designer noticing letter merging in a demo on their own phone. People rarely care about the contrast 4.5:1 itself — what concerns them is that the text looks 'cheap' or 'unreadable' specifically on their device. Hence the practical conclusion: brand-garniture testing should not be a one-time check before launch, but a regular procedure with each font update or addition of a new typeface — otherwise the problem surfaces with users, not designers.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
