Google's Mobile-Friendly Test tool: font size

7 experiments by reverse engineering font size detection

10/12/2018

By: Andres Castillo Ormaechea

What font size should my page have on mobile devices according to Gooogle Mobile Friendly test tool? Does it take into account when analyzing on-page invisible text? opacity? display and visibility CSS properties?

A bit of context first.

It is very important to make your website readable from a mobile device since it is predicted that there will be 2.7 billion smartphone users in 2019:

smartphone users growth

• Source: https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

It is recommended by Google that the font size of your site on a mobile device should be at least 12 pixels:

Google Lighthouse docs font size

• Source: https://developers.google.com/web/tools/lighthouse/audits/font-sizes/

Google docs font size

• Source: https://www.thinkwithgoogle.com/intl/en-gb/consumer-insights/build-a-great-user-experience/

You can test this first in a tool called "Lighthouse" that is a tool for improving the quality of a website. There is a particular section in Lighthouse that refers to the "Mobile Friendly Test" that is also a tool by Google to check the quality of your website but instead in mobile devices.

Google Lighthouse mobile friendly

The interesting thing here is that the "Mobile Friendly Test" tool is NOT open sourced. So I decided to do some experiments regarding font size detection in mobile devices.

Experiment #1:

What is a good font size?

I set a base text (1059 characters) in a plain HTML file and started changing the font size and running it against the Mobile-Friendly tool. Turns out that the minimum required font size so that the page passes the test is when setting it to >= 21px.

Google Mobile Friendly test - mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=REqe8liXkTVa8iMSVd5j4w

Experiment #2:

What is a bad font size?

Using the same base HTML file (1059 characters) I changed the font size to 20px and turns out that the page fails the font size test:

Google Mobile Friendly test - not mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=cFclgsqXxy--ZyQzxUvmMg

Experiment #3:

Will adding a viewport fix anything?

Using the same base HTML file (1059 characters at 20 px) I added a viewport meta tag and it happens so that the page passes the font size test. So, again, remember the importance of the mobile viewport tag. The things it can do for such little effort:

Google Mobile Friendly test - mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=q2GC-pEA57f4RQZvWluwUg

Experiment #4:

Is text with the same color as the background (a.k.a invisible text) considered in the font size test?

Using a plain HTML file with 1059 characters at 21px (a good font size) I added 5323 characters at 20px (bad font size) with the same color as the background which is roughly 83% of invisible text on the page. The result is that indeed invisible text is considered when analyzing on-page text:

Google Mobile Friendly test - not mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=CU1EYq60cJIwN7d71rPtVg

Experiment #5:

What about text with opacity:0

I kept the same 1059 characters at 21px (good font size) and added 5323 characters with opacity:0 (83% invisible text) at 20px (bad font size). The result is the same as with Experiment #4. It failed:

Google Mobile Friendly test - not mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=oU4FWqss5p9yPQmSgVsKIA

Experiment #6:

Let's try now with visibility:hidden;

I kept the same 1059 characters at 21px (good font size) and added 5323 characters with visibility:hidden; (83% invisible text) at 20px (bad font size). The page passes the test so the text with the CSS property visibility:hidden; is NOT considered in the Mobile-Friendly test:

Google Mobile Friendly test - mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=rw6ySrMeBceClojTVetOOA

Experiment #7:

Last one with display:none;

With 1059 characters at 21px (good font size) and adding 5323 characters with display:none; (83% invisible text) at 20px (bad font size). The page passes the test so the text with CSS property display:none; is NOT considered in the Mobile-Friendly test:

Google Mobile Friendly test - mobile friendly page

• Source: https://search.google.com/test/mobile-friendly?id=jyYcBViQ6HLVydDMtXn70g

Note 1: for experiments #4, #5, #6, and #7 no viewport was added in the mix since it will make the Mobile-Friendly test pass and thus skew our results.

Note 2: for all experiments very basic, plain and simple tests were done since the algorithm seems to have heuristics and a lot of specific use cases (no, it is not open-sourced).

Conclusions:

After running some interesting experiments and answering a lot of Google re-captchas (thought for a second that I was working for Google as a Neural Network Trainer) we can conclude the following for Google's "Mobile Friendly Test" tool.

• Invisible text (same text color and background) will not be detected in the font size test.

• Text with opacity:0; will not be detected in the font size test.

• Always double check viewport tags in your pages. It's a low hanging fruit!

• Text with visibility:hidden; will be detected in the font size test.

• Text with display:none; will be detected in the font size test.

• Would be nice if Google would open source this project so we can contribute to it since its very important specially for the fact given that the number of smartphone users will arise in the upcoming years.