Differences between revisions 2 and 3
Revision 2 as of 2010-10-21 15:29:24
Size: 12275
Editor: shoobe01
Comment:
Revision 3 as of 2010-10-21 15:30:58
Size: 12340
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 26: Line 26:
[[image:type-lines.png]] {{attachment:type-lines.png}}
Line 40: Line 40:
[[image:type-forms.png]] {{attachment:type-forms.png}}
Line 46: Line 46:
[[image:type-parts-1.png]] {{attachment:type-parts-1.png}}
Line 48: Line 48:
[[image:type-parts-2.png]] {{attachment:type-parts-2.png}}
Line 53: Line 53:
[[image:type-stress.png]] {{attachment:type-stress.png}}
Line 57: Line 57:
[[image:type-serifs.png]] {{attachment:type-serifs.png}}
Line 63: Line 63:
[[image:type-legs.png]] {{attachment:type-legs.png}}
Line 74: Line 74:
[[image:type-width.png]] {{attachment:type-width.png}}
Line 80: Line 80:
[[image:type-kern.png]] {{attachment:type-kern.png}}
Line 86: Line 86:
[[image:type-leading.jpg]] {{attachment:type-leading.jpg]]
Line 92: Line 92:
[[image:type-accents.png]] {{attachment:type-accents.png}}
Line 100: Line 100:
[[image:type-rasterVector.png]] {{attachment:type-rasterVector.png}}
Line 118: Line 118:
[[image:type-s60sans-sample.png]] {{attachment:type-s60sans-sample.png}}

Mobile and small-screen design is largely about communicating information to the user. More often than not, regardless of how exciting and shiny the interface is, this will still be centered around the display of text content.

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.

Challenges of Mobile Typography

Computer-based type, especially for internet display, 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.

Technology

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.

While this challenge will slowly dissolve, it will always be present to some degree. Inexpensive devices, specialist devices (youth, elderly and ruggedized) and emerging markets needs, seem to indicate these issues will persist for another decade at least.

Usability

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 comprehendible.

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.

An Introduction to Typography

To understand mobile typography, you will need to learn a little of the language and principles of typography in general. Do note this is a very cursory review of this field; if you want more information I'll eventually post references to other resources to check out.

Baselines and measurements

The basic building block is lines and measures:

The baseline is where all type rides. Note some round characters can dip below this, but only very little; probably not at all at mobile screen sizes. X-height is the height of the lower-case "x," or any lower-case character, excluding the ascenders for those characters. Cap height is the height (more or less) of the tallest ascenders, and of the upper-case characters.

An em is the basic unit of typographic measurement. There are some subtleties to it, and it's changed over time, but for our purposes its about the distance from the top of the capital to the bottom of the descender.

The em is a unit of measure. It is not just used for vertical measurement. Em dashes are as long as an em, horizontally. An en is half the length of an em.

Points should also be discussed here sometime, but are not now.

Letterforms and their parts

Type is composed of letterforms, and very importantly to the readability, the counter-forms made up of the white space inside letters:

The space between letters is another sort of counter-form, and will be discussed a bit under kerning, later on.

Every piece of the letter form also has a name. There are many more of these, but this seemed like a set of the most important ones for understanding and selecting type appropriate for mobile and small screen use.

Stress is adding curvature to the straight shapes of a letterform. This is generally not desired for mobile faces. At best, the small rendered size will simply blur out these subtleties. It could also make it impossible to render sharp letters at small sizes.

Serifs are available in a few different styles. The basic choices are below:

For mobile type, sans-serif is often the default choice as it works well enough for all uses, at all sizes. Serif faces are more readable for large blocks of type than sans serif faces. If your application is one filled with news articles, or something similar, consider if a serif face might work. Square serifs may be a good compromise, to assure the serifs display at the rendered sizes.

All these letterform details matter not just for style, but for legibility. Note that most of the letterform is similar to every other letterform. The bottom half is just a series of undifferentiated legs:

So fairly small portions — mostly in the top half — their ascenders, descenders, counters and inter-forms are the keys to readers understanding the form and reading the phrase.

=== Families and styles === Font, face, style, etc.

Make specific mention that there are families that include serif and sans serif faces.

Note how weights affect readability, and spacing, which matters a lot on a small screen. Very often, other methods (color, shape, position, whitespace) is more suitable for emphasis than bold on small screens.

Space: Kerning and leading

There are two types of space between letterforms we will concern ourselves with. Kerning is the space between letters. It is generally controlled by kerning tables that come with the type face. This is not something that can be affected by the individual designer or content creator for any mobile application. However, it is critical to readability, so be sure to select a well-kerned face, and make sure the kerning is applied by the display technology of the device.

Do not, as a general rule, use monospaced faces, where each character takes the same horizontal width.

Line spacing is called leading. This is measured as the vertical distance between baselines (or any like-to-like line). Sufficient room must be provided for the ascenders and descenders to not collide with each other. Additional room must be provided to assure lines of type can be read, without forming inter-character counters in the space between lines.

{{attachment:type-leading.jpg]]

Many typefaces suitable for mobile display have very small descenders to help you eliminate extra leading, and fit more information on a page.

Most languages have some accent characters. These are usually placed above the letterform, occupying the ascender space for lower-case characters, but an above-cap-height space for upper-case characters. Typically, this will require very large leading to enable readability of the accents.

This generally is unacceptable for small screen display, and some faces have special letterforms that fit the accent and character within the cap height. If your application must support accent-enabled languages, consider the efffect this will have on your design.

Display Technologies

Raster vs. vector. Short version is that most faces today exist in vector glyphs, but the devices only support raster forms. So, when turning a typeface mobile, it gets rasterized.

There are a few devices starting to use vector type. I presume iPhone, maybe Android. LiMo? Look it up somehow.

Companies such as Microsoft has introduced their own type of font display technology (Cleartype ) to improve readability for such devices. Monotype has ESQ Mobile. There are others. Find out what they do.

Hinting. Some of the technology around normal typography, such as kerning tables, plus some new stuff for better legibility, are available with some of these display technologies. Find out basically how to describe these.

Guidelines for Selecting a Typeface for Mobile and Small-Screen Devices

Must have:

* 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

Should also:

* 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

Non latin languages will have some other requirements, but we'll get to those later.

Resources

Foundries and Catalogs

While no longer usually casting metal type, places that produce type as distributable products are still called foundries.

Display technologies

Type blogs and books

Mobile type info

Some is from foundries, so is self-serving, but we only post those that are largely or completely true

Introduction to Mobile Typography (last edited 2014-02-08 01:11:15 by shoobe01)