Understanding font sizes.

I'm expanding my app's supported devices from the VA-HR to the Q5/F5 range but don't have a Q5/F5 to test on and so am relying on the specs and the sim to manage the UI. Getting the layout and fonts right is proving to be a challenge, and I'm looking for some assistance in decoding the specs of the fonts.

For example, looking at the specs in the UX Guide for Graphics.FONT_NUMBER_HOT [TABLE]
[TR]
[TD]v?voactive Fonts[/TD]
[TD] [/TD]
[TD] [/TD]
[TD]fēnix? 5 and fēnix? 5X Fonts[/TD]
[TD] [/TD]
[/TR]
[TR]
[TD]FONT_NUMBER_HOT[/TD]
[TD]Babas Neue[/TD]
[TD]54[/TD]
[TD]Chronos Semibold[/TD]
[TD]52[/TD]
[/TR]
[/TABLE]
When run in the simulator I compared the sizes a character (6) by examining the screen shot in a drawing package. On the F5 it is 52 px high (as per spec) whereas the the VA-HR char is only 36 px high.
Is the specified font size of 54 for the VA-HR a misprint in the specs, or am I misinterpreting it?

peterdedecker over 7 years ago

I think the specs in the docs are indeed off for the vivo hr.
One extra thing to know about font sizes is that the font itself Can contain White space on top/bottom....

What i do is use the ux Guide as a starting point and then finetune the layout based on what i see in the sim

... and then finetune further based on what users report as the sim does not always give exactly the same feel as the real device

jim_m_58 over 7 years ago

I tend to just skip the UX guide, and look at the font in the sim and use d.getFontHeight(), as the UX guide, as the white space Peter mentions isn't noted in the doc. Once you have things looking right in the sim, you'll be pretty much good to go on the real device. I sometime run into a case where I adjust things a bit after looking at it (or getting a picture of it) on a device, as while something like a spacing of 1px might look OK in the sim, it disappears on the real device (the pixels look larger in the sim)