Font Sizing for the Mobile Web

Typography can be a daunting prospect when it comes to designing for mobile devices, there are lots of discussions on the topic out there, many of which arrive at differing conclusions. So for a mobile web app project I’m currently working on I decided to brush up on my font sizing theory to ensure that everything we release passes mobile UX conventions.

First off, if you’re not doing anything particularly intensive, you can save yourself time and use the following, letting the devices and their browsers calculate the sizing on your behalf.

font-size: small
font-size: medium
font-size: large

However this technique is unlikely to be anywhere near sophisticated enough to meet the designs many of us work with. Delving a little deeper, a common rule of thumb when dealing with fonts is to go no lower the 12pt (Apple’s Human Interface Guidelines actually specifies 13pt). Well that was easy, but wait, what exactly is a point? It’s true that a point size reference isn’t particularly helpful for web developers who, unlike print designers, will generally make use of pixels, or preferably ems. Do not fear though, there is a simple calculation that can be made to figure out the values:

points / 0.75 = pixels or pixels * 0.75 = points

So when its recommended never to use fonts smaller than 12pt, using the equation stated above we can deduce that the minimum font size we should be using is 16px.

12pt = 16px or 1em

References

Quora Question
Luke W: Designing for the Retina Display
UX StackExchange Question
KD Peterson: Font Size in Mobile Browsers
RedDesign: Approximate Conversion from Points to Pixels