7.1 KiB
| author | tags | |
|---|---|---|
| thomas |
|
(2014 09: This article was updated to add links for SDK 2.0 users and add the resource identifier of the fonts as suggested by Timothy Gray in the comments.)
Just like any modern platform, typography is a very important element of Pebble user interface. As Designers and Developers, you have the choice to use one of Pebble system fonts or to embed your own.
Pebble system fonts were chosen for their readability and excellent quality on Pebble black & white display, it's a good idea to know them well before choosing to embed your own.
Using Pebble system fonts
To use one of the system font, you need to call fonts_get_system_font() and pass it the name of a system font. Those are defined in pebble_fonts.h in the include directory of your project.
This function returns a GFont object that you can use with text_layer_set_text() and graphics_text_draw().
For example, in our Hello World example we used the Roboto Condensed 21 font:
void handle_init(AppContextRef ctx) {
window_init(&window, "Window Name");
window_stack_push(&window, true /* Animated */);
text_layer_init(&hello_layer, GRect(0, 65, 144, 30));
text_layer_set_text_alignment(&hello_layer, GTextAlignmentCenter);
text_layer_set_text(&hello_layer, "Hello World!");
text_layer_set_font(&hello_layer, fonts_get_system_font(FONT_KEY_ROBOTO_CONDENSED_21));
layer_add_child(&window.layer, &hello_layer.layer);
}
Update for SDK 2 users:
Refer to the second part of the watchface tutorial for updated sample code.
An illustrated list of Pebble system fonts
{% alert notice %} A more up-to-date list of fonts can be found by reading {% guide_link app-resources/system-fonts %} in the developer guides. {% endalert %}
To facilitate your choice, here is a series of screenshot of Pebble system fonts used to display digits and some text.
{% comment %}HTML below is acceptable according to Matthew{% endcomment %}
| Gothic 14 |  |
 |
| Gothic 14 Bold |  |
 |
| Gothic 18 |  |
 |
| Gothic 18 Bold |  |
 |
| Gothic 24 |  |
 |
| Gothic 24 Bold |  |
 |
| Gothic 28 |  |
 |
| Gothic 28 Bold |  |
 |
| Bitham 30 Black |  |
 |
| Bitham 42 Bold |  |
 |
| Bitham 42 Light |  |
 |
| Bitham 34 Medium Numbers |  |
|
| Bitham 42 Medium Numbers |  |
|
| Roboto 21 Condensed |  |
 |
| Roboto 49 Bold Subset |  |
|
| Droid 28 Bold |  |
 |
A word of caution
To save space on Pebble's memory, some of the system fonts only contain a subset of the default character set:
- Roboto 49 Bold Subset only contains digits and a colon;
- Bitham 34/42 Medium Numbers only contain digits and a colon;
- Bitham 18/34 Light Subset only contains a few characters and you should not use them (this why they are not included in the screenshots).
Browse the fonts on your watch
To help you decide which font is best, you will probably want to test those fonts directly on a watch.
We have added a new demo application called app_font_browser to the SDK to help you do that. This application uses a MenuLayer to navigate through the different options and when you have chosen a font, you can use the Select button to cycle through different messages.
You can very easily customize the list of messages for your needs and as an exercise for the reader, you can adapt the app to show custom fonts as well!
This example is available in the Examples/watchapps/app_font_browser of the SDK and on Github.