Monday, February 15, 2016

#goodquestion from @NCState's @mobiclass: how do we control text size on mobiles?

Hi folks,

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.

How legible length depends on viewing distance (W3C)

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
Note that to avoid aliasing and ease development, Android specifies that dp-to-pixel ratios be rounded to certain "buckets". Text would look bad if dps were some odd fraction of device pixels. Note further that Google recommends specifying text size using scaleable pixels (sp) so that users can adjust text size to their preference.

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
Don't forget that a CSS pixel is not a device pixel. The number of device pixels per CSS pixel is called the device pixel ratio (DPPX). This is set by manufacturers, who per the above list must consider comfortable viewing distance when doing so. Again, DPPX is typically a round number to avoid aliasing.

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.

No comments:

Post a Comment