Font Size in Mobile BrowsersPosted 2011-06-27 in technology.
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.
- All the browsers convert pixels to points at an implied 96dpi. That is, 24pt is always the same size as 32px.
- All the browsers convert between the absolute lengths at the correct consistent ratio. 24pt = 1/3 in = 8.47mm.
- Only my desktop was true to an actual ruler. All the other devices displayed smaller than actual size.
|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|
|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.
|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.