Show Me the Data - A Blog About University and College Websites

Rock-solid websites are the foundation of effective digital marketing, communications, e-commerce and social media campaigns.

But, you can’t know if your higher education website is rock-solid without checking it.

We study higher education websites to identify and benchmark the critical issues and we publish the results here.

Our automated higher education website quality assurance service is founded on our research so you can find and fix issues from privacy and security, through social media usage and SEO, to website analytics and content.

How To Make A Mobile Friendly Website: Text Too Small To Read (4/5)


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.



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your details. We do not share data with third parties.



eQAfy helps higher education institutions manage their web estates and helps websites be error-free and
deliver their intended user experience and meet their marketing and communications objectives

Run a sample QA audit


Photo Credit: |



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your data.
There's no sharing with third parties.
Unsubscribe or ask to be removed at any time.


eQAfy Logo


Higher Education Website QA


Rock-solid websites are a foundation of effective digital marketing, communications and social media campaigns.

You’ll only know if a site is undermining campaigns, harming reputations or creating risk exposures by checking it.


Run a sample QA audit

25 Most Recent Blog Posts