problem with font size on the simulator of a Fenix 5X

oupsman1977 over 7 years ago

Hello,

I'm working on a widget to display the forecast from the current location.

I'm targeting severals watches, and I've noticed a problem between the Fenix 3 and the Fenix 5X, at least on the simulator (I don't have access to real world watch).

I'm using the following code to display mandatories OpenWeatherMap Credits :

/* mandatory OpenWeather credits. */
dc.setColor(Graphics.COLOR_DK_GRAY, Graphics.COLOR_WHITE);
dc.drawText(width/2, dc.getHeight()-43 , Graphics.FONT_XTINY, "Powered by", Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER);
dc.setColor(Graphics.COLOR_PURPLE, Graphics.COLOR_WHITE);
dc.drawText(width/2, dc.getHeight()-23 , Graphics.FONT_XTINY, "OpenWeatherMap!", Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER);

On the Fenix 3, it looks like this :

On the Fenix5X, it looks like this :

What am I doing wrong ?

Thanks for your help.

jim_m_58 over 7 years ago

The fonts are quite different between the f3 and the f5 devices (including the 935). XTINY is about the same height as TINY and SMALL on the f5 family for example. FONT_NUMBER_* are even more different. Details are in an appendix in the back of the UX guide.

For some of your spacing, you may want to think about using something like

dc.getFontHeight(Gfx.FONT_XTINY)

Former Member over 7 years ago

Hey,

Thanks for the question. Each device uses it's own set of fonts. These have different sizes based on what is loaded into the device. What you are seeing is correct. On the f3 devices the FONT_XTINY const is mapped internally to "Roboto" 18pt. On the fenix 5 and 5X variants the same const is mapped to the "Roboto Condensed Regular" 26pt. So what you are seeing in the sim is actually correct, there are just different sizes on different devices. The font sizes are listed here: https://developer.garmin.com/connect-iq/user-experience-guide/appendices/.

Another option you have is implementing a custom font resource which will allow you to use a consistent size across multiple device platforms. You can learn more about resource use here: https://developer.garmin.com/connect-iq/programmers-guide/resource-compiler/

Thanks,
-Coleman

oupsman1977 over 7 years ago

Thanks everyone for your advices.

I created a custom font using Hiero (as I'm using Linux to develop for Garmin) and it works.

I will continue developping and publish soon.