The question came up in class recently: how can we control font size and maintain text legibility across the wide range of mobile devices? Is a font point 1/72 of a physical inch, as it would be on paper?
Short answer: Neither length nor pixels will reliably size text across mobile devices. Legible length depends on viewing distance (see below), while the legible number of pixels depends on pixel density. Both vary across devices. But no matter which device displays text, the human eye always views it. According to both the FAA and the FDA, legible text covers roughly 1/4 degrees of visual angle. iOS, Android and web apps all use some sort of device independent unit to control the angular size of text. On iOS, this unit is the point (pt). On Android, this unit is the "device independent pixel" (dp). On the mobile web, this unit is the "CSS pixel" (px). None of these units has a fixed physical length, in contrast to the traditional typographical point.
iOS
Responsive legibility is a simpler problem on iOS than other platforms, because the number of different iOS devices is relatively small, and because Apple controls the full technology stack (both OS and device).The device independent unit in iOS is the point (pt). Points can span one, two or three pixels:
- non-Retina devices: 1pt = 1 pixel, at 163 dpi 12 points = 1/4 deg
- Retina devices: 1 pt = 2 pixels, at 326 dpi 12 points = 1/4 deg
- Retina HD devices: 1 pt = 3 pixels, at 489 dpi (scaled to 401 dpi) 12 points = 1/4 deg
Android
Things are more complex for Android apps, which must function on an extremely wide variety of devices, most of which Google does not control. Android assumes that these devices will be viewed at roughly the same distance, and adjusts text height based on purely on pixel density.The device independent unit in Android is the density independent pixel (dp), which similar to iOS, is sized relative to a 160 dpi pixel:
- Kindle Fire: 1dp = 1 pixel, at 160 dpi 12 points = 1/4 deg
- Nexus S: 1dp = ~1.5 pixels, at 233 dpi 12 points = 1/4 deg
- Nexus 6: 1dp = ~3 pixels at 493 dpi 12 points = 1/4 deg
Mobile Web
Maintaining legibility is most complex on the web, since the variety of devices includes not only mobiles but also desktops and laptops. In particular, drastic differences in device size create large differences in comfortable viewing distance, meaning that text size cannot be controlled based on pixel density alone.As google points out on its search ranking pages (where legibility is a factor), the device independent unit on the web is the "CSS pixel" (px). According to the W3C CSS2 standard:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96 dpi and a distance from the reader of an arm's length.Surprise! 12px is 1/4 degrees. Likely the variety of devices the web must support led the W3C to adopt a device independent unit based on visual angle rather than a pixels, since this makes no assumptions about viewing distance. Mozilla illustrates how a CSS pixel translates to different lengths on different devices:
- desktop screen at 28": px = 1/4 mm
- laptop screen at 22": px = 1/5 mm
- phone screen at 16": px = 1/6 mm
Closing Thoughts
Maintaining legibility on mobiles is much more complex than it is on desktops and laptops, because of the great variety in mobile devices. But this development complexity is the new reality: small mobiles are outselling PCs roughly 8 to 1; while large displays are becoming smarter, cheaper and bigger all the time. In the age of the heterogeneous and ubiquitous display, the days of counting device pixels during development are over, and have been for some time.