I am working with a designer who wants to cram a lot of content into the mobile version of his website and who has provided a design at 750px physical width rather than at a more average device width.

As he designs in Photoshop, I want to be able to go back to him and say "show me a version which is 320px wide and has fonts no smaller than X pixels" in order to try and emphasise quite how little space we actually have on an average phone, and why his template needs to be simpler.

The smallest fonts will be only used for small print t&cs and so just have to be legible rather than optimised for easy reading. The likely font is going to be Open Sans.

What font size is the smallest possible in this case?

  • 1
    Thanks. That's a useful post, and am assuming the answer is most likely 9px. The difference I feel is that my question is web specific (I need to take into account how browsers render fonts - eg Safari changes them without -webkit-text-size-adjust), and with less focus on picking the right font family (the sensible approach is to choose a font designed for the job, as the other question focusses on, but that may not be an option I have - if specific fonts work at 9px, but most fail, then that isn't going to work here). I kind of need a rule of thumb such as "never go below 9px with any font". – Richard B Feb 24 '16 at 16:08
  • A 9px font rendered from a webpage on a phone will look the same as a 9px font rendered in a native app, assuming the font family is the same. Which brings up the point - it depends on the font family. It also depends on the phone's resolution, the phone's overall display quality, the environmental factors at the time of reading, and more. All mobile OSs have style guides which make font size recommendations. – Evil Closet Monkey Feb 24 '16 at 16:42