Advice on consistent device layout design

The reason this is happening is because font families and sizes (in pixels) differ between devices (such as Fenix 3 vs. Fenix 5).

[https://developer.garmin.com/connect-iq/reference-guides/devices-reference/]

So you can't expect FONT_NUMBER_MEDIUM (for example) to be the same size even on devices which have the same resolution. (But Fenix 3 and Fenix 5 don't have the same resolution, either.)

The most generic way to solve this problem is whenever you need to draw text in a given bounded area, use Dc.getHeight() and Dc.getTextWidthInPixels() to determine the height and width of the text at a given font size. Then you can try every font size (from largest to smallest), and use the largest font possible that still fits in the area.

[https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/Dc.html#getHeight-instance_function]

[https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/Dc.html#getTextWidthInPixels-instance_function]

One drawback of this approach is you'll find that some watches (such as FR 23X and Vivoactive 3/4) will report a height that's a bit taller than the actual visible height of the text in question. (This is due to some invisible padding in the fonts for these devices.) This might result in using fonts which are appear to be smaller than necessary, which may result in user complaints. The way I get around this for some of my apps is to take screenshots of the text at different font sizes, determine the "true" visible height of the text, and hardcode font height per device, when necessary.

You can use dc.getTextWidthInPixels() and compare that to dc.getWidth() when determining the font.

You could use custom fonts, but that will increase the size of your data field, which has a max of 16k on the f3.

radulle said:

For me height of the numbers is ok but width is not.

Sorry if I didn't make this clear, but my suggestion was:

• For each string of text to display in a given area:
  • For each font size (from largest to smallest *):
    • Determine height and width of text
    • If both height and width are small enough to fit in the given area, use this font size. Otherwise, continue

This works unless there's literally no font on the watch that's small enough to fit in the given area, in which case you might need to look at abbreviating the text that you display, or using custom fonts if you have enough memory.

(*) If you're displaying numbers, I would try the number-only fonts first, then the regular fonts. Given the numerical values of the font type enum, you could loop from 8 to 0: https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics.html

What bugs me is that same font on two different devices has significantly different width and height, here on

On Fenix 5 and 6 there is not even a font available that is as small as one on Fenix 3 so I can not make it fit as I can on Fenix 3. Is there no way to have a custom scale for fonts?

You can use your own custom fonts, but it will take a bite out of memory in your app, especially on a f3 where a DF is at most 16kb.  Lots of watch faces use custom fonts.

https://developer.garmin.com/connect-iq/connect-iq-faq/how-do-i-use-custom-fonts/#howdoiusecustomfonts

https://developer.garmin.com/connect-iq/core-topics/resources/#fonts

radulle said:

What bugs me is that same font on two different devices has significantly different width and height, here on

On Fenix 5 and 6 there is not even a font available that is as small as one on Fenix 3 so I can not make it fit as I can on Fenix 3. Is there no way to have a custom scale for fonts?

Sure I get it, the font situation is frustrating. You'll find lots of differences between devices families, like the height padding issue I mentioned above.

Can you not use "text fonts" (i.e. non-number fonts) for smaller numbers? The text fonts are smaller than the number fonts.

Nope, there's no custom scale for fonts.

Problem is that with this tight spacing and smallest font being much larger that I have on Fenix 3 it means I would mean complete redesign of the field.

That's just part of if when you start adding support for other devices.  Back when I started I only built things for the original vivoactive.  When I started adding support for other devices, in some cases it was pretty much a complete re-write.  As I wrote more apps, I often knew what to expect and coded for it.

When the f5 first came out, people complained about FONT_TINY and FONT_XTINY, as they were both the same height, but one was bold and one wasn't, and neither was really tiny.  But the fonts are set by the firmware folk and not CIQ.  The fonts won't change on the device.

radulle said:

On Fenix 3 all looks fine but on Fenix 5 you can see that text fonts are too big and big numbers too wide. Is there a way to address this?

I'm not sure but may be relative layouts may solve your problem

https://forums.garmin.com/developer/connect-iq/b/news-announcements/posts/using-relative-layouts-and-textarea