A frequent issue I encounter designing mobile experiences for iPhone, Android, and WP7 is that font sizes on the latter device appear considerably smaller – often to the detriment of the design as a whole. Where clients are concerned, it often just “doesn’t look right”.
This is down to the fact that WP7 devices have a higher pixel density (PPI) than the iPhone and a good proportion of Android handsets. If font sizes are set in pixels*, they are going to be affected by this.
iPhone: 3.5″, 320 x 480 = 165 ppi
HTC Trophy: 3.8″, 480 × 800 = 246 ppi
To fix – although a better word would be compensate – this, we can serve an extra stylesheet for WP7 which multiplies our base text sizes by 1.5. This would be a great time to use a conditional statement to supply IE with our new rules. We could also take advantage of the functionality provided by CSS preprocessors (LESS, for example) to do the maths for us automatically.
* And the matter of which unit to set text in is a whole different argument altogether. This would be a good shout for setting text in ems and points, although I suspect that the using the former would see similar results.
Recent Comments