Web font sizes on mobile are... broken 🗚

I noticed that web font-sizes on my Android phone often don't look right. Plenty of sites are ok, but plain simple HTML doesn't always work. After digging, mobile browsers have a feature called "Font Boosting" to prevent problems with either tiny fonts or zooming in and scrolling left and right. There's some logic in there that does (or doesn't) increase the font size to make text readable without zooming.

I made a simple web page to illustrate this.

Open that on your phone and keep pressing the "Grow" button until you see something peculiar happen. I see the problem on chromium-based browsers and Firefox.

There are several things wrong here.

The default font size is far too small.

If I zoom a web page on my laptop because the text is too small, the font gets bigger AND the text reflows. On my phone, the font gets bigger but the text DOESN'T reflow, so words disappear off the right hand side.

So there's an algorithm to boost the font size (enormously) but only when some threshold is crossed, so (sometimes) the font is still very small.

#HowDidWeEndUpHere

It's enough to make you want to stop using the web and try other simpler protocols.

back to gemlog