The book to screen comparison photo I posted the other day got me thinking about other devices compared to books in terms of point size.
I decided to see what iPhone font sizes compared to type size in a book might look like. The book I used for comparison was Robert Bringhurst’s The Elements of Typographic Style(I can’t think of a more carefully designed book). I then put together a page for the iPhone with a range of different point and pixel size placeholder text, with a pixel ruler on the left side. The Elements of Typographic style is set in 10pt Minion. For the iPhone we’ll use Times New Roman, since Minion isn’t available.
Getting a decent picture was kind of difficult but I managed. I found that I hold my phone about an equal distance away from me as I do a book when reading, so distance doesn’t need to play too much into the equation. Laying the two side by side, I came to the conclusion that the best point size for easy reading on the iPhone is somewhere between 13pt-14pt(or 17px-19px). Default for the iPhone(like any browser) is 12pt/16px.
Conclusion? This little test is by no means definitive, but… If you are creating an app/web app for the iPhone with a significant amount of text, think about bumping up the font size just a little bit more than the default setting, especially if you’ve set user-scalable=no. And don’t forget about line-height.
Note: I didn’t try using em or percent for measurement in this test, but if you want to do the conversion yourself, here’s a nice chart for that.
