Connect IQ SDK

Page Layout

Garmin makes purpose driven products, and the technologies of the product are chosen around the use case the product is intended. Making purpose driven products also influences the decisions of the screen technologies and fonts we choose for our products.

Text Fonts Versus Number Fonts

Garmin devices have two kinds of fonts available — text fonts and number fonts[1]. Text fonts are for displaying text and numbers and come in three sizes:

  1. Small – chosen to be the smallest readable font on the display
  2. Medium – larger than small; chosen to efficiently display text
  3. Large – larger than medium; typically used for headers

The number font is a larger size font that can only display number data. It has four sizes[1]:

  1. Mild – approximately one quarter screen display of numeric data
  2. Medium – approximately one third screen display of numeric data
  3. Hot – approximately one half screen display of numeric data
  4. Thai Hot – covers most of the screen[2]

Typeface

With the exception of the Forerunner 920xt[3], the text font for Connect IQ devices will be the Roboto Regular typeface. The number font will be chosen for the product based on the use case of the product.

User Fonts

Garmin tries to provide the best looking fonts for the device. Using the BMFont tool, you can import your own typeface into the product. Using the BMFont tool, you can import truetype font into a font usable by Connect IQ. There are some guidelines to follow:

  1. Try to use the system fonts when possible, but use custom fonts for accent.
  2. Large typefaces can take up quite a bit of limited resources. If you only need a typeface for a logo, it might be preferable to use a bitmap instead.
  3. If your font is limited to a set of characters you can use a filter when importing the font. This will save memory by not importing glyphs your application doesn’t use. For example, if you want to have your own custom large number font, you can use the resource compiler to only include digits and necessary characters like colons[4].

Bitmaps

Garmin wearable products use displays that do not require a backlight. These displays use much less power than traditional cell phone displays, but will look muted compared to a cell phone display. The displays have two bits of red, green, and blue; a potential for 64 colors total. Different wearable products can have different color depths. The most common palettes are either 16 colors or 64 colors. For device specifics, see Appendix A which lists the available colors for each device.

The 16 color palette reserves one slot for ‘transparent’ and one for the user’s profile color, providing a total of 14 available colors:

0xFFFFFF 0xAAAAAA 0x555555 0x000000 0xFF0000 0xAA0000 0xFF5500 0xFFAA00
0x00FF00 0x00AA00 0x00AAFF 0x0000FF 0xAA00FF 0xFF00FF
The 16-color palette

The ‘transparent’ color and user’s profile color do not take up slots in the 64-color palette, so 64 distinct colors are available with this palette:

0x000000 0x000055 0x0000AA 0x0000FF 0x005500 0x005555 0x0055AA 0x0055FF
0x00AA00 0x00AA55 0x00AAAA 0x00AAFF 0x00FF00 0x00FF55 0x00FFAA 0x00FFFF
0x550000 0x550055 0x5500AA 0x5500FF 0x555500 0x555555 0x5555AA 0x5555FF
0x55AA00 0x55AA55 0x55AAAA 0x55AAFF 0x55FF00 0x55FF55 0x55FFAA 0x55FFFF
0xAA0000 0xAA0055 0xAA00AA 0xAA00FF 0xAA5500 0xAA5555 0xAA55AA 0xAA55FF
0xAAAA00 0xAAAA55 0xAAAAAA 0xAAAAFF 0xAAFF00 0xAAFF55 0xAAFFAA 0xAAFFFF
0xFF0000 0xFF0055 0xFF00AA 0xFF00FF 0xFF5500 0xFF5555 0xFF55AA 0xFF55FF
0xFFAA00 0xFFAA55 0xFFAAAA 0xFFAAFF 0xFFFF00 0xFFFF55 0xFFFFAA 0xFFFFFF
The 64-color palette

Using colors from the 16-color palette will make your apps the most portable. Even if you can’t stick to 16 colors, it’s a good idea to use low bit-depth images when possible since more colors will use more memory.

Page Layouts

Garmin makes products with many screen shapes. When designing your product, take full advantage of the layout system in the resource compiler and the simulator to test your layout. The resource compiler allows you to specify your page layout in XML and have it target a particular device. See the Monkey C Programmer’s Guide for more details about the layout system.

A sample of possible device screen sizes
A sample of device screen shapes
Example of screen shapes on a person's wrist
Example of screen shapes on a person’s wrist

Some, but not all, Garmin wearable products will have a touch screen. When designing a layout for a touchable screen, it is best to apply a rule of thirds: break the display up into a 3 x 3 grid and put your touchable elements clearly inside one of those grid areas. Using this rule ensure the user has enough finger space to select the touchable element[5]. It’s also a good idea to keep the user interaction to a one dimensional interface – up, down, enter, and back.

The 3x3 grid on touch screen devices
The 3x3 grid on touch screen devices

  1. Font size descriptions are approximate and my vary depending on the device. See Appendix B for font specifications.  ↩

  2. Also, this font burns my tongue. Who am I kidding, the medium font burns my tongue.  ↩

  3. Don’t ask; it’s a long story involving release dates and, surprisingly, Yetis.  ↩

  4. Fonts over 40 years old should have their colons checked every year by professionals.  ↩

  5. Certain products use a 3x3 touch screen that only has nine touchable areas, so consider it less than a guideline and more of a “do this or else.”  ↩