Font Size in Mobile Browsers

If you found this on Google and just want to know how to make text readable on iPhones and Android phones, set the text size to 24pt and call it a day. For the curious, read on.

When I redid my website using Jekyll, one of my goals was to make sure that it was usable from mobile devices like an iPhone or Android. I was incredibly annoyed when I discovered that making a simple standards-compliant site that doesn’t specify any widths or font sizes leaves the user looking for a magifying glass. Before fixing it, I wanted to do some testing. I created a font size test page using every reasonable way to specify the font size, then I visited the page using my desktop, my netbook, an iPhone 4, an iPod touch, and a Droid 2 running Android. There were two main things I was looking for.

First, I wanted to see how faithful the browsers were to what are supposed to be “absolute” sizes. Points, picas, inches and millimeters have exact conversions between them. I measured the length of an em dash, supposedly the height of the bounding box for the font. Chrome and Firefox on my desktop are true to the absolute size.

Secondly, I wanted to see what the browsers did with “relative” font sizes. A relative font size is specified as percent or ems, where 1em = 100%. I set these relative values to match up with what I expected on my desktop and then checked what happened on the other devices. The CSS spec considers pixels a relative length, but I think most people would naturally consider it more absolute. I included this as well.

  1. All the browsers convert pixels to points at an implied 96dpi. That is, 24pt is always the same size as 32px.
  2. All the browsers convert between the absolute lengths at the correct consistent ratio. 24pt = 1/3 in = 8.47mm.
  3. Only my desktop was true to an actual ruler. All the other devices displayed smaller than actual size.
Browser Em Dash Scale
Chrome on Ubuntu 2048x1152 23" 101dpi 8.5mm 100%
Chrome on Ubuntu 1024x600 10" 118dpi 7.5mm 89%
iPhone 4 default portrait 1mm 12%
iPhone 4 auto-zoom portrait 2.1mm 25%
iPhone 4 default landscape 1.8mm 21%
iPhone 4 auto-zoom landscape 3.5mm 41%
iPod Touch default portrait 1.1mm 13%
iPod Touch auto-zoom portrait 2mm 24%
iPod Touch default landscape 1.9mm 22%
iPod Touch auto-zoom landscape 4mm 47%
Droid 2 default portrait 1.8mm 21%
Droid 2 auto-zoom portrait 4mm 47%
Droid 2 default landscape 2.8mm 33%
Droid 2 auto-zoom landscape 4mm 47%

Note that some of the numbers are within the margin of error when I measure (it’s hard to get calipers around a set of pixels). It seems reasonable that the iPhone 4 and iPod Touch generation 2 use identical font sizes rather than the 10% difference I measured.

All of this makes sense from a historical perspective. Long-standing assumptions get embedded in too many web pages for browser-makers to allow things to break, even if those pages were built on faulty assumptions about what the spec was.

But back to the point, our goal is to make web pages readable, which is not just about the size of the type, but also the viewing distance – text 2mm high looks very normal on 23” monitor, but would look comically large on a phone. I measured the most convenience test subject (myself) and got the following:

Environment Viewing Distance Implied Ideal Size
Desktop 70cm 100%
Netbook on lap 60cm 86%
Smartphone held portrait 35cm 50%
Smartphone held landscape 45cm 64%

Some of this is more or less relevant. I am not a fan of extensively customizing a page for a specific browser like in the bad old days of IE-specific tweaks, so I want to build a single mobile stylesheet to represent the compromise between the mobile browsers. On the desktop side, I don’t like specifying font size at all: that should be up the user. I’m willing to do it for mobile browsers because I know that the mobile browsers are intentionally mis-rendering things in order to make crappy desktop-oriented layouts work as well as they can.

I want to pick a a font size to bring it up to the ideal size based on viewing distance without making any devices too big. The largest apparent size of any of the defaults is the Droid in landscape 33% / 64% gives an apparent size of 52% of what you would see on the desktop. So, if I put a font size of twice normal in my mobile stylesheet, it will look pretty good for everyone.

Browser Stylesheet Actual Ideal Perceived
Chrome on Ubuntu 2048x1152 23" 101dpi desktop 100% 100% 100%
Chrome on Ubuntu 1024x600 10" 118dpi desktop 89% 86% 103%
iPhone 4 portrait mobile 24% 50% 48%
iPhone 4 landscape mobile 42% 64% 66%
iPod Touch portrait mobile 26% 50% 52%
iPod Touch landscape mobile 44% 64% 68%
Droid 2 portrait mobile 42% 50% 84%
Droid 2 landscape mobile 66% 64% 103%

Those are numbers I’m pretty comfortable with. Now the remaining question is whether to specify twice normal as 24pt or 200%. I haven’t been able to find a test that shows these actually behave differently on a mobile device. On my Droid the font size selection changes both relative and absolutely specified sizes. Changing the font size on an iOS is part of the accessibility package and I doubt many people will be using it. I lean toward specifying a font size of 24pt and then using relative sizes for headings or smaller text, just to keep the distinction within my own stylesheet.

So now that you have your nice mobile stylesheet with a font size of 24pts, how do you get the browser to use it? Unfortunately, modern mobile browsers don’t have a medium you can enter in the stylesheet link. You could detect this server side, but as I’ll explain in a future post, I prefer my client-side solution, bender.js.