×
Namespaces

Variants
Actions
(Difference between revisions)

Typography in Mobile Devices

From Nokia Developer Wiki
Jump to: navigation, search
Aadhar14b (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(6 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Usability]]
+
{{ArticleMetaData <!-- v1.2 -->
'''Original article published at [http://patterns.littlespringsdesign.com/index.php/Mobile_Typography|  Little Spring Design] under [http://creativecommons.org/licenses/by/3.0/| Attibuttion 3.0]'''
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20091019
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
[[Category:Usability]]
 +
'''Original article published at [http://www.littlespringsdesign.com/ Little Spring Design] Web site under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0]'''
  
 
<br>
 
<br>
Line 9: Line 31:
  
 
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.
 
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.
[[Image:Type.png]]<BR>
+
[[File:Type.png]]<BR>
  
 
===Technology challenges===
 
===Technology challenges===
Line 28: Line 50:
 
     <LI>No ascenders above the cap height – critical for non-English languages  
 
     <LI>No ascenders above the cap height – critical for non-English languages  
  
[[Image:Type2.png]]<BR>
+
[[File:Type2.png]]<BR>
 
     <LI>Be space-efficient – generally this means narrow, to allow sufficient height for all users to read the characters
 
     <LI>Be space-efficient – generally this means narrow, to allow sufficient height for all users to read the characters
 
     <LI>Not look compressed
 
     <LI>Not look compressed

Latest revision as of 06:42, 9 May 2012

Article Metadata
Article
Created: User:Aadhar14b (19 Oct 2009)
Last edited: hamishwillee (09 May 2012)

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


Contents

[edit] Introduction

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.

[edit] 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

[edit] 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.

[edit] 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.

[edit] 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

This page was last modified on 9 May 2012, at 06:42.
65 page views in the last 30 days.
×