Fixing “Text Too Small To Read” Failures
So far, we’ve looked at the background to being mobile-friendly, the Google mobile-friendly test tool and set out some solutions to the three easiest problems Google’s test tool highlights.
This issue is the most easily understood of the mobile-friendly test failures, but is not straightforward to resolve. Text’s true display size is a factor of how a browser chooses to relate CSS pixels to screen pixels – wait, say that again.
It turns out that CSS pixel sizes are not actual screen pixels but are an angular measurement intended to avoid web developers having to concern themselves with physical pixel dimensions. So, a CSS definition of 24.3px makes the affected elements the same size as the Moon when viewed from Earth.
The reason an angular measurement is used is to accommodate viewer distance from the display screen.
Desktop screens are assumed to be placed on average 28in (c71cm) from a viewer and to have a screen pixel density of 96dpi (dots per inch – c 38 per centimetre). Viewers are assumed to hold mobile screens closer, although there doesn’t appear to be an analogous industry standard. We assume the viewer distance to be approximately half that of a desktop, at 14in (35cm).
If mobile screens had the same pixel density as desktop screens they would appear to be much more “blocky”, because we view them from much closer. For marketing, design and other reasons, mobile screens have much higher pixel densities than desktops, as much as 468dpi. That figure is much higher than the 192dpi one might expect if all we want to achieve is the same quality as a desktop display on a mobile which is only half as far away. The effect of that is that the original angular measurement basis for CSS pixels now doesn't apply. This is because mobiles do not proportionally fit the same number of pixels into the same display area as desktops or, say, large screen projectors. Without any other alteration, via CSS media queries, it is almost inevitable that mobiles will display the the text too small to read.
The important point is that although CSS pixels that-are-not-screen-pixels are intended to help avoid concerning ourselves with screen densities, the reality is that the smartphone market has made this hard to avoid.
The more phone makers try to fit HD (or better) video on 5” screens, the more acute the issue of achieving appropriate text sizing becomes. Google recommends using media queries to alter content styling, as part of its responsive web design approach.
We extend that recommendation to suggest considering increasing text sizes for the smallest media query definitions to accommodate current mobile screen pixel densities.
Finally, you need to test and retest all the media query options for your website on desktop, tablet and smartphone alike.
In the last post in this series, we examine how to resolve the issue of: Resources Blocked By robots.txt.
Don’t have accurate and current information on all the websites you own? Not able to monitor and check each website’s content quality and risk status? Let’s talk about how we can help.