Relative font sizes on the iPhone: conversion to absolute sizes

Most designs we get for the mobile websites we create, are psd or illustrator files with width of 320pxs. This reflects the screen size of the iPhone and some other smart phones very well. Add to this the fact that most people are evaluating your mobile site on an iPhone, it is very tempting to use absolute font-sizes that match the sizes from your design.

However, this does not take into account the devices with small screen dimensions, but high resolutions ( = high dpi screens). An example is the Nokia ExpressMusic. Small font-sizes on iPhone tends to become almost unreadable on these high dpi devices.... The inverse can be true too... Big screen width lower solutions will display your font's too big (although this is never really an issue).

That's why there is the general suggestion to use relative font-sizes when developing mobile websites. The device translates relative font-sizes to absolute font-size, taking into account the DPI of the screen and thus optimizes the readability...

To help a themer with getting the right relative sizes, and to suggest developers which sizes they can use when creating mobile web designs with an "iPhone first" mindset, I experimentally made the following conversion table:

xx-small 6px
x-small 10px
small 13px
medium 16px
large 18px
x-large 23px
xx-large 32px

Relative font sizes on the iPhone: conversion to absolute sizesRelative font sizes on the iPhone: conversion to absolute sizes