Font support

Font support on mobile devices is limited, and your level of stylistic control over fonts will depend on the platform you are designing for. All devices support at least one font. This font often serves as the device’s default typeface and is typically referred to as the native font or device font. For example, S60 devices from Nokia use one font — S60 Sans, designed by Monotype — to render text within the browser and operating system.

Figure: The S60 Sans font by Monotype

All device manufacturers provide their own custom device font, so it’s worth taking the time to familiarise yourself with each of those fonts.

  • If you are designing a Web site that will be viewed in the Web Browser for S60, your ability to affect type will be limited to basic styling of the size, colour, style (such as bold or italic), and weight of S60 Sans.

  • In Java ME development, the formatting of device fonts is limited. The font size can be specified as small, medium, or large, which should be considered a very rough measure, because the actual size displayed will vary across devices. You can also specify a limited range of font styles (typically, bold or italic, but, again, not supported on all devices) and set text colour using RGB components or hexadecimal values.

  • Java ME technology also enables you to specify custom typefaces, but the process is quite different from what you may be used to on the Web or with Flash. Java ME technology doesn’t simply specify a typeface. Instead, a graphical (or bitmap) version of the required characters is included with the application that then crops and displays each individual character to form the required words and phrases. While this approach enables you to specify any font you wish, it also increases the size of the application, may cause performance issues on less capable devices, and is therefore not recommended for large areas of body copy. Note as well that it is not possible to change the colour of bitmap fonts dynamically, so a separate version of a font will need to be included for each and every colour you wish to use.

  • Flash Lite supports device fonts, as does Java ME technology, and also enables you to specify your own typeface in two ways. You can either choose standard, TrueType fonts or use pixel fonts that are specially designed for mobile use and to appear crisp at a specific point size. As with Java ME technology, each font bundled with the application increases the size of the overall file. For additional information, consult the Forum Nokia Flash Lite technology section.

Designing for the small screen on a big monitor can be challenging, and the most common mistake is making fonts too big. Given the variable nature of device fonts and the added impact of physical display size (described in the previous section), many designers find the creation of accurate wireframes, mock-ups, and documentation challenging. There are, however, simple ways to improve the accuracy of your designs:

  • Gather screen shots of various devices and measure the point sizes of common text-based elements such as body copy, headers, and softkeys. To avoid last-minute surprises, use these measurements as a guide and crosscheck your designs well before the porting begins.

  • Use the S60 Sans font in your wireframes or designs. You can obtain a TrueType version of the font downloading and installing the S60 SDK, then looking in the following location on your drive:

    C:\Symbian\[version# ex. 9.2]\[release # ex. S60_3rd_FP1_5]\Epoc32\release\winscw\udeb\z\resource\fonts

  • Avoid the use of italic type: It can be difficult to read. Unlike traditional print fonts that typically use a custom italic variant of each font, device fonts often simulate italics by shifting the upper half of the font slightly to the right. This approach can decrease legibility at certain sizes.

  • Remember that an increasing number of devices support both portrait and landscape modes. These modes can be implemented in all applications or merely during use of certain applications, such as the browser, camera, or media viewer. Newer device models, such as a number of the Nokia Nseries multimedia computers, include an accelerometer, which triggers a change in mode as soon as such a device is physically rotated. This feature further increases the likelihood that your users will spend time in both modes and emphasises the need to consider both throughout the design process.

© Nokia 2009.