Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 05:54, 7 May 2012 by hamishwillee (Talk | contribs)

Typography in Mobile Devices

From Wiki
Jump to: navigation, search
Article Metadata
Created: User:Aadhar14b (19 Oct 2009)
Last edited: hamishwillee (07 May 2012)

Original article published at Little Spring Design Web site under Attibuttion 3.0



Mobile typography is about the selection and use of all the type elements within the design. It is only partly about the selection of the correct font and face, and has a great deal to do with selecting display technologies, understanding sizes and applying conventional design methodologies (size, shape, contrast, color, position, space, etc.) to best employ the type elements.

Mobile Typography A Challenge

Typography has always been a challenge due to display technologies (resolution), availability of type, color and contrast reproduction variations and size variations. Mobile devices take these issues, magnify them, and add on a spate of unique environmental and use-pattern issues. The primary barrier is of technology, and the primary concern is of readability within the user's context. Type.png

Technology challenges

While some devices are beginning to allow effectively unlimited type selection, support vector glyphs, and have large amount of storage and running memory, most mobile devices are still resource and technology constrained. General issues of storage on the device, running memory, download times and cost of network access, limit availability of type for mobile application design. As almost all devices require raster (bitmap) faces, each size is loaded as a complete, different typeface. Most products end up with the device's default type, or with a very limited set of choices for their application.

Usability challenges

Mobiles are used differently from desktops, and even most print use of type. They are closest, perhaps, to signage in that they must be comprehended by all user populations, under the broadest possible range of environmental conditions (e.g. poor lighting) and at a glance. The typical mobile user is working with the device in a highly interruptible manner, glancing at the screen for much of their interaction. The type elements must be immediately findable, readable and comprehensible.

This is different from the technical challenge in that it is inherent in the mobile device. Users will always interact with their devices in this manner, so it must always be addressed, regardless of the technical implementation.

Guidelines for Selecting a Typeface

  • x-height between 65 and 80% of the cap height
  • Strong counters (or "counter-forms") – often, using squared-off shapes for small counters is a good idea
  • Un-stressed forms – straight, even-width lines
  • No excessive descenders – avoid exceeding 15 - 20% of the cap-height, to avoid excessive leading
  • No ascenders above the cap height – critical for non-English languages Type2.png
  • Be space-efficient – generally this means narrow, to allow sufficient height for all users to read the characters
  • Not look compressed
  • Be well kerned – letters should not run together, or have spaces that look like word breaks
  • Have the same, or similar, width for all weights and styles (no penalty for using oblique/italics, or bold face for emphasis)
  • Subtle serifs can be beneficial to some sorts of forms; consider them for a face, or for some characters of a face
  • Include a true italic – a sloped roman assures that hardly any elements are vertical; a true italic can preserve legibility, following the rules above, while also being different enough to read as "other than body"
  • Be part of a complete family. Serif and Sans can both be used (titles and body text have different needs), as well as many weights of each, if space is available on the device

66 page views in the last 30 days.