Font size doesn't seem to scale well when specifying as a percentage.

[LukasZvikas]

I'm trying to autoscale font sizes in my app, however, it's hard to find a percentage that works for all the devices. For example, I have percentages specified like this:

  xss: convertHeightPercentageToDP('1%'),
  xs: convertHeightPercentageToDP('1.75%'),
  sm: convertHeightPercentageToDP('2%'),
  md: convertHeightPercentageToDP('2.25%'),
  lg: convertHeightPercentageToDP('2.5%'),
  xl: convertHeightPercentageToDP('3%'),
  xxl: convertHeightPercentageToDP('4%')

This looks fine on an iPhone 8+, but is too big on iPhone Xs for example. What would be the best solution to make this work? Help would be appreciated. Thanks.

[marudy]

@LukasZvikas the idea of using percentages is to have the same percentage for all the devices. Otherwise it doesn't make sense; just go use DP. If you can't make a specific percentage to work properly, then it probably means that the rest of your app is not as responsive. In this case set your break points as you have done above and use DP.

[jcush]

@marudy I was going to create an issue for what I'm experiencing but this seems like a relevant issue to add it to (please let me know if you'd like me create a new one).

It may be I'm just not fully understanding something, but following a couple of vertically-responsive issues we're having I did a deep-dive into the code and calcuated %:pixel accuracy of all our elements. I can confirm that all heights have been specified using your convertHeightPercentageToDP (hereafter hp) function. I won't go into detail listing all the tables and stats I drew up, cause many of them were to a <1px degree of accuracy, but when it came to font size I noticed a discrepancy.

So as an example, in our app's common header we have a text element called HeaderText, which has the following style property set:
fontSize: hp( 2.8 )

Using two devices to calculate for a minute, the iPhone SE and the iPhone 8 Plus, I would expect the font to come out as follows:

SE => 667px * 0.028 = 18.676px
8+ => 736px * 0.028 = 20.608px

However, instead the fonts come out as:

SE => 39px (5.847% of screen height)
8+ => 43px (5.842% of screen height)

Now I know there is rounding to the nearest pixel done, so the decimals don't bother me, but these but the % of the screen height is actually roughly twice what I asked it to provide. I would understand if this is because the SE has a render scale of 2x, but the 8+ is a 3x render scale.

So, if I want a text element to take up 2.8% of the screen's height, what do I set the font size to?

NB: Apologies if I've made a glaring mistake - I'm still newish to the whole display scaling/DP thing

[gregfenton]

@jcush - are you able to determine where the discrepancy comes in? Is it that hp(2.8) is yielding wrong values, or is it that the font selected by the OS when setting fontSize: hp(2.8) ends up being different than expected?

I am not entirely sure that iOS states unequivocally that fontSize is a function of screen height, which is what your test seems to expect. Do you know if they do? Have a link?

[arinmodi]

Anyone can help me, in my app i set the fontSize with hp it looks nice in my phone but it does'nt look like in other phones when i run, please help me