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]


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


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:

The 16-color palatte
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:

The 64-color palatte
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.”  ↩