Click here to buy from Amazon.

Message Display Characteristics and Legibility

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 man- ner, glancing at the screen for much of the interaction. The message display is competing with millions of other stimuli in the visual field. Therefore, mobiles must be designed to stand out appropriately, beginning with legibility.

The following is a list of legibility guidelines for mobile devices:

Message Display Readability

As we discussed earlier, legibility is determined by how we can detect, discriminate, and identify visual elements. But legibility is not the end to this process of designing effective mobile displays. We must make sure they are readable. When readability is achieved, the user can then evaluate and comprehend the meaning of the display.

Readability is based on the ease and understanding of text. It is determined by whether objects in the display have been seen before. Thus, readability is affected by the message’s choice of words, the sentence structure, appropriate language, and the reading goals of the user (Easterby 1984).

Reading Modes

In September 2004 Punchcut worked with QUALCOMM to develop a typographic strat- egy with respect to its custom user interfaces within its mobile operating system and ap- plications. In that study, Punchcut determined three modes of reading and understanding behavior that occur within the mobile context (Benson 2006).

These modes consider the duration and size of focus for textual attention:




Language Requires Context

These three modes are based within the context of the user’s goals. Just like a user’s goals require context, so does the meaning of language derived from the message’s choice of words. Without context, the intended message displays meaning may become misunderstood.

In our everyday context, we must derive meaning from other’s intentions, utterances, eye movements, prosody, body language, facial expressions, and changes in lexicon (McGee, 2001). When context uses more individual pieces, the less ambiguity we will encounter in the messages meaning.

In mobile devices today, we may not have all of those contextual aids available to help us derive meaning. The mobile user is presented only with the aids the device’s OS, technology, or the designer’s intention have provided.

Readability Guidelines for Message Displays

The following guidelines and suggestions should be considered when designing readable mobile displays.


  • For on-page elements -- such as the text of Titles, Menus, and Notifications -- use vocabulary that will be familiar to your user. Do not use internal jargon or branded phrasing only familiar to the company and it’s stakeholders.
  • Use vocabulary specific to the task at hand. General and vague titles will create confusion.
  • Strive for no help or "FAQ" documentation. With clear enough labels, you can often avoid explaining in a secondary method.

Images as Aids

  • Images can provide additional visual aids to reinforce a message’s intended meaning. When needed, use images that are clear in meaning. Do not use images that have arbitrary meanings or require learning.
  • Image meanings are socially and culturally created. Even the best icons will not be understood for some users. Using images alone without text labels may result in varying interpretations.

Overflow or Truncation

  • Make sure key titles, button labels, softkey labels and similar items fit in the available space. Do not allow them to wrap, extend off the screen or truncate.
  • For certain cases, such as lists, tables and some other descriptive labels, the text may truncate. When possible, do not break words. To indicate the truncation, use an ellipsis character. If not available, use three periods. Never two or four or any other number. Sometimes, it may be suitable for the word to disappear under the edge of the viewport or some other element instead to indicate the truncate.
  • Rarely, the marquee technique may be useful for list items. Text is truncated, flowing off the screen, and when in focus it scrolls slowly so after a brief time the entire text can be viewed by the user.
  • Long text, in paragraphs, will always wrap using one of the methods described more in the Alignment section above.
  • If the entire text of a paragraph cannot fit, or is not needed (such as the beginning of a long review) it may begin as a paragraph, and truncate at the end, to indicate there is more content.

Line Length

  • 50-60 characters per line is suitable. If you need longer lines, increase leading, but there are limits to how far you can go. Around 120 characters, users might find it difficult to scan that far.
  • The optimal line length varies around a multitude of factors. These factors include: display size, line size, type size, kerning, color, margins, columns, and visual acuity.

* Users’ subjective judgments and performance do not always correlate. Studies have shown that users may prefer shorter line lengths, but may actually read faster with longer lines.

Next: Typefaces for Screen Display

Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.


If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.