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.